From f72a71927b89a0455414d48da5211df07051bfca Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Sat, 15 Jul 2017 22:50:21 +0200
Subject: Create season 3 countdown random project

---
 random-projects/season3-countdown/index.html | 26 +++++++++++
 random-projects/season3-countdown/script.js  | 58 +++++++++++++++++++++++
 random-projects/season3-countdown/style.scss | 70 ++++++++++++++++++++++++++++
 3 files changed, 154 insertions(+)
 create mode 100644 random-projects/season3-countdown/index.html
 create mode 100644 random-projects/season3-countdown/script.js
 create mode 100644 random-projects/season3-countdown/style.scss

(limited to 'random-projects/season3-countdown')

diff --git a/random-projects/season3-countdown/index.html b/random-projects/season3-countdown/index.html
new file mode 100644
index 0000000..d9f8c84
--- /dev/null
+++ b/random-projects/season3-countdown/index.html
@@ -0,0 +1,26 @@
+---
+layout: random-project
+info:
+  title: Season 3 Countdown
+  description: I'M PICKLE RICK!!!
+  image: https://noahloomans.com/random-projects/bad-password-generator/image.png
+branding: false
+---
+<main class='random-project__project__season3-countdown'>
+  <div id="youtube-background" style="curso"></div>
+
+  <div class="container">
+    <div class="text">
+      <p>Season 3 will air in:</p>
+    </div>
+    <div class="countdown">
+      <span id="days"></span>d <span id="hours"></span>h <span id="minutes"></span>m <span id="seconds"></span>s <span id="milliseconds"></span>
+    </div>
+  </div>
+
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" charset="utf-8"></script>
+  <script src="./script.js" charset="utf-8"></script>
+
+  <script async src="https://www.youtube.com/iframe_api"></script>
+</main>
diff --git a/random-projects/season3-countdown/script.js b/random-projects/season3-countdown/script.js
new file mode 100644
index 0000000..203bbd0
--- /dev/null
+++ b/random-projects/season3-countdown/script.js
@@ -0,0 +1,58 @@
+// var EVENT_TIME = 1501471800
+var EVENT_TIME = 1501471800000
+var NODES = {
+  VIDEO: document.querySelector('.background-video'),
+  DAYS: document.querySelector('#days'),
+  HOURS: document.querySelector('#hours'),
+  MINUTES: document.querySelector('#minutes'),
+  SECONDS: document.querySelector('#seconds'),
+  MILLISECONDS: document.querySelector('#milliseconds')
+}
+
+function format (number, length) {
+  var string = number.toString()
+  while (length > string.length) {
+    string = '0' + string
+  }
+  return string
+}
+
+window.setInterval(function () {
+  var timeDiff = EVENT_TIME - new Date().getTime()
+  duration = moment.duration(timeDiff, 'milliseconds')
+  NODES.DAYS.innerText = format(duration.days(), 2)
+  NODES.HOURS.innerText = format(duration.hours(), 2)
+  NODES.MINUTES.innerText = format(duration.minutes(), 2)
+  NODES.SECONDS.innerText = format(duration.seconds(), 2)
+  NODES.MILLISECONDS.innerText = format(duration.milliseconds(), 3)
+}, 1);
+
+function onYouTubeIframeAPIReady () {
+  var player = new YT.Player('youtube-background', {
+    videoId: 'DeAw6aXHzcY',
+    width: 1080,
+    height: 1920,
+    playerVars: {
+      autoplay: 1,
+      controls: 0,
+      showinfo: 0,
+      modestbranding: 1,
+      loop: 1,
+      fs: 0,
+      cc_load_policy: 0,
+      iv_load_policy: 3,
+      autohide: 0
+    },
+    events: {
+      onReady: function(e) {
+        e.target.mute();
+      },
+      onStateChange: function(e) {
+        console.log('video ended')
+        if (e.data === YT.PlayerState.ENDED) {
+          player.playVideo();
+        }
+      }
+    }
+  });
+}
diff --git a/random-projects/season3-countdown/style.scss b/random-projects/season3-countdown/style.scss
new file mode 100644
index 0000000..d0b445f
--- /dev/null
+++ b/random-projects/season3-countdown/style.scss
@@ -0,0 +1,70 @@
+.random-project__project__season3-countdown {
+  #youtube-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+
+    pointer-events: none;
+
+    z-index: -1;
+  }
+
+  .container {
+    color: white;
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 1em;
+  }
+
+  .text {
+    font-size: 4em;
+    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+  }
+
+  .countdown {
+    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
+    font-size: 4em;
+
+    span {
+      font-size: 3em;
+    }
+  }
+}
+
+@media screen and (max-width: 1600px) {
+  .random-project__project__season3-countdown {
+    .container {
+      font-size: 0.5em;
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .random-project__project__season3-countdown {
+    .container {
+      font-size: 0.4em;
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .random-project__project__season3-countdown {
+    .container {
+      font-size: 0.3em;
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .random-project__project__season3-countdown {
+    .container {
+      font-size: 0.2em;
+    }
+  }
+}
-- 
cgit v1.1