From 6f9c88023b7df23521124b26111a26a50db01469 Mon Sep 17 00:00:00 2001
From: Hunter Rancourt <hunter.rancourt@gmail.com>
Date: Tue, 30 Oct 2018 08:16:54 -0500
Subject: [PATCH] added hacktoberfest 2018 countdown timer

---
 contributors.html | 44 +++++++++++++-------------
 skwid138.html     | 80 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 22 deletions(-)
 create mode 100644 skwid138.html

diff --git a/contributors.html b/contributors.html
index b6b5a507a..f011cccbc 100755
--- a/contributors.html
+++ b/contributors.html
@@ -104,7 +104,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
       <p class="animated rubberBand delay-4s">Add yourself to the list if you contribute.</p>
       <div class="box mx-auto">
         <!-- Add to the bottom of the list -->
-	      <a class="box-item" href="https://github.com/Pull-eckermann">Erick Eckermann Cardoso</a>
+		<a class="box-item" href="https://github.com/Pull-eckermann">Erick Eckermann Cardoso</a>
         <a class="box-item" href="https://github.com/Pull-eckermann">Erick Eckermann Cardoso</a>
         <a class="box-item" href="https://github.com/qnoox">Qnoox</a>
         <a class="box-item" href="https://github.com/SarthakSri98">Sarthak Srivastava</a>
@@ -113,8 +113,6 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/UmarAslamNawab">Umar Aslam Nawab</a>
         <a class="box-item" href="https://github.com/MarufurRahman">Marufur Rahman</a>
         <a class="box-item" href="https://github.com/sanvishal">TK Vishal</a>
-
-        
         <a class="box-item" href="https://github.com/mateossh">Mateusz Ż</a>
         <a class="box-item" href="https://github.com/philson-philip">Philson Philip</a>
         <a class="box-item" href="https://github.com/sifat009">Sifat Haque</a>
@@ -122,7 +120,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/AnchalJain">Anchal Jain</a>
         <a class="box-item" href="https://github.com/Bumsquest">Shubham Shirpurkar</a>
         <a class="box-item" href="https://github.com/subhahu123">Subhahu jain</a>
-	<a class="box-item" href="https://github.com/raspals">Raspal Seni</a>
+		<a class="box-item" href="https://github.com/raspals">Raspal Seni</a>
         <a class="box-item" href="https://github.com/Rockleeland">Leeland Clenista</a>
         <a class="box-item" href="https://github.com/chamow97">Chandramowli J</a>
         <a class="box-item" href="https://github.com/kosijer">Nebojša Kosijer</a>
@@ -371,8 +369,8 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/vmp">Vadim Pashaev</a>
         <a class="box-item" href="https://github.com/akoopraba4">Akshaya</a>
         <a class="box item" href="https://github.com/edwardallanpoe">Edward Matyja</a>
-	      <a class="box item" href ="https://github.com/mewcifur28">Ishita Gambhir</a>
-	      <a class="box-item" href="https://github.com/qasimwarraich">Qas</a>
+		<a class="box item" href ="https://github.com/mewcifur28">Ishita Gambhir</a>
+		<a class="box-item" href="https://github.com/qasimwarraich">Qas</a>
       	<a class="box-item" href="https://github.com/monkfromearth">Sameer Khan</a>
         <a class="box-item" href="https://github.com/chiffonsigh">Chiffonsigh</a>
         <a class="box-item" href="https://github.com/tusharjain8">Tushar Jain</a>
@@ -384,7 +382,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/katrinasilver">Katrina Agustin</a>
         <a class="box-item" href="https://github.com/sudouser89">Pavan kumar</a>
         <a class="box-item" href="https://github.com/AlexanderMalmstrom">Alexander Malmström</a>
-    	  <a class="box-item" href="https://github.com/BunditSpace">Bundit Wisedphanit</a>
+		<a class="box-item" href="https://github.com/BunditSpace">Bundit Wisedphanit</a>
         <a class="box-item" href="https://github.com/AndiAlmer">Andreas Almér</a>
         <a class="box-item" href="https://github.com/msarsha">Matan Sar-Shalom</a>
         <a class="box-item" href="https://github.com/ferch5003">Fernando Visbal</a>
@@ -418,7 +416,7 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/roninmittal">Ronin Mittal</a>
         <a class="box-item" href="https://github.com/mlandefeld">mlandefeld</a>
         <a class="box-item" href="https://github.com/viddeliten">Johanna Julén</a>
-    	  <a class="box-item" href="https://github.com/GCA">Giancarlo</a>
+		<a class="box-item" href="https://github.com/GCA">Giancarlo</a>
         <a class="box-item" href="https://github.com/fernandohf">Fernando Henrique</a>
       	<a class="box-item" href="https://github.com/cthare">Colin Hare</a>
         <a class="box-item" href="https://github.com/ashwin747">Ashwin P</a>
@@ -426,14 +424,14 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/biswaroop1547">Biswaroop Bhattacharjee</a>
         <a class="box-item" href="https://github.com/Trapsta">Trapsta</a>
         <a class="box-item" href="https://github.com/carriekolmer">Carrie Kolmer</a>
-	      <a class="box-item" href="https://github.com/Zaryn">Annie Wilson</a>
+		<a class="box-item" href="https://github.com/Zaryn">Annie Wilson</a>
         <a class="box-item" href="https://github.com/DevIvanVarela">Ivan Varela</a>
         <a class="box-item" href="https://github.com/huangjenny">Jenny Huang</a>
         <a class="box-item" href="https://github.com/misterdabu">Dilan David</a>
-	      <a class="box-item" href="https://github.com/lassestilvang">Lasse Stilvang</a>
+		<a class="box-item" href="https://github.com/lassestilvang">Lasse Stilvang</a>
         <a class="box-item" href="https://github.com/AdamWier">Adam Wier</a>
         <a class="box-item" href="https://github.com/anandagaguiar"> Ananda Aguiar </a>
-    		<a class="box-item" href="https://github.com/biswaroop1547">Biswaroop Bhattacharjee</a>
+		<a class="box-item" href="https://github.com/biswaroop1547">Biswaroop Bhattacharjee</a>
         <a class="box-item" href="https://github.com/kevinhuddy">Kevin Huddy</a>
         <a class="box-item" href="https://github.com/guitarz777">Jared Craig</a>
       	<a class="box-item" href="https://github.com/devgoyal04">Dev Goyal</a>
@@ -454,24 +452,25 @@ <h1 class="animated rubberBand delay-4s">Contributors</h1>
         <a class="box-item" href="https://github.com/codingfanatic">Richard Clarke</a>
         <a class="box-item different-color" href="https://github.com/fidellim">Fidel Lim</a>
         <a class="box-item different-color" href="https://github.com/afmilan23">Alfred Milan</a>
-		    <a class="box-item" href="https://github.com/Tanis-02">Elizabeth Gonzalez</a>
+		<a class="box-item" href="https://github.com/Tanis-02">Elizabeth Gonzalez</a>
         <a class="box-item" href="https://github.com/armanbinmahmud>">Arman Bin Mahmud</a>
-		    <a class="box-item different-color" href="https://github.com/marcelabomfim">Marcela Bomfim</a>
+		<a class="box-item different-color" href="https://github.com/marcelabomfim">Marcela Bomfim</a>
         <a class="box-item" href="https://github.com/ja1felipe">ja1felipe</a>
-		    <a class="box-item" href="https://github.com/giannagco">Gianna Cortes</a>
-		    <a class="box-item" href="https://github.com/mhaider110">Mohd Haider</a>
+		<a class="box-item" href="https://github.com/giannagco">Gianna Cortes</a>
+		<a class="box-item" href="https://github.com/mhaider110">Mohd Haider</a>
         <a class="box-item" href="https://github.com/giannagco">Gianna Cortes</a>
         <a class="box-item" href="https://github.com/dydeepak97">Deepak Yadav</a>
         <a class="box-item" href="https://github.com/AldinKajmovic">Aldin Kajmovic</a>
         <a class="box-item" href="https://github.com/Uniiquee">Uniiquee</a>
         <a class="box-item" href="https://github.com/bobprinceraj">Robert Johnk</a>
         <a class="box-item" href="https://github.com/zaneh">Zane Helton</a>
-	      <a class="box-item" href="https://github.com/lstravers">Lori</a>
+		<a class="box-item" href="https://github.com/lstravers">Lori</a>
         <a class="box-item" href="https://github.com/x41h">x41h</a>
-	      <a class="box-item" href="https://github.com/dduleone">Dan DuLeone</a>      
+		<a class="box-item" href="https://github.com/dduleone">Dan DuLeone</a>
       	<a class="box-item" href="https://github.com/Petar-np">Petar</a>
-  <a class="box-item" href="https://github.com/Rexben001">Rex Ben</a>
-  <a class="box-item" href="https://github.com/sufiaalmas">Sufia Almas</a>
+		<a class="box-item" href="https://github.com/Rexben001">Rex Ben</a>
+		<a class="box-item" href="https://github.com/sufiaalmas">Sufia Almas</a>
+		<a class="box-item" href="https://github.com/skwid138">Hunter Rancourt</a>
         <!--
         Add here
         format : <a class="box-item" href="https://github.com/<your-username>">Your Name</a>
@@ -485,6 +484,7 @@ <h3 class="mb-5">Check available pages</h3>
       </div>
       <div class="col-lg-12 mx-auto text-center">
           <ul style="padding: 0; list-style: none; columns: 3; -webkit-columns: 3; -moz-columns: 3;">
+		  	  <li><a href="skwid138.html">Hacktoberfest 2018 Countdown</a></li>
               <li><a href="ChooseYourNumber.html">Choose Your Number</a></li>
               <li><a href="cmatrix.html">C Matrix</a></li>
               <li><a href="colorgame.html">colorgame</a></li>
@@ -509,7 +509,7 @@ <h3 class="mb-5">Check available pages</h3>
               <li><a href="potato.html">potato</a></li>
               <li><a href="snek.html">snek</a></li>
               <li><a href="spooky.html">spooky</a></li>
-	            <li><a href="timeline.html">Timeline</a></li>
+			  <li><a href="timeline.html">Timeline</a></li>
               <li><a href="tools.html">tools</a></li>
               <li><a href="trylearnhowtoprogram.html">trylearnhowtoprogram</a></li>
               <li><a href="turndown.html">Turndown</a></li>
@@ -517,7 +517,7 @@ <h3 class="mb-5">Check available pages</h3>
               <li><a href="helloGLSL.html">WebGL HELLO</a></li>
               <li><a href="funPlus.html">Fun + Helloween</a></li>
               <li><a href="etchfun.html">Etch Fun</a></li>
-	            <li><a href="timeline.html">Timeline</a></li>
+			  <li><a href="timeline.html">Timeline</a></li>
               <li><a href="conditional-events.html">Conditional Events</a></li>
               <li><a href="cmatrix.html">C Matrix</a></li>
               <li><a href="hello.html">Hello</a></li>
@@ -526,7 +526,7 @@ <h3 class="mb-5">Check available pages</h3>
               <li><a href="ChooseYourNumber.html">Choose Your Number</a></li>
               <li><a href="campsongs.html">Camp Song Lyrics</a></li>
               <li><a href="firstsite.html">First Site</a></li>
-			        <li><a href="lunar.html">salvation</a></li>
+			  <li><a href="lunar.html">salvation</a></li>
               <li><a href="helloworld.html">helloworld</a></li>
               <li><a href="zane.html">Plug Talk</a></li>
               <li><a href="helloGitHub.html">Hello GitHub!</a></li>
diff --git a/skwid138.html b/skwid138.html
new file mode 100644
index 000000000..fbe680e28
--- /dev/null
+++ b/skwid138.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Hacktoberfest 2018 Countdown</title>
+	<style>
+		body {
+			background: #f77d03;
+  			text-align: center;
+		}
+
+		h1 {
+			font-size: 3.5rem;
+			text-align: center;
+			margin-bottom: 0;
+		}
+
+		h6 {
+			margin-top: 0;
+		}
+
+		#container {
+			width: 100%;
+			height: auto;
+		}
+
+		#timer {
+			font-size: 3rem;
+			background: #efe90d;
+			border-radius: 2px;
+			display: inline-block;
+			margin: 1rem;
+			position: relative;
+			min-width: 350px;
+			padding: 1rem 2rem;
+			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  			transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+		}
+
+		#timer span {
+			font-size: 1rem;
+		}
+	</style>
+  </head>
+  <body>
+	  <h1>Hacktoberfest 2018 Countdown</h1>
+	  <h6>Created by: <a href="https://github.com/skwid138">Hunter Rancourt</a></h6>
+
+	  <article id="container">
+		  <div id="timer"></div>
+	  </article>
+
+	  <script>
+		/* November 1st at 12:00:01 */
+		const hacktoberfestEndDate = new Date("Nov 1, 2018 00:00:01 PDT").getTime();
+
+		// Update the countdown every 1 second
+		const x = setInterval(() => {
+			const currentTime = new Date().getTime();
+			const timeLeft = hacktoberfestEndDate - currentTime;
+
+			const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); // divide by milliseconds in a day
+			const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); // divide the remainder of time after days have been removed by milliseconds in an hour
+			const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); // divide the remainder of time after days and hours have been removed by milliseconds in a minute
+			const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); // divide the remainder of time after days, hours and minutes have been removed by milliseconds in a second
+
+			// Update the DOM
+			document.querySelector('#timer').innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s <span>PDT</span>`;
+
+			// If the count down is over, write some text
+			if (timeLeft <= 0) {
+				clearInterval(x);
+				document.querySelector('#timer').innerHTML = "EXPIRED";
+			}
+		}, 1000);
+	</script>
+  </body>
+</html>
\ No newline at end of file