abdyker's picture
Build a tourism web application about traveling in Kyrgyzstan with a unique design for every page.
590f4e5 verified
// Main JavaScript file for the Nomadic Peaks app
// Initialize components
document.addEventListener('DOMContentLoaded', () => {
// Weather widget
const weatherWidget = document.createElement('weather-widget');
document.body.appendChild(weatherWidget);
// Language switcher
const translations = {
english: {
welcome: "Discover Kyrgyzstan",
explore: "Explore",
destinations: "Destinations",
tours: "Tours",
contact: "Contact"
},
kyrgyz: {
welcome: "Кыргызстанды изилдеңиз",
explore: "Изилдөө",
destinations: "Жерлер",
tours: "Турлар",
contact: "Байланыш"
}
};
const toggleLanguage = () => {
const currentLang = document.documentElement.lang;
const newLang = currentLang === 'en' ? 'ky' : 'en';
document.documentElement.lang = newLang;
const elements = document.querySelectorAll('[data-translate]');
elements.forEach(el => {
const key = el.getAttribute('data-translate');
el.textContent = translations[newLang][key];
});
};
const languageBtn = document.getElementById('languageToggle');
if (languageBtn) {
languageBtn.addEventListener('click', toggleLanguage);
}
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('section, .animate').forEach(el => {
observer.observe(el);
});
// Language switcher functionality
const toggleLanguage = () => {
const elements = document.querySelectorAll('[data-translate]');
elements.forEach(el => {
const key = el.getAttribute('data-translate');
if (el.textContent === translations.english[key]) {
el.textContent = translations.russian[key];
} else {
el.textContent = translations.english[key];
}
});
};
// Sample translations (would be expanded in a real app)
const translations = {
english: {
welcome: "Welcome to Kyrgyzstan",
explore: "Explore"
},
russian: {
welcome: "Добро пожаловать в Кыргызстан",
explore: "Исследовать"
}
};
// Add event listener for language toggle button if it exists
const languageBtn = document.getElementById('languageToggle');
if (languageBtn) {
languageBtn.addEventListener('click', toggleLanguage);
}
// Form submission handler
const contactForm = document.querySelector('#contact form');
if (contactForm) {
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
alert('Thank you for your inquiry! We will contact you soon.');
contactForm.reset();
});
}
// Intersection Observer for animation
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
observer.unobserve(entry.target);
}
});
}, observerOptions);
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
});
// API call example (for future implementation)
async function fetchPopularTours() {
try {
const response = await fetch('https://api.example.com/tours');
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching tours:', error);
return [];
}
}