├── favicon.png ├── sounds ├── one-yay.mp3 ├── gasp-yay.mp3 ├── kids-yay.mp3 ├── audience-claps.mp3 └── dudes-clap-yay.mp3 ├── README.md ├── index.css ├── index.html └── index.js /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/favicon.png -------------------------------------------------------------------------------- /sounds/one-yay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/sounds/one-yay.mp3 -------------------------------------------------------------------------------- /sounds/gasp-yay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/sounds/gasp-yay.mp3 -------------------------------------------------------------------------------- /sounds/kids-yay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/sounds/kids-yay.mp3 -------------------------------------------------------------------------------- /sounds/audience-claps.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/sounds/audience-claps.mp3 -------------------------------------------------------------------------------- /sounds/dudes-clap-yay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ubershmekel/celebrate/HEAD/sounds/dudes-clap-yay.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Celebrate 2 | 3 | Go celebrate something with a party popper and cheers at https://ubershmekel.github.io/celebrate/ 4 | 5 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* 2 | Combo of: 3 | https://www.swyx.io/css-100-bytes/ 4 | https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b/20352949#20352949 5 | */ 6 | 7 | html { 8 | line-height: 1.75; 9 | font-size: 1.25em; 10 | } 11 | 12 | body { 13 | height:100vh; 14 | margin: auto; 15 | /* margin:0; */ 16 | max-width: 70ch; 17 | display:flex; 18 | flex-direction:column; 19 | } 20 | 21 | article { 22 | padding-left: 0.5em; 23 | } 24 | 25 | header{ 26 | min-height:50px; 27 | background:lightcyan; 28 | padding-left: 0.5em; 29 | border-bottom-left-radius: 10px; 30 | border-bottom-right-radius: 10px; 31 | } 32 | 33 | footer{ 34 | min-height:50px; 35 | background:PapayaWhip; 36 | border-top-left-radius: 10px; 37 | border-top-right-radius: 10px; 38 | text-align: center; 39 | margin-top:auto; 40 | } 41 | 42 | button { 43 | align-self: flex-start; 44 | box-shadow: 2px 2px 2px #faa; 45 | } 46 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Celebrate with a confetti party popper 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 |

Confetti Celebration

15 |

16 |

17 | 18 |

For that special occasion, click the button and get some gratification. CLICK THE BUTTON.

19 | 20 |

21 | 25 | 26 | 27 | 28 | 37 | 38 | 39 | 40 | 41 | 45 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // From https://www.kirilv.com/canvas-confetti/ 2 | function realisticConfetti() { 3 | var count = 200; 4 | var defaults = { 5 | origin: { 6 | x: 0.3 + Math.random() * 0.4, 7 | y: 0.7, 8 | }, 9 | angle: Math.random() * 20 + 80, 10 | resize: true, 11 | ticks: 700, // time to fade 12 | gravity: 0.9, 13 | }; 14 | 15 | function fire(particleRatio, opts) { 16 | confetti(Object.assign({}, defaults, opts, { 17 | particleCount: Math.floor(count * particleRatio) 18 | })); 19 | } 20 | 21 | fire(0.25, { 22 | spread: 26, 23 | startVelocity: 55, 24 | }); 25 | fire(0.2, { 26 | spread: 60, 27 | }); 28 | fire(0.35, { 29 | spread: 100, 30 | decay: 0.91, 31 | scalar: 0.8 32 | }); 33 | fire(0.1, { 34 | spread: 120, 35 | startVelocity: 25, 36 | decay: 0.92, 37 | scalar: 1.2 38 | }); 39 | fire(0.1, { 40 | spread: 120, 41 | startVelocity: 45, 42 | }); 43 | }; 44 | 45 | function celebrate() { 46 | playSound(); 47 | realisticConfetti(); 48 | } 49 | window.celebrate = celebrate; 50 | 51 | 52 | const files = ['audience-claps.mp3', 'dudes-clap-yay.mp3', 'gasp-yay.mp3', 'kids-yay.mp3', 'one-yay.mp3']; 53 | let soundsIndex = 0; 54 | 55 | function shuffleArray(array) { 56 | for (let i = array.length - 1; i > 0; i--) { 57 | const j = Math.floor(Math.random() * (i + 1)); 58 | [array[i], array[j]] = [array[j], array[i]]; 59 | } 60 | } 61 | 62 | function playSound() { 63 | if (soundsIndex >= files.length) { 64 | shuffleArray(files); 65 | soundsIndex = 0; 66 | } 67 | const filePath = files[soundsIndex]; 68 | soundsIndex++; 69 | var audio = new Audio('sounds/' + filePath); 70 | audio.playbackRate = 0.8 + 0.4 * Math.random(); // 0.8 - 1.2 speed 71 | audio.preservesPitch = false; 72 | audio.mozPreservesPitch = false; 73 | audio.webkitPreservesPitch = false; 74 | // For audio conferencing ease, make sure the celebration audio isn't too loud. 75 | audio.volume = 0.5; 76 | audio.play(); 77 | } 78 | 79 | --------------------------------------------------------------------------------