Add confetti explosion on correct message

CSS/main.css

@@ -1,6 +1,7 @@
 #container {
 margin: 100px auto;
 width: 680px;
+text-align: center;
 }
 body {
 font: 71%/1.5 Verdana, Sans-Serif;
@@ -18,7 +19,7 @@ border: 1px solid #f9f9f9;
 -webkit-border-radius: 5px;
 }
 #read {
-margin: 10px 0 5px;
+margin: 10px 0 -15px;
 padding: 15px;
 width: 648px;
 height: 200px;
@@ -30,6 +31,10 @@ overflow: hidden;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 white-space:inherit;
+text-align: left;
+}
+#confetti {
+  display: inline-block;
 }
 #read.incorrect {
   background-color: rgb(180,96,96) !important;
@@ -115,4 +120,4 @@ div .arrows{
 }
 .on {
 display: none;
-}
+}

JS/confetti.js

@@ -0,0 +1,97 @@
+const defaultColors = [
+  '#a864fd',
+  '#29cdff',
+  '#78ff44',
+  '#ff718d',
+  '#fdff6a'
+];
+
+function createElements(root, elementCount, colors) {
+  return Array
+    .from({ length: elementCount })
+    .map((_, index) => {
+      const element = document.createElement('div');
+      const color = colors[index % colors.length];
+      element.style['background-color']= color; // eslint-disable-line space-infix-ops
+      element.style.width = '10px';
+      element.style.height = '10px';
+      element.style.position = 'absolute';
+      root.appendChild(element);
+      return element;
+    });
+}
+
+function randomPhysics(angle, spread, startVelocity, random) {
+  const radAngle = angle * (Math.PI / 180);
+  const radSpread = spread * (Math.PI / 180);
+  return {
+    x: 0,
+    y: 0,
+    wobble: random() * 10,
+    velocity: (startVelocity * 0.5) + (random() * startVelocity),
+    angle2D: -radAngle + ((0.5 * radSpread) - (random() * radSpread)),
+    angle3D: -(Math.PI / 4) + (random() * (Math.PI / 2)),
+    tiltAngle: random() * Math.PI
+  };
+}
+
+function updateFetti(fetti, progress, decay) {
+  /* eslint-disable no-param-reassign */
+  fetti.physics.x += Math.cos(fetti.physics.angle2D) * fetti.physics.velocity;
+  fetti.physics.y += Math.sin(fetti.physics.angle2D) * fetti.physics.velocity;
+  fetti.physics.z += Math.sin(fetti.physics.angle3D) * fetti.physics.velocity;
+  fetti.physics.wobble += 0.1;
+  fetti.physics.velocity *= decay;
+  fetti.physics.y += 3;
+  fetti.physics.tiltAngle += 0.1;
+
+  const { x, y, tiltAngle, wobble } = fetti.physics;
+  const wobbleX = x + (10 * Math.cos(wobble));
+  const wobbleY = y + (10 * Math.sin(wobble));
+  const transform = `translate3d(${wobbleX}px, ${wobbleY}px, 0) rotate3d(1, 1, 1, ${tiltAngle}rad)`;
+
+  fetti.element.style.transform = transform;
+  fetti.element.style.opacity = 1 - progress;
+
+  /* eslint-enable */
+}
+
+function animate(root, fettis, decay) {
+  const totalTicks = 200;
+  let tick = 0;
+
+  function update() {
+    fettis.forEach((fetti) => updateFetti(fetti, tick / totalTicks, decay));
+
+    tick += 1;
+    if (tick < totalTicks) {
+      requestAnimationFrame(update);
+    } else {
+      fettis.forEach((fetti) => {
+        if (fetti.element.parentNode === root) {
+          return root.removeChild(fetti.element);
+        }
+      });
+    }
+  }
+
+  requestAnimationFrame(update);
+}
+
+function confetti(root, {
+    angle = 90,
+    decay = 0.9,
+    spread = 45,
+    startVelocity = 45,
+    elementCount = 50,
+    colors = defaultColors,
+    random = Math.random,
+  } = {}) {
+  const elements = createElements(root, elementCount, colors);
+  const fettis = elements.map((element) => ({
+    element,
+    physics: randomPhysics(angle, spread, startVelocity, random)
+  }));
+
+  animate(root, fettis, decay);
+}

JS/main.js

@@ -216,6 +216,7 @@ function onSuccess(){
   $("#textdiv").text("Correct Keys pressed!")
   clearPromptKeys();
   clearPressedKeys();
+  confetti($("#confetti").get(0), { spread: 180, startVelocity: 50, elementCount: 150 });
   setTimeout(nextQuestion, 1000);
 }
 

index.html

@@ -10,11 +10,15 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/1.0.0/typewriter.min.js"></script>
+	<script src="JS/confetti.js"></script>	
 	<script src="JS/main.js"></script>	
 <div id="container">
 	<!-- <button id="retryButton" type="button" onclick="retry();">Try Again</button>
 	<button id="nextButton" type="button" onclick="nextQuestion();">Next Shortcut</button> -->
-    <div id="read"><div id="textdiv"> </div></div>
+    <div id="read">
+      <div id="textdiv"></div>
+    </div>
+    <div id="confetti"></div>
     <ul id="keyboard">
 		<li class="esc" id="escape" data-keycode="27">esc</li>
 		<li class="special" id="f1" data-keycode="112">F1</li>