script.js

const places=[
{category:"beach",country:"brazil",name:"Copacabana Beach",description:"A famous beach in Rio de Janeiro, Brazil.",image:"images/copacabana.svg"},
{category:"beach",country:"australia",name:"Bondi Beach",description:"A popular beach in Sydney, Australia.",image:"images/bondi.svg"},
{category:"temple",country:"japan",name:"Kinkaku-ji Temple",description:"A beautiful golden temple in Kyoto, Japan.",image:"images/kinkakuji.svg"},
{category:"temple",country:"cambodia",name:"Angkor Wat",description:"A historic temple complex in Cambodia.",image:"images/angkor.svg"},
{category:"country",country:"japan",name:"Tokyo",description:"A modern city with food, technology and culture.",image:"images/tokyo.svg"},
{category:"country",country:"japan",name:"Kyoto",description:"A peaceful city with temples and traditional streets.",image:"images/kyoto.svg"},
{category:"country",country:"brazil",name:"Rio de Janeiro",description:"A colorful city with beaches and famous views.",image:"images/rio.svg"},
{category:"country",country:"brazil",name:"São Paulo",description:"A large city with art, food and nightlife.",image:"images/saopaulo.svg"},
{category:"country",country:"australia",name:"Sydney",description:"A coastal city known for its harbour and opera house.",image:"images/sydney.svg"},
{category:"country",country:"australia",name:"Melbourne",description:"A creative city known for cafés, culture and sport.",image:"images/melbourne.svg"}
];
const searchInput=document.getElementById("searchInput"),searchButton=document.getElementById("searchButton"),clearButton=document.getElementById("clearButton"),results=document.getElementById("results");
function showPlaces(list){results.innerHTML="";if(list.length===0){results.innerHTML='<p class="message">Sorry, I do not have a recommendation for that search.</p>';return;}list.forEach(function(place){const card=document.createElement("article");card.className="card";card.innerHTML=`<img src="${place.image}" alt="${place.name}"><h3>${place.name}</h3><p>${place.description}</p>`;results.appendChild(card);});}
function searchPlaces(){const word=searchInput.value.toLowerCase().trim();if(word===""){results.innerHTML='<p class="message">Please type a search word.</p>';return;}let filteredPlaces=[];if(word.includes("beach")){filteredPlaces=places.filter(p=>p.category==="beach");}else if(word.includes("temple")){filteredPlaces=places.filter(p=>p.category==="temple");}else{filteredPlaces=places.filter(p=>p.country.includes(word)||p.name.toLowerCase().includes(word));}showPlaces(filteredPlaces);}
searchButton.addEventListener("click",searchPlaces);searchInput.addEventListener("keydown",e=>{if(e.key==="Enter")searchPlaces();});clearButton.addEventListener("click",function(){searchInput.value="";results.innerHTML='<p class="message">Use the search box to find a place.</p>';});