From e44cd7b3ad1996bcef76e0475d5b2df03324025d Mon Sep 17 00:00:00 2001 From: "Glitch (hello-webpage)" Date: Sun, 6 Oct 2019 19:02:50 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=81=F0=9F=90=9B=20Checkpoint=20./index?= =?UTF-8?q?.html:7435365/1848=20./style.css:7435365/834=20./script.js:7435?= =?UTF-8?q?365/2247?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 31 ++++++++++--------- script.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++----- style.css | 46 ++++++++++++++++++++++++----- 3 files changed, 134 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index f35f491..f0ec590 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,22 @@ - - - - - - - - - -

Hi there!

- -

- I'm your cool new webpage. Made with Glitch! -

- + + + + + + + + + + + +
+

+
+
diff --git a/script.js b/script.js index 90a69f7..e7eea22 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,82 @@ -/* If you're feeling fancy you can add interactivity - to your site with Javascript */ +var birthday = { + now: null, + day: 25, + 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() + else this.deactivate() + }, + activate: function() { + document.getElementById('isit').innerHTML = "Yes!" + elementClass.remove(document.getElementById('isit'), 'nope') + elementClass.add(document.getElementById('isit'), 'yep') + confetti.render(); + }, + deactivate: function() { + document.getElementById('isit').innerHTML = "No" + elementClass.remove(document.getElementById('isit'), 'yep') + elementClass.add(document.getElementById('isit'), 'nope') -// prints "hi" in the browser's dev tools console -console.log("hi"); + confetti.clear(); + } +} -$(function() { - alert('Hello, world!') -}) \ No newline at end of file +var confetti = { + displayed: false, + confetti: null, + target: 'confetti-holder', + max: null, + size: 1, + animate: true, + props: ['circle', 'square', 'triangle', 'line'], + 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.height = window.innerHeight + this.max = Math.floor(this.width * this.height / 1799.04) + if (this.confetti) this.confetti.clear(); + + this.confetti = new ConfettiGenerator(this) + this.confetti.render(); + this.displayed = true; + }, + clear: function() { + if (!this.displayed) return; + + this.confetti.clear(); + this.displayed = false; + } +} + +var elementClass = { + has: function(e, c) { + return !!e.className.match(new RegExp('(\\s|^)' + c + '(\\s|$)')); + }, + add: function(e, c) { + if (!this.has(e,c)) e.className += " " + c; + }, + remove: function(e, c) { + if (this.has(e,c)) { + var r = new RegExp('(\\s|^)' + c + '(\\s|$)'); + e.className=e.className.replace(r, ' '); + } + }, +} + +window.onload = function() { + birthday.check(); +}; + +window.addEventListener('resize', function() { + if (confetti.displayed) confetti.render(); +}, false); + +window.setInterval(function(){ + birthday.check(); +}, 5000); diff --git a/style.css b/style.css index ea0844a..68d1d15 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,43 @@ -/* CSS files add styling rules to your content */ - +html, body { - font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif; - margin: 2em; + width: 100%; + height: 100%; + margin: 0; + background-color: #fff; } -h1 { - font-style: italic; - color: #373fff; +#confetti { + position: fixed; + top:0; + left: 0; + z-index: 1; } + +#container { + position: fixed; + top: 0; + width: 100%; + height: 100%; +} + +#container p { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + padding: 1vw; + font-family: 'Kanit', sans-serif; + font-size: 16vw; +} + +p.nope { + color: #888888; +} + +p.yep { + background-image: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red); + background-clip: text; + -webkit-background-clip: text; + color: transparent; +} \ No newline at end of file