HTMLify

// document.getElementById('btn').addEventListener('click', () => {
//     const boxes = document.querySelectorAll('.box'); 
//     const beepSound = document.getElementById('beepSound');

//     boxes.forEach((box, index) => {
//       setTimeout(() => {
//         box.style.transition = 'opacity 0.8s ease-out'; 
//         box.style.opacity = '0'; 
//         beepSound.currentTime = 0; 
//         beepSound.play(); 
//         setTimeout(() => {
//           box.style.display = 'none';            
         
          
//         }, 800); 
//       }, index * 1000); 
//     });
//   });
document.getElementById('btn').addEventListener('click', () => {
  const boxes = document.querySelectorAll('.box'); 
  const container = document.querySelector('.container');
  const section = document.querySelector('.section');
  const body = document.querySelector('.body');
  boxes.forEach((box, index) => {
      setTimeout(() => {
          box.style.transition = 'opacity 0.8s ease-out'; 
          box.style.opacity = '0'; 
          setTimeout(() => {
                box.style.display = 'none'; 
                const allBoxesHidden = Array.from(boxes).every(b => b.style.display === 'none');
                if (allBoxesHidden) {
                    section.style.display = 'none';
                    container.style.display = 'block';
                    body.style.display = 'block';
                    // body.style.padding = '10px';
                }
          }, 500); 
      }, index * 500); 
  });
});

// document.getElementById('btn').addEventListener('click', () => {
//     const boxes = document.querySelectorAll('.box'); 
//     boxes.forEach((box, index) => {
//       setTimeout(() => {
//         box.style.display = 'none'; 
//       }, index *500); 
//     });
//   });

var typed = new Typed(".auto-type",{
  strings: ["Web Developer", "Programmer", "Android Developer", "Backend Developer (Php)"],
  typeSpeed :150,
  backSpeed : 150,
  loop : true,
})

document.getElementById('sun').addEventListener('click', () => {
  const sun = document.querySelector('.sun'); 
  const moon = document.querySelector('.moon'); 
  const body = document.querySelector('.body'); 
  const h1 = document.querySelector('.change'); 
  const p = document.querySelector('.p');

  sun.style.display = 'none';
  moon.style.display = 'block';
  body.style.backgroundColor = 'white';
  h1.style.color = 'black';
  var image = document.getElementById("img4");
  p.style.color = 'black';

  if (image.src.includes("flask.png")) {
    image.src = "images/flaskp1.png"; 
} else {
    image.src = "flask.png"; 
}
});

document.getElementById('moon').addEventListener('click', () => {
  const sun = document.querySelector('.sun'); 
  const moon = document.querySelector('.moon'); 
  const body = document.querySelector('.body'); 
  const h1 = document.querySelector('.change'); 
  var image = document.getElementById("img4");
  const p = document.querySelector('.p');

  sun.style.display = 'block';
  moon.style.display = 'none';
  body.style.backgroundColor = 'black';
  h1.style.color = 'white';
  p.style.color = 'white';

  if (image.src.includes("flaskp1.png")) {
      image.src = "images/flask.png"; 
  } else {
      image.src = "flaskp1.png"; 
  }
});
document.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.img img'); // Sabhi images ko select karo
  const boxImages = document.querySelectorAll('[id^="boximg"]'); // Sabhi `boximg` elements ko select karo

  images.forEach(img => {
      img.addEventListener('click', (event) => {
          // Sabhi box images ko hide karna
          boxImages.forEach(box => {
              box.style.display = "none";
          });

          // Click ki gayi image ka corresponding box dikhana
          const targetBox = document.getElementById(`boximg${img.id.replace('img', '')}`);
          if (targetBox) {
              targetBox.style.display = "flex";
          }

          event.stopPropagation(); // Event bubbling rokne ke liye
      });
  });

  // Agar page ke kisi bhi aur jagah click hota hai to sabhi box images hide ho jayenge
  document.addEventListener('click', () => {
      boxImages.forEach(box => {
          box.style.display = "none";
      });
  });

  // Box par click hone par vo hide na ho
  boxImages.forEach(box => {
      box.addEventListener('click', (event) => {
          event.stopPropagation();
      });
  });
});