D
M
K
J

Plan Your Next Family Adventure

Discover amazing destinations together, share your travel dreams, and make unforgettable memories as a family.

Add to Wishlist
All
Beach
Mountains
City
Theme Parks
Countryside
Budget-friendly

New comment added

Mom commented on your Safari Adventure wishlist

// DOM elements const locationInput = document.getElementById('location-input'); const getCurrentLocationBtn = document.getElementById('get-current-location'); const distanceRange = document.getElementById('distance-range'); const distanceValue = document.getElementById('distance-value'); const findNearbyBtn = document.getElementById('find-nearby'); const nearbyResults = document.getElementById('nearby-results'); const nearbyDestinations = document.getElementById('nearby-destinations'); // DOM elements const themeToggle = document.getElementById('theme-toggle'); const navLinks = document.querySelectorAll('.nav-link'); const sections = document.querySelectorAll('.section'); const likeButtons = document.querySelectorAll('.like-btn'); const viewDetailsButtons = document.querySelectorAll('.view-details'); const destinationModal = document.getElementById('destination-modal'); const closeModal = document.getElementById('close-modal'); const modalTitle = document.getElementById('modal-title'); const modalLocation = document.getElementById('modal-location'); const modalSeason = document.getElementById('modal-season'); const modalBudget = document.getElementById('modal-budget'); const modalDescription = document.getElementById('modal-description'); const modalFeatures = document.getElementById('modal-features'); const commentToggles = document.querySelectorAll('.comment-toggle'); const addWishlistForm = document.getElementById('add-wishlist-form'); const wishlistList = document.getElementById('wishlist-list'); const addWishlistBtn = document.getElementById('add-wishlist-btn'); const notification = document.getElementById('notification'); const searchForm = document.getElementById('search-form'); const filterItems = document.querySelectorAll('.filter-item'); const destinationCards = document.querySelectorAll('.destination-card'); const budgetCalculatorForm = document.getElementById('budget-calculator-form'); const budgetResult = document.getElementById('budget-result' // Initialize location functionality const initLocationFeature = () => { // Update distance value display when slider changes distanceRange.addEventListener('input', () => { distanceValue.textContent = distanceRange.value; }); // Find nearby destinations button click findNearbyBtn.addEventListener('click', findNearbyDestinations); // Get current location button click getCurrentLocationBtn.addEventListener('click', getUserLocation); }; // Get user's current location const getUserLocation = () => { if (navigator.geolocation) { // Show loading status showLocationStatus('Getting your location...', 'info'); navigator.geolocation.getCurrentPosition( (position) => { // Success const { latitude, longitude } = position.coords; // Reverse geocode to get location name reverseGeocode(latitude, longitude) .then(locationName => { locationInput.value = locationName; showLocationStatus('Location found!', 'success'); // Automatically find nearby destinations findNearbyDestinations(); }) .catch(error => { console.error('Reverse geocoding error:', error); locationInput.value = `${latitude.toFixed(4)}, ${longitude.toFixed(4)}`; showLocationStatus('Location found, but address lookup failed', 'success'); // Still find nearby destinations findNearbyDestinations(); }); }, (error) => { // Error console.error('Geolocation error:', error); let errorMessage = 'Unable to get your location.'; switch (error.code) { case error.PERMISSION_DENIED: errorMessage = 'Location access denied. Please enable location services in your browser settings.'; break; case error.POSITION_UNAVAILABLE: errorMessage = 'Location information is unavailable.'; break; case error.TIMEOUT: errorMessage = 'The request to get location timed out.'; break; } showLocationStatus(errorMessage, 'error'); } ); } else { showLocationStatus('Geolocation is not supported by your browser', 'error'); } }; // Initialize local storage const initLocalStorage = () => { if (!localStorage.getItem('likedDestinations')) { localStorage.setItem('likedDestinations', JSON.stringify([])); } if (!localStorage.getItem('wishlist')) { localStorage.setItem('wishlist', JSON.stringify([ { id: 'wish-1', title: 'Safari Adventure', location: 'Serengeti, Tanzania', description: "I've always wanted to take the family on a safari to see wild animals in their natural habitat. The kids would love seeing lions, elephants, and giraffes up close!", season: 'Summer', budget: '$$', author: 'D', date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), votes: 3, comments: [ { author: 'Mom', text: "This sounds amazing! I'm worried about the cost though." }, { author: 'Kid 1', text: "Can we see tigers too?" } ] }, { id: 'wish-2', title: 'Tokyo Disneyland', location: 'Tokyo, Japan', description: "I want to go to Tokyo Disneyland because they have exclusive rides and shows we can't see anywhere else! Plus we can explore Tokyo and try real Japanese food!", season: 'Spring', budget: '$$', author: 'J', date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), votes: 4, comments: [ { author: 'Dad', text: "Great idea! Let's try to combine it with seeing other parts of Japan too." } ] } ])); } if (!localStorage.getItem('theme')) { localStorage.setItem('theme', 'light'); } if (!localStorage.getItem('savingsAmount')) { localStorage.setItem('savingsAmount', '1225'); } }; // Theme toggle const toggleTheme = () => { const currentTheme = document.documentElement.getAttribute('data-theme') || 'light'; const newTheme = currentTheme === 'light' ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', newTheme); localStorage.setItem('theme', newTheme); // Update theme toggle icon const icon = themeToggle.querySelector('i'); if (newTheme === 'dark') { icon.classList.remove('fa-moon'); icon.classList.add('fa-sun'); } else { icon.classList.remove('fa-sun'); icon.classList.add('fa-moon'); } }; // Load theme from localStorage const loadTheme = () => { const savedTheme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme', savedTheme); // Update theme toggle icon const icon = themeToggle.querySelector('i'); if (savedTheme === 'dark') { icon.classList.remove('fa-moon'); icon.classList.add('fa-sun'); } else { icon.classList.remove('fa-sun'); icon.classList.add('fa-moon'); } }; // Navigation const navigateToSection = (sectionId) => { sections.forEach(section => { section.classList.add('hidden'); }); document.getElementById(sectionId).classList.remove('hidden'); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('data-section') === sectionId) { link.classList.add('active'); } }); // Scroll to top of section window.scrollTo({ top: document.getElementById(sectionId).offsetTop - 100, behavior: 'smooth' }); }; // Like button functionality const toggleLike = (button) => { const destinationId = button.getAttribute('data-id'); const likedDestinations = JSON.parse(localStorage.getItem('likedDestinations') || '[]'); const icon = button.querySelector('i'); if (likedDestinations.includes(destinationId)) { // Unlike const updatedLikes = likedDestinations.filter(id => id !== destinationId); localStorage.setItem('likedDestinations', JSON.stringify(updatedLikes)); icon.classList.remove('fas'); icon.classList.add('far'); button.classList.remove('active'); } else { // Like likedDestinations.push(destinationId); localStorage.setItem('likedDestinations', JSON.stringify(likedDestinations)); icon.classList.remove('far'); icon.classList.add('fas'); button.classList.add('active'); // Show notification showNotification('Destination added to favorites!', 'You can find it in your wishlist section.'); } }; // Load likes from localStorage const loadLikes = () => { const likedDestinations = JSON.parse(localStorage.getItem('likedDestinations') || '[]'); likeButtons.forEach(button => { const destinationId = button.getAttribute('data-id'); const icon = button.querySelector('i'); if (likedDestinations.includes(destinationId)) { icon.classList.remove('far'); icon.classList.add('fas'); button.classList.add('active'); } }); }; // Show destination details modal const showDestinationDetails = (destinationId) => { const destination = destinations.find(dest => dest.id === parseInt(destinationId)); if (destination) { modalTitle.textContent = destination.title; modalLocation.textContent = destination.location; modalSeason.textContent = destination.season; modalBudget.textContent = destination.budget; modalDescription.textContent = destination.description; // Clear and populate features list modalFeatures.innerHTML = ''; destination.features.forEach(feature => { const li = document.createElement('li'); li.textContent = feature; modalFeatures.appendChild(li); }); // Update activities const activitiesList = document.querySelector('.activities-list'); activitiesList.innerHTML = ''; destination.activities.forEach(activity => { const activityCard = document.createElement('div'); activityCard.className = 'activity-card'; activityCard.innerHTML = `

${activity.title}

${activity.description}

`; activitiesList.appendChild(activityCard); }); destinationModal.classList.add('active'); } }; // Toggle comment section const toggleComments = (commentToggle) => { const wishlistId = commentToggle.getAttribute('data-id'); const commentForm = document.getElementById(`comment-form-${wishlistId}`); if (commentForm.style.display === 'block') { commentForm.style.display = 'none'; } else { commentForm.style.display = 'block'; } }; // Add new wishlist item const addWishlistItem = (event) => { event.preventDefault(); const title = document.getElementById('destination-title').value; const location = document.getElementById('destination-location').value; const description = document.getElementById('destination-description').value; const season = document.getElementById('destination-season').value; const budget = document.getElementById('destination-budget').value; const author = document.getElementById('family-member').value; const wishlist = JSON.parse(localStorage.getItem('wishlist') || '[]'); const newWishId = `wish-${wishlist.length + 1}`; const newWish = { id: newWishId, title, location, description, season, budget, author, date: new Date().toISOString(), votes: 0, comments: [] }; wishlist.push(newWish); localStorage.setItem('wishlist', JSON.stringify(wishlist)); renderWishlist(); // Reset form event.target.reset(); // Show notification showNotification('Wishlist item added!', `"${title}" has been added to the family wishlist.`); }; // Render wishlist items const renderWishlist = () => { const wishlist = JSON.parse(localStorage.getItem('wishlist') || '[]'); wishlistList.innerHTML = ''; wishlist.forEach(wish => { const wishItem = document.createElement('div'); wishItem.className = 'wishlist-item'; wishItem.setAttribute('data-id', wish.id); // Format date const date = new Date(wish.date); const now = new Date(); const diffTime = Math.abs(now - date); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); let dateStr; if (diffDays === 0) { dateStr = 'Added today'; } else if (diffDays === 1) { dateStr = 'Added yesterday'; } else if (diffDays < 7) { dateStr = `Added ${diffDays} days ago`; } else if (diffDays < 30) { const weeks = Math.floor(diffDays / 7); dateStr = `Added ${weeks} ${weeks === 1 ? 'week' : 'weeks'} ago`; } else { dateStr = `Added on ${date.toLocaleDateString()}`; } // Determine profile color let profileColor; switch (wish.author) { case 'D': profileColor = '#3A7BD5'; break; case 'M': profileColor = '#E59400'; break; case 'K': profileColor = '#3AC5A5'; break; case 'J': profileColor = '#D0021B'; break; default: profileColor = '#3A7BD5'; } // Determine author name let authorName; switch (wish.author) { case 'D': authorName = 'Dad'; break; case 'M': authorName = 'Mom'; break; case 'K': authorName = 'Kid 1'; break; case 'J': authorName = 'Kid 2'; break; default: authorName = 'Family member'; } wishItem.innerHTML = `

${wish.title}

${wish.author}
${authorName} suggested

${wish.description}

Location: ${wish.location}

Best time: ${wish.season}

Budget: ${wish.budget}

${dateStr}
${wish.comments.map(comment => `
${comment.author}: ${comment.text}
`).join('')}
`; wishlistList.appendChild(wishItem); }); // Add event listeners for new elements document.querySelectorAll('.comment-toggle').forEach(toggle => { toggle.addEventListener('click', () => toggleComments(toggle)); }); document.querySelectorAll('.vote-btn').forEach(button => { button.addEventListener('click', () => voteForWishlistItem(button)); }); document.querySelectorAll('.add-comment').forEach(button => { button.addEventListener('click', () => addComment(button)); }); }; // Vote for wishlist item const voteForWishlistItem = (button) => { const wishId = button.getAttribute('data-id'); const wishlist = JSON.parse(localStorage.getItem('wishlist') || '[]'); const wishIndex = wishlist.findIndex(wish => wish.id === wishId); if (wishIndex !== -1) { wishlist[wishIndex].votes++; localStorage.setItem('wishlist', JSON.stringify(wishlist)); const voteCount = button.querySelector('.vote-count'); voteCount.textContent = wishlist[wishIndex].votes; // Show notification showNotification('Vote added!', `You voted for "${wishlist[wishIndex].title}".`); } }; // Add comment to wishlist item const addComment = (button) => { const wishId = button.getAttribute('data-id'); const wishlist = JSON.parse(localStorage.getItem('wishlist') || '[]'); const wishIndex = wishlist.findIndex(wish => wish.id === wishId); if (wishIndex !== -1) { const commentInput = button.closest('.comment-input').querySelector('input'); const commentText = commentInput.value.trim(); if (commentText) { // Get active profile const activeProfile = document.querySelector('.profile-avatar.active'); let author = 'Dad'; // Default if (activeProfile) { const avatar = activeProfile.textContent; switch (avatar) { case 'D': author = 'Dad'; break; case 'M': author = 'Mom'; break; case 'K': author = 'Kid 1'; break; case 'J': author = 'Kid 2'; break; } } const newComment = { author, text: commentText }; wishlist[wishIndex].comments.push(newComment); localStorage.setItem('wishlist', JSON.stringify(wishlist)); // Clear input commentInput.value = ''; // Update UI renderWishlist(); // Show notification showNotification('Comment added!', `Your comment has been added to "${wishlist[wishIndex].title}".`); } } }; // Show notification const showNotification = (title, message) => { const notificationTitle = notification.querySelector('.notification-title'); const notificationMessage = notification.querySelector('.notification-message'); notificationTitle.textContent = title; notificationMessage.textContent = message; notification.classList.add('show'); // Hide after 5 seconds setTimeout(() => { notification.classList.remove('show'); }, 5000); }; // Filter destinations const filterDestinations = (category) => { destinationCards.forEach(card => { if (category === 'all' || card.getAttribute('data-category') === category) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); }; // Calculate budget const calculateBudget = (event) => { event.preventDefault(); const people = parseInt(document.getElementById('number-of-people').value); const days = parseInt(document.getElementById('trip-days').value); const accommodation = document.getElementById('accommodation-type').value; const transportation = document.getElementById('transportation-type').value; const activities = document.getElementById('activities-budget').value; const food = document.getElementById('food-budget').value; const region = document.getElementById('destination-region').value; // Base rates per person per day let accommodationRate; switch (accommodation) { case 'budget': accommodationRate = 50; break; case 'mid-range': accommodationRate = 100; break; case 'luxury': accommodationRate = 250; break; case 'rental': accommodationRate = 75; break; default: accommodationRate = 100; } // Transportation costs (per person) let transportationCost; switch (transportation) { case 'flight': transportationCost = 300; break; case 'car': transportationCost = 150; break; case 'train': transportationCost = 200; break; case 'cruise': transportationCost = 400; break; default: transportationCost = 300; } // Activities budget per person per day let activitiesRate; switch (activities) { case 'minimal': activitiesRate = 10; break; case 'moderate': activitiesRate = 30; break; case 'high': activitiesRate = 60; break; default: activitiesRate = 30; } // Food budget per person per day let foodRate; switch (food) { case 'budget': foodRate = 20; break; case 'moderate': foodRate = 40; break; case 'premium': foodRate = 80; break; default: foodRate = 40; } // Region multiplier let regionMultiplier; switch (region) { case 'north-america': regionMultiplier = 1.0; break; case 'europe': regionMultiplier = 1.1; break; case 'asia': regionMultiplier = 0.9; break; case 'south-america': regionMultiplier = 0.8; break; case 'oceania': regionMultiplier = 1.2; break; case 'africa': regionMultiplier = 0.85; break; default: regionMultiplier = 1.0; } // Calculate costs const accommodationTotal = people * days * accommodationRate * regionMultiplier; const transportationTotal = people * transportationCost * regionMultiplier; const activitiesTotal = people * days * activitiesRate * regionMultiplier; const foodTotal = people * days * foodRate * regionMultiplier; const totalCost = accommodationTotal + transportationTotal + activitiesTotal + foodTotal; // Add some variation const minTotal = Math.floor(totalCost * 0.9); const maxTotal = Math.ceil(totalCost * 1.1); // Update result const resultAmount = document.querySelector('.result-amount'); resultAmount.textContent = `${minTotal.toLocaleString()} - ${maxTotal.toLocaleString()}`; const budgetBreakdown = document.querySelector('.budget-breakdown'); budgetBreakdown.innerHTML = `

Accommodation: ${Math.floor(accommodationTotal * 0.9).toLocaleString()} - ${Math.ceil(accommodationTotal * 1.1).toLocaleString()}

Transportation: ${Math.floor(transportationTotal * 0.9).toLocaleString()} - ${Math.ceil(transportationTotal * 1.1).toLocaleString()}

Food: ${Math.floor(foodTotal * 0.9).toLocaleString()} - ${Math.ceil(foodTotal * 1.1).toLocaleString()}

Activities: ${Math.floor(activitiesTotal * 0.9).toLocaleString()} - ${Math.ceil(activitiesTotal * 1.1).toLocaleString()}

`; // Update savings progress const savingsAmount = parseInt(localStorage.getItem('savingsAmount') || '0'); const targetAmount = minTotal; const progressPercent = Math.min(100, Math.floor((savingsAmount / targetAmount) * 100)); const progressValue = document.querySelector('.progress-value'); progressValue.style.width = `${progressPercent}%`; const progressStats = document.querySelector('.progress-stats'); progressStats.innerHTML = ` ${savingsAmount.toLocaleString()} saved Target: ${targetAmount.toLocaleString()} `; // Show result budgetResult.style.display = 'block'; }; // Search functionality const searchDestinations = (event) => { event.preventDefault(); const searchTerm = document.getElementById('search').value.toLowerCase(); destinationCards.forEach(card => { const title = card.querySelector('.destination-title h3').textContent.toLowerCase(); const location = card.querySelector('.destination-location').textContent.toLowerCase(); const description = card.querySelector('.destination-description').textContent.toLowerCase(); if (title.includes(searchTerm) || location.includes(searchTerm) || description.includes(searchTerm)) { card.style.display = 'block'; } else { card.style.display = 'none'; } }); // Navigate to popular section to show results navigateToSection('popular'); }; // Mark active profile const setActiveProfile = (profileEl) => { const profileAvatars = document.querySelectorAll('.profile-avatar'); profileAvatars.forEach(avatar => { avatar.classList.remove('active'); }); profileEl.classList.add('active'); // Show notification const profileName = profileEl.getAttribute('title'); showNotification('Profile switched', `You are now browsing as ${profileName}.`); }; // Initialize the page const init = () => { initLocalStorage(); loadTheme(); loadLikes(); renderWishlist(); // Set default active section navigateToSection('popular'); // Set default active profile document.querySelector('.profile-avatar').classList.add('active'); // Attach event listeners themeToggle.addEventListener('click', toggleTheme); navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); const section = link.getAttribute('data-section'); navigateToSection(section); }); }); likeButtons.forEach(button => { button.addEventListener('click', () => toggleLike(button)); }); viewDetailsButtons.forEach(button => { button.addEventListener('click', () => { const destinationId = button.getAttribute('data-id'); showDestinationDetails(destinationId); }); }); closeModal.addEventListener('click', () => { destinationModal.classList.remove('active'); }); // Close modal when clicking outside destinationModal.addEventListener('click', (e) => { if (e.target === destinationModal) { destinationModal.classList.remove('active'); } }); commentToggles.forEach(toggle => { toggle.addEventListener('click', () => toggleComments(toggle)); }); addWishlistForm.addEventListener('submit', addWishlistItem); addWishlistBtn.addEventListener('click', (e) => { e.preventDefault(); navigateToSection('wishlist'); }); searchForm.addEventListener('submit', searchDestinations); filterItems.forEach(item => { item.addEventListener('click', () => { filterItems.forEach(i => i.classList.remove('active')); item.classList.add('active'); filterDestinations(item.getAttribute('data-filter')); }); }); budgetCalculatorForm.addEventListener('submit', calculateBudget); document.querySelectorAll('.profile-avatar').forEach(profile => { profile.addEventListener('click', () => setActiveProfile(profile)); }); mapPins.forEach(pin => { pin.addEventListener('click', () => { const destinationId = pin.getAttribute('data-id'); if (destinationId.startsWith('wish-')) { navigateToSection('wishlist'); } else { showDestinationDetails(destinationId); } }); }); // Allow escape key to close modal document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && destinationModal.classList.contains('active')) { destinationModal.classList.remove('active'); } }); }; // Initialize after DOM is loaded document.addEventListener('DOMContentLoaded', init);