app.js

const navIcon = document.getElementById("nav-icon");
const navBar = document.querySelector(".navbar");
const ball = document.querySelector(".ball");
const moon = document.querySelector(".fa-moon");
const sun = document.querySelector(".fa-sun");
const _switch = document.querySelector(".switch-container");
const box = document.querySelector(".box");
let main = document.getElementsByTagName('main')[0]
let secondary_heading = document.querySelectorAll(".secondary_heading")
const currentAge = document.querySelector('.age > b')

navIcon?.addEventListener("click", () => {
  navBar.classList.toggle("navBarMobile");
  navIcon.classList.toggle("open");
});

let ltheme = localStorage.getItem("theme");

let theme = ltheme === null ? "light" : ltheme;

_switch?.addEventListener("click", () => {
  if (theme === "light") {
    sun.style.transform = "translateX(45px) rotate(250deg) ";
    sun.style.opacity = "0";
    moon.style.transform = "translateX(-45px) rotate(350deg)";
    moon.style.opacity = "1";

    applyDarkTheme()

    theme = "dark";
  } else {
    sun.style.transform = "translateX(0)";
    sun.style.opacity = "1";
    moon.style.transform = "translateX(0)";
    moon.style.opacity = "0";

    removeDarkTheme()

    theme = "light";
  }
});

setInterval(() => {
  document.body.className = localStorage.getItem("theme");
  localStorage.setItem("theme", theme);
}, 1);
window.onload = () => {
  if (ltheme === "light") {
    sun.style.transform = "translateX(0)";
    sun.style.opacity = "1";
    moon.style.transform = "translateX(0)";
    moon.style.opacity = "0";
    removeDarkTheme()
  }
  if (ltheme === "dark") {
    sun.style.transform = "translateX(45px) ";
    sun.style.opacity = "0";
    moon.style.transform = "translateX(-45px)";
    moon.style.opacity = "1";
    applyDarkTheme()
  }
};


function applyDarkTheme() {
  main.classList.add("darkTheme");
  document.getElementById("STATS").classList.add("darkTheme")

  document.getElementsByClassName("main-info")[0].classList.add("darkTheme")
  secondary_heading.forEach((heading) => {
    heading.classList.add("darkTheme")
  })
  document.querySelectorAll(".blackText").forEach((Txt) =>
    Txt.style.color = "white");

  document.getElementById('myDiv').style.backgroundImage = "url('Image/im1.png')";


}
function removeDarkTheme() {

  main.classList.remove("darkTheme");
  document.getElementById("STATS").classList.remove("darkTheme")
  document.getElementsByClassName("main-info")[0].classList.remove("darkTheme")
  secondary_heading.forEach((heading) => {
    heading.classList.remove("darkTheme")
  })

  document.querySelectorAll(".blackText").forEach((Txt) =>
    Txt.style.color = "black"
  )
  document.getElementById('myDiv').style.backgroundImage = "url('Image/im2.png')";
}

function navSlide() {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".div-navbar");
  const navLinks = document.querySelectorAll(".div-navbar a");

  burger.addEventListener("click", () => {
    //Toggle Nav
    nav.classList.toggle("nav-active");

    //Animate Links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ""
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
      }
    });
    //Burger Animation
    burger.classList.toggle("toggle");
  });

}

navSlide();


// document.querySelectorAll('.pht-content > img').forEach(image =>{
//   image.addEventListener('click', () =>{
//     document.querySelector('.bgh').classList.remove('.pop-up');
//     document.querySelector('.bgh').classList.add('.pop-up-rem');
//   })
// })

// document.querySelector('.pop-up').classList.remove('.pop-up');
//     document.querySelector('.pop-up').classList.add('.pop-up-rem');
document.querySelectorAll('.pop img').forEach(im => {
  im.onclick = () => {
    document.querySelector('.pop-up').style.display = 'flex';
    document.querySelector('.pop-up img').src = im.getAttribute('src');
  }
});

document.querySelector('.pop-up span').onclick = () => {
  document.querySelector('.pop-up').style.display = 'none';
};

// Stats number animation
function setupStatsAnimation() {
  const statsNumbers = document.querySelectorAll('.stats-table .card-text');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const element = entry.target;
        element.classList.add('animate');
        animateNumber(element);
        observer.unobserve(element);
      }
    });
  }, { threshold: 0.5 });

  statsNumbers.forEach(el => observer.observe(el));
}
// age calculator
const calculateAge = ((dob)=> {
  const birthDate = new Date(dob);
  const today = new Date();
  
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  const dayDiff = today.getDate() - birthDate.getDate();

  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
      age--;
  }

  return age;
})

const age = calculateAge("1987-06-24");
const currentYear = new Date().getFullYear();
currentAge.innerHTML = `Age as on ${currentYear} (${age} years)`

function animateNumber(element) {
  const target = parseInt(element.textContent, 10);
  element.textContent = '0';

  const duration = 2000;
  const startTime = Date.now();

  const update = () => {
    const elapsed = Date.now() - startTime;
    if (elapsed >= duration) {
      element.textContent = target;
      return;
    }
    const progress = elapsed / duration;
    const current = Math.floor(progress * target);
    element.textContent = current;
    requestAnimationFrame(update);
  };

  requestAnimationFrame(update);
}

// Initialize stats animation
setupStatsAnimation();