User:Ugochimobi/celebration.js

importStylesheet('User:Ugochimobi/celebration.css'); const ribbonNumber = 68 function celebrate { $('#celebration-gratisdatacomplete').show.delay(2000).fadeOut(500, function{			$(".ribbon").remove		}); for(i=0; i<ribbonNumber; i++) { // Random rotation var randomRotation = Math.floor(Math.random * 360); // Random Scale var randomScale = Math.random * 1; // Random width & height between 0 and viewport var randomWidth = Math.floor(Math.random * Math.max(document.documentElement.clientWidth, window.innerWidth || 0)); var randomHeight = Math.floor(Math.random * Math.max(document.documentElement.clientHeight, window.innerHeight || 500)); // Random animation-delay var randomAnimationDelay = Math.floor(Math.random * 15); // Random colors var colors = ['#0CD977', '#FF1C1C', '#FF93DE', '#5767ED', '#FFC61C', '#8497B0'] var randomColor = colors[Math.floor(Math.random * colors.length)]; // Create ribbon piece var ribbon = document.createElement('div'); ribbon.className = 'ribbon'; ribbon.style.top=randomHeight + 'px'; ribbon.style.right=randomWidth + 'px'; ribbon.style.backgroundColor=randomColor; ribbon.style.opacity = 0; ribbon.style.width = "1rem"; ribbon.style.height = "1.5rem"; ribbon.style.position = "absolute"; ribbon.style.obacity=randomScale; ribbon.style.transform='skew(15deg) rotate(' + randomRotation + 'deg)'; ribbon.style.animationDelay=randomAnimationDelay + 's'; ribbon.style.transition = "all .5s ease-in" ribbon.style.animation = "ribbonRain 5s"; ribbon.style.animationIterationCount = 1; ribbon.style.animationFillMode = "forwards"; document.getElementById("celebration-wrapper").appendChild(ribbon); }	} $(document).ready(function{	$("body").append(' \ \					 ')    // TODO: create celebration.css for all styles.	$("#celebration-gratisdatacomplete").css({ "position": "fixed", "top": "0", "right": "0", "bottom": "0", "left": "0", "display": "flex", "display": "none", "justify-content": "center", "align-items": "center", "height": "100vh", })	$("#celebration-wrapper").css({ "overflow": "hidden !important" }) })