I would like to display a confetti when i click on the stop button. How do i display a confetti on the whole page when i click on stop button

Question

I would like to display a confetti when i click on the stop button. How do i display a confetti on the whole page when i click on stop button.

The confetti should cover the whole page and must stop after some seconds

<script>
    const title = ['233594600123', '233551209799', '233207082341', '233243947954', '233247524779', '233244016344', '233243269122', '233242571672', '233552232442', '233553301458', '233552321132', '233507755919', '233243415919', '233202252548', '233246190260', '233245353528', '233544109090', '233246395617', '233594070244', '233244017403', '233244608668', '233559264705', '233204444480', '233241257967', '233591233440'];
    let winner; //Declare your global winner variable
    let animate; //Declare your global animate variable
    start(); //Start your animate interval
    
    function start() {
      let i = 0; //Why you're using var? i think you're using ES6. Use let
      winner = title[13]; // get winner (index 13) on every start
    
      animate = setInterval(function() { //Set your global interval
        document
          .getElementById('fruit')
          .innerHTML = title[i++];
        if (i === title.length) i = 0; //Please use === instead of ==
      }, 15);
    }
    
    function stop() {
      clearInterval(animate); //Clear your global interval
      document
        .getElementById('fruit')
        .innerHTML = winner;    
      title.splice(13, 1); //Remove winning item by index from your title array
    }
    </script> 
    
    <div class="row">
      
      <div class="column">
        <img src="car.jpg" alt="snow" style="width:100%">
      </div>
      <div class="column">
        <img src="fans.jpg" alt="Forest" style="width:100%">
      </div>
      <div class="column">
        <img src="carr.jpg" alt="Mountains" style="width:100%">
      </div>
    </div><br></br>
    <h1>THE WINNER IS : </h1>
    <h1><span id="fruit"></span></h1>
    
    <div class="right"><button onclick="stop()" class="button">STOP</button></div>
    <div class="left"><button onclick="start()" class="but">START</button></div>

Below are the codes for the confetti, i need to show this when the stop button is clicked.

.wrapper
  - var i = 149
  while i > -1
    div(class="confetti-"+i)
    - i--

body {
  margin: 0;
  overflow: hidden;
}

.wrapper {
  position: relative;
  min-height: 100vh;
}

[class|="confetti"] {
  position: absolute;
}

$colors: (#d13447, #ffbf00, #263672);

@for $i from 0 through 150 {
  $w: random(8);
  $l: random(100);
  .confetti-#{$i} {
    width: #{$w}px;
    height: #{$w*0.4}px;
    background-color: nth($colors, random(3));
    top: -10%;
    left: unquote($l+"%");
    opacity: random() + 0.5;
    transform: rotate(#{random()*360}deg);
    animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s") infinite;
  }

  @keyframes drop-#{$i} {
    100% {
      top: 110%;
      left: unquote($l+random(15)+"%");
    }
  }
}

Answer 1

There are a lot of ways of displaying confetti on a whole page.

You could use this Codepen code see below.

https://codepen.io/celli/pen/OPMqPV

You can play with the colors on line #6 of JS code.

Does that answer your question?

 (function () { var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos; NUM_CONFETTI = 350; COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]]; PI_2 = 2 * Math.PI; canvas = document.getElementById("world"); context = canvas.getContext("2d"); window.w = 0; window.h = 0; resizeWindow = function () { window.w = canvas.width = window.innerWidth; return window.h = canvas.height = window.innerHeight; }; window.addEventListener('resize', resizeWindow, false); window.onload = function () { return setTimeout(resizeWindow, 0); }; range = function (a, b) { return (b - a) * Math.random() + a; }; drawCircle = function (x, y, r, style) { context.beginPath(); context.arc(x, y, r, 0, PI_2, false); context.fillStyle = style; return context.fill(); }; xpos = 0.5; document.onmousemove = function (e) { return xpos = e.pageX / w; }; window.requestAnimationFrame = function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 1000 / 60); }; }(); Confetti = class Confetti { constructor() { this.style = COLORS[~~range(0, 5)]; this.rgb = `rgba(${this.style[0]},${this.style[1]},${this.style[2]}`; this.r = ~~range(2, 6); this.r2 = 2 * this.r; this.replace(); } replace() { this.opacity = 0; this.dop = 0.03 * range(1, 4); this.x = range(-this.r2, w - this.r2); this.y = range(-20, h - this.r2); this.xmax = w - this.r; this.ymax = h - this.r; this.vx = range(0, 2) + 8 * xpos - 5; return this.vy = 0.7 * this.r + range(-1, 1); } draw() { var ref; this.x += this.vx; this.y += this.vy; this.opacity += this.dop; if (this.opacity > 1) { this.opacity = 1; this.dop *= -1; } if (this.opacity < 0 || this.y > this.ymax) { this.replace(); } if (!(0 < (ref = this.x) && ref < this.xmax)) { this.x = (this.x + this.xmax) % this.xmax; } return drawCircle(~~this.x, ~~this.y, this.r, `${this.rgb},${this.opacity})`); }}; confetti = function () { var j, ref, results; results = []; for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) { results.push(new Confetti()); } return results; }(); window.step = function () { var c, j, len, results; requestAnimationFrame(step); context.clearRect(0, 0, w, h); results = []; for (j = 0, len = confetti.length; j < len; j++) { c = confetti[j]; results.push(c.draw()); } return results; }; step(); }).call(this); //# sourceURL=coffeescript

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }

 <canvas id="world"></canvas>