| document.addEventListener('DOMContentLoaded', function() { |
| const searchForm = document.getElementById('searchForm'); |
| const searchInput = document.getElementById('searchInput'); |
| const luckyBtn = document.getElementById('luckyBtn'); |
| const searchResults = document.getElementById('searchResults'); |
| const resultsList = document.getElementById('resultsList'); |
|
|
| searchForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const query = searchInput.value.trim(); |
| if (query) { |
| performSearch(query); |
| } |
| }); |
|
|
| luckyBtn.addEventListener('click', function() { |
| const queries = [ |
| "funny cat videos", |
| "how to train your dragon", |
| "best chocolate chip cookie recipe", |
| "interesting facts about sloths", |
| "world's largest rubber duck", |
| "how to speak pirate", |
| "underwater basket weaving", |
| "history of the high five" |
| ]; |
| const randomQuery = queries[Math.floor(Math.random() * queries.length)]; |
| searchInput.value = randomQuery; |
| performSearch(randomQuery); |
| }); |
|
|
| function performSearch(query) { |
| |
| |
| searchResults.classList.remove('hidden'); |
| resultsList.innerHTML = ''; |
|
|
| |
| setTimeout(() => { |
| const mockResults = [ |
| { |
| title: `${query} - The Official Moogly Guide`, |
| url: `https://moogly.com/${query.replace(/\s+/g, '-')}`, |
| description: `Everything you need to know about ${query} according to our team of moogly experts.` |
| }, |
| { |
| title: `Wikipedia: ${query}`, |
| url: `https://en.wikipedia.org/wiki/${query.replace(/\s+/g, '_')}`, |
| description: `Learn about the history and significance of ${query} in this comprehensive article.` |
| }, |
| { |
| title: `10 Amazing Facts About ${query} You Didn't Know`, |
| url: `https://facts.moogly.com/${query.replace(/\s+/g, '-')}`, |
| description: `Prepare to be amazed by these little-known facts about ${query}. Number 7 will shock you!` |
| }, |
| { |
| title: `${query} Videos - MooglyTube`, |
| url: `https://mooglytube.com/search?q=${encodeURIComponent(query)}`, |
| description: `Watch the latest and greatest videos about ${query} from creators worldwide.` |
| }, |
| { |
| title: `How to ${query} in 5 Easy Steps`, |
| url: `https://howto.moogly.com/${query.replace(/\s+/g, '-')}`, |
| description: `Our step-by-step guide makes learning ${query} easy and fun for everyone!` |
| } |
| ]; |
|
|
| mockResults.forEach(result => { |
| const resultElement = document.createElement('div'); |
| resultElement.className = 'search-result p-4 rounded-lg hover:bg-gray-50 transition-colors'; |
| resultElement.innerHTML = ` |
| <a href="${result.url}" class="block"> |
| <h4 class="text-sm text-blue-700">${result.url}</h4> |
| <h3 class="text-xl text-blue-600 hover:underline mb-1">${result.title}</h3> |
| <p class="text-gray-600">${result.description}</p> |
| </a> |
| `; |
| resultsList.appendChild(resultElement); |
| }); |
| }, 500); |
| } |
| }); |
