index.html

<!DOCTYPE html>
<html>  
  <link rel="shortcut icon" href="https://i.imgur.com/ewa2N7p.png" title="Favicon" >
  <link type="text/css" id="dark-mode" rel="stylesheet" href="style.css">
  <style type="text/css" id="dark-mode-custom-style"></style>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Confetti Animation</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&amp;subset=latin,latin-ext" rel="stylesheet" type="text/css">
  </head>
  <body>
      <div class="main">
        <div class="card">
          <div class="header">
            <h1>Confetti Animation</h1>
          </div>
          <div class="body">
            <p>This page was made to show how to create confetti falling animation using HTML, CSS, and JavaScript.</p>
            <p>
              <a id="back-link" href="https://sandarutharuneth.com" marked="1">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                  <path fill="#007067" d="M11.9998836,4.09370803 L8.55809517,7.43294953 C8.23531459,7.74611298 8.23531459,8.25388736 8.55809517,8.56693769 L12,11.9062921 L9.84187871,14 L4.24208544,8.56693751 C3.91930485,8.25388719 3.91930485,7.74611281 4.24208544,7.43294936 L9.84199531,2 L11.9998836,4.09370803 Z"></path>
                </svg>
                sandarutharuneth.com
              </a>
            </p>
            <hr>
            <p>If you find this helpful, please do concider hitting a ⭐️ to the reposatory</p>
            <h6>©️ Sandaru Tharuneth</h6>
          </div>
        </div>
      </div>
      <script src="confetti.js"></script>
      <script>
        const start = () => {
            setTimeout(function() {
                confetti.start()
            }, 1000); // 1000 is time that after 1 second start the confetti ( 1000 = 1 sec)
        };

        //  for stopping the confetti 

        const stop = () => {
            setTimeout(function() {
                confetti.stop()
            }, 30000); // 5000 is time that after 5 second stop the confetti ( 5000 = 5 sec)
        };
        start();
        stop();
      </script>
  </body>  
</html>