index.js

// ==================================================
// Creating a responsive navbar
// ==================================================

  const mobile_nav = document.querySelector(".mobile-navbar-btn");
  const headerElem = document.querySelector(".header");

  mobile_nav.addEventListener("click", () => {

    headerElem.classList.toggle("active");

  });

  // ========================================
// sticky navigation
// ======================================== 

const heroSection = document.querySelector(".section-hero");

const observer = new IntersectionObserver(
    (entries) => {
        const ent = entries[0];
        console.log(ent);
        !ent.isIntersecting 
            ? document.body.classList.add("sticky")
            : document.body.classList.remove("sticky");
    },
     {
        // viewport
        root: null,
        threshold: 0,
        // rootMargin: "-100px",
    }
);

observer.observe(heroSection);


// ==================================================
// Creating a portfolio tabbed CompositionEvent
// ==================================================

 const p_btns = document.querySelector(".p-btns");
 const p_btn = document.querySelectorAll(".p-btn");
 const p_img_elem = document.querySelectorAll(".img-overlay");

 p_btns.addEventListener("click",(e)=>{
    const p_btn_clicked = e.target;
    console.log(p_btn_clicked);

    p_btn.forEach((curElem) => curElem.classList.remove("p-btn-active"));

    p_btn_clicked.classList.add("p-btn-active");

    //to find number in data attributes

    const btn_num = p_btn_clicked.dataset.btnNum;
    console.log(btn_num);

    const img_active = document.querySelectorAll(`.p-btn--${btn_num}`)

    p_img_elem.forEach((curElem) => curElem.classList.add("p-image-not-active"));

    img_active.forEach((curElem) => 
        curElem.classList.remove("p-image-not-active")
   );


 });


 // ==================================================
//              Scroll to top button section
// ==================================================

//without HTML

// const heroSection = document.querySelector(".section-hero");

const footerElem = document.querySelector(".section-footer");

const scroollElement = document.createElement("div");
scroollElement.classList.add("scrollTop-style");

scroollElement.innerHTML = `<ion-icon name="arrow-up-outline" class="scroll-top"></ion-icon>`;

footerElem.after(scroollElement);

const scrollTop =() =>{
   heroSection.scrollIntoView({behavior:"smooth"});
};

scroollElement.addEventListener("click",scrollTop);


 // ==================================================
//              Animated numbers
// ==================================================

const workSection = document.querySelector(".section-work-data");

const workSectionObserve = (entries) => {
    const [entry] = entries;
    if (!entry.isIntersecting) return;
    console.log(entries);


    const counterNum = document.querySelectorAll(".counter-number");
    // console.log(counterNum);
    const speed = 200;

    counterNum.forEach((curNumber) => {
        const updateNumber = () => {
            const targetNumber = parseInt(curNumber.dataset.number);
            // console.log(targetNumber);
            const initialNumber = parseInt(curNumber.innerText);
            // console.log(initialNumber);
            const incrementNumber = Math.trunc(targetNumber / speed);
            // i am adding the value to the main number
            // console.log(incrementNumber);

            if (initialNumber < targetNumber) {
                curNumber.innerText = `${initialNumber + incrementNumber}+`;
                setTimeout(updateNumber, 10);
            } else {
                curNumber.innerText = `${targetNumber}+`;
            }

        };
        updateNumber();
    });
};

const workSecObserver = new IntersectionObserver(workSectionObserve, {
    root: null,
    threshold: 0,
});

workSecObserver.observe(workSection);
 


// Dark-Light mode

var icon = document.getElementById('sun-moon');

icon.classList.add('sun');

icon.addEventListener('click', ()=>{
  document.body.classList.toggle('light')

  if(document.body.classList.contains('light')){
    icon.src="images/moon.png"
    icon.classList.remove('sun');
    icon.classList.add('margine');
  }
  else{
    icon.src="images/sun.png"
    icon.classList.add('sun');
    icon.classList.remove('margine');
  }
})