diff --git a/assets/js/script.js b/assets/js/script.js index 96c9572..7146f58 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,41 +1,100 @@ 'use strict'; -// navbar variables +// ===== Navbar Toggle ===== const nav = document.querySelector('.mobile-nav'); const navMenuBtn = document.querySelector('.nav-menu-btn'); const navCloseBtn = document.querySelector('.nav-close-btn'); - -// navToggle function -const navToggleFunc = function () { nav.classList.toggle('active'); } +const navToggleFunc = () => { + nav.classList.toggle('active'); +}; navMenuBtn.addEventListener('click', navToggleFunc); navCloseBtn.addEventListener('click', navToggleFunc); +// Close mobile nav on nav link click +const mobileNavLinks = document.querySelectorAll('.mobile-nav .nav-link'); +mobileNavLinks.forEach(link => { + link.addEventListener('click', () => { + nav.classList.remove('active'); + }); +}); -// theme toggle variables +// ===== Theme Toggle with LocalStorage ===== const themeBtn = document.querySelectorAll('.theme-btn'); +const body = document.body; + +// Apply saved theme on load +const savedTheme = localStorage.getItem('theme'); +if (savedTheme === 'dark') { + body.classList.add('dark-theme'); + body.classList.remove('light-theme'); + themeBtn.forEach(btn => { + btn.classList.add('dark'); + btn.classList.remove('light'); + }); +} else { + body.classList.add('light-theme'); + themeBtn.forEach(btn => { + btn.classList.add('light'); + btn.classList.remove('dark'); + }); +} + +// Toggle theme on button click +themeBtn.forEach(btn => { + btn.addEventListener('click', () => { + const isDark = body.classList.toggle('dark-theme'); + body.classList.toggle('light-theme'); + + themeBtn.forEach(btn => { + btn.classList.toggle('dark'); + btn.classList.toggle('light'); + }); + + localStorage.setItem('theme', isDark ? 'dark' : 'light'); + }); +}); + + +// ===== Newsletter Form Validation ===== +const newsletterForm = document.querySelector('.newsletter form'); + +if (newsletterForm) { + newsletterForm.addEventListener('submit', function (e) { + const emailInput = this.querySelector('input[name="email"]'); + const email = emailInput.value.trim(); + + if (!email || !email.includes('@')) { + e.preventDefault(); // Stop form submission + alert('Please enter a valid email address.'); + } + }); +} -for (let i = 0; i < themeBtn.length; i++) { +// ===== Load More Blog Cards ===== +const blogCards = document.querySelectorAll('.blog-card'); +const loadMoreBtn = document.querySelector('.load-more'); - themeBtn[i].addEventListener('click', function () { +if (blogCards.length && loadMoreBtn) { + let visibleCards = 3; - // toggle `light-theme` & `dark-theme` class from `body` - // when clicked `theme-btn` - document.body.classList.toggle('light-theme'); - document.body.classList.toggle('dark-theme'); + const showCards = count => { + blogCards.forEach((card, i) => { + card.style.display = i < count ? 'block' : 'none'; + }); + }; - for (let i = 0; i < themeBtn.length; i++) { + showCards(visibleCards); - // When the `theme-btn` is clicked, - // it toggles classes between `light` & `dark` for all `theme-btn`. - themeBtn[i].classList.toggle('light'); - themeBtn[i].classList.toggle('dark'); + loadMoreBtn.addEventListener('click', () => { + visibleCards += 3; + showCards(visibleCards); + if (visibleCards >= blogCards.length) { + loadMoreBtn.style.display = 'none'; } - - }) - -} \ No newline at end of file + }); +}