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');
  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';
                }
          }, 500); 
      }, index * 500); 
  });
});

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