document.addEventListener('DOMContentLoaded', function() { const searchInput = document.getElementById('searchInput'); const searchButton = document.getElementById('searchButton'); const searchResultsDiv = document.getElementById('searchResults'); searchButton.addEventListener('click', performSearch); // Optional: Allow search on Enter key press searchInput.addEventListener('keypress', function(event) { if (event.key === 'Enter') { performSearch(); } }); function performSearch() { const query = searchInput.value; if (!query.trim()) { alert("Please enter a search query."); // Basic validation return; } // **IMPORTANT: Replace with your actual API key and CSE ID** const apiKey = 'YOUR_GOOGLE_API_KEY'; // *** PUT YOUR API KEY HERE *** const searchEngineId = 'YOUR_CSE_ID'; // *** PUT YOUR CSE ID HERE *** const apiUrl = `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${searchEngineId}&q=${query}&num=10`; searchResultsDiv.innerHTML = '

Searching...

'; // Show loading message fetch(apiUrl) .then(response => response.json()) .then(data => { searchResultsDiv.innerHTML = ''; // Clear loading message and previous results displayResults(data); }) .catch(error => { console.error('Error fetching search results:', error); searchResultsDiv.innerHTML = '

Error fetching search results. Please try again later.

'; }); } function displayResults(data) { if (!data.items || data.items.length === 0) { searchResultsDiv.innerHTML = '

No results found.

'; return; } const results = data.items; for (let i = 0; i < Math.min(results.length, 10); i++) { // Limit to top 10 const result = results[i]; const resultItemDiv = document.createElement('div'); resultItemDiv.classList.add('result-item'); const titleLink = document.createElement('a'); titleLink.href = result.link; titleLink.textContent = result.title; titleLink.target = '_blank'; // Open links in new tab const snippetPara = document.createElement('p'); snippetPara.textContent = result.snippet; resultItemDiv.appendChild(titleLink); resultItemDiv.appendChild(snippetPara); searchResultsDiv.appendChild(resultItemDiv); } } });