👽🕋 Checkpoint

./confetti.js:7435365/2847
./script.js:7435365/4233
./index.html:7435365/336
./style.css:7435365/767

confetti.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).ConfettiGenerator=t()}(this,function(){"use strict";return function(e){var i={target:"confetti-holder",max:80,size:1,animate:!0,props:["circle","square","triangle","line"],colors:[[165,104,246],[230,61,135],[0,199,228],[253,214,126]],clock:25,interval:null,rotate:!1,width:window.innerWidth,height:window.innerHeight};e&&(e.target&&(i.target=e.target),e.max&&(i.max=e.max),e.size&&(i.size=e.size),null!=e.animate&&(i.animate=e.animate),e.props&&(i.props=e.props),e.colors&&(i.colors=e.colors),e.clock&&(i.clock=e.clock),e.width&&(i.width=e.width),e.height&&(i.height=e.height),null!=e.rotate&&(i.rotate=e.rotate));var t=document.getElementById(i.target),a=t.getContext("2d"),r=[];function o(e,t){e||(e=1);var r=Math.random()*e;return t?Math.floor(r):r}var n=i.props.reduce(function(e,t){return e+(t.weight||1)},0);function s(){var e=i.props[function(){for(var e=Math.random()*n,t=0;t<i.props.length;++t){var r=i.props[t].weight||1;if(e<r)return t;e-=r}}()];return{prop:e.type?e.type:e,x:o(i.width),y:o(i.height),src:e.src,radius:o(4)+1,size:e.size,rotate:i.rotate,line:Math.floor(o(65)-30),angles:[o(10,!0)+2,o(10,!0)+2,o(10,!0)+2,o(10,!0)+2],color:i.colors[o(i.colors.length,!0)],rotation:o(360,!0)*Math.PI/180,speed:o(i.clock/7)+i.clock/30}}function l(e){switch(a.fillStyle=a.strokeStyle="rgba("+e.color+", "+(3<e.radius?.8:.4)+")",a.beginPath(),e.prop){case"circle":a.moveTo(e.x,e.y),a.arc(e.x,e.y,e.radius*i.size,0,2*Math.PI,!0),a.fill();break;case"triangle":a.moveTo(e.x,e.y),a.lineTo(e.x+e.angles[0]*i.size,e.y+e.angles[1]*i.size),a.lineTo(e.x+e.angles[2]*i.size,e.y+e.angles[3]*i.size),a.closePath(),a.fill();break;case"line":a.moveTo(e.x,e.y),a.lineTo(e.x+e.line*i.size,e.y+5*e.radius),a.lineWidth=2*i.size,a.stroke();break;case"square":a.save(),a.translate(e.x+15,e.y+5),a.rotate(e.rotation),a.fillRect(-15*i.size,-5*i.size,15*i.size,5*i.size),a.restore();break;case"svg":a.save();var t=new Image;t.src=e.src;var r=e.size||15;a.translate(e.x+r/2,e.y+r/2),e.rotate&&a.rotate(e.rotation),a.drawImage(t,-r/2*i.size,-r/2*i.size,r*i.size,r*i.size),a.restore()}}return{render:function(){t.width=i.width,t.height=i.height,r=[];for(var e=0;e<i.max;e++)r.push(s());return requestAnimationFrame(function e(){for(var t in a.clearRect(0,0,i.width,i.height),r)l(r[t]);!function(){for(var e=0;e<i.max;e++){var t=r[e];i.animate&&(t.y+=t.speed),t.rotate&&(t.rotation+=t.speed/35),(0<=t.speed&&i.height<t.y||t.speed<0&&t.y<0)&&(r[e]=t,r[e].x=o(i.width,!0),r[e].y=t.speed<0?parseFloat(i.height):-10)}}(),i.animate&&requestAnimationFrame(e)})},clear:function(){i.animate=!1,clearInterval(i.interval),requestAnimationFrame(function(){a.clearRect(0,0,t.width,t.height);var e=t.width;t.width=1,t.width=e})}}}});

index.html

@@ -21,7 +21,9 @@
       <p id="isit"></p>
     </div>
 
-    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
+    <div class="glitchButton" style="position:fixed; top:1vw; right:1vw;"></div>
     <script src="https://button.glitch.me/button.js"></script>
+    
+    <a id="pilink" href="#">&pi;</a>
   </body>
 </html>

script.js

@@ -1,48 +1,49 @@
 var birthday = {
   now: null,
   day: 25,
-  month: 6,   // June
+  month: 6, // June
   match: false,
   check: function() {
     this.now = new Date();
-    if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month) this.activate()
+    if (this.now.getDate() == this.day && this.now.getMonth() + 1 == this.month)
-    else this.deactivate()
+      this.activate();
+    else this.deactivate();
   },
   activate: function() {
-    document.getElementById('isit').innerHTML = "Yes!"
+    document.getElementById("isit").innerHTML = "Yes!";
-    elementClass.remove(document.getElementById('isit'), 'nope')
+    elementClass.remove(document.getElementById("isit"), "nope");
-    elementClass.add(document.getElementById('isit'), 'yep')
+    elementClass.add(document.getElementById("isit"), "yep");
     confetti.render();
   },
   deactivate: function() {
-    document.getElementById('isit').innerHTML = "No"
+    document.getElementById("isit").innerHTML = "No";
-    elementClass.remove(document.getElementById('isit'), 'yep')
+    elementClass.remove(document.getElementById("isit"), "yep");
-    elementClass.add(document.getElementById('isit'), 'nope')
+    elementClass.add(document.getElementById("isit"), "nope");
 
     confetti.clear();
   }
-}
+};
 
 var confetti = {
   displayed: false,
   confetti: null,
-  target: 'confetti-holder',
+  target: "confetti-holder",
   max: null,
   size: 1,
   animate: true,
-  props: ['circle', 'square', 'triangle', 'line'],
+  props: ["circle", "square", "triangle", "line"],
-  colors: [[165,104,246], [230,61,135], [0,199,228], [253,214,126]],
+  colors: [[165, 104, 246], [230, 61, 135], [0, 199, 228], [253, 214, 126]],
   clock: 25,
   rotate: true,
   width: null,
   height: null,
   render: function() {
-    this.width = window.innerWidth
+    this.width = window.innerWidth;
-    this.height = window.innerHeight
+    this.height = window.innerHeight;
-    this.max = Math.floor(this.width * this.height / 1799.04)
+    this.max = Math.floor((this.width * this.height) / 1799.04);
     if (this.confetti) this.confetti.clear();
 
-    this.confetti = new ConfettiGenerator(this)
+    this.confetti = new ConfettiGenerator(this);
     this.confetti.render();
     this.displayed = true;
   },
@@ -52,31 +53,37 @@ var confetti = {
     this.confetti.clear();
     this.displayed = false;
   }
-}
+};
 
 var elementClass = {
   has: function(e, c) {
-    return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)'));
+    return !!e.className.match(new RegExp("(\\s|^)" + c + "(\\s|$)"));
   },
   add: function(e, c) {
-    if (!this.has(e,c)) e.className += " " + c;
+    if (!this.has(e, c)) e.className += " " + c;
   },
   remove: function(e, c) {
-    if (this.has(e,c)) {
+    if (this.has(e, c)) {
-      var r = new RegExp('(\\s|^)' + c + '(\\s|$)');
+      var r = new RegExp("(\\s|^)" + c + "(\\s|$)");
-      e.className=e.className.replace(r, ' ');
+      e.className = e.className.replace(r, " ");
     }
-  },
+  }
-}
+};
 
 window.onload = function() {
   birthday.check();
+  
+  document.getElementById('pilink')
 };
 
-window.addEventListener('resize', function() {
+window.addEventListener(
-  if (confetti.displayed) confetti.render();
+  "resize",
-}, false);
+  function() {
+    if (confetti.displayed) confetti.render();
+  },
+  false
+);
 
-window.setInterval(function(){
+window.setInterval(function() {
   birthday.check();
-}, 5000);
+}, 5000);

style.css

@@ -31,6 +31,23 @@ body {
   font-size: 16vw;
 }
 
+#pilink {
+  position: fixed;
+  bottom: 1vw;
+  right: 1vw;
+  font-family: 'Times New Roman', serif;
+  font-size: 1.2vw;
+}
+
+#pilink a {
+  text-decoration: none;
+  color: #6e7f80;
+}
+
+#pilink a:hover {
+  color: #FF0000;
+}
+
 p.nope {
   color: #888888;
 }