Add countdown timer (#276)

* Add countdown timer

* Some problems solved

* Night mode problem solved

Author: devgupta2607

css/main.css

@@ -42,6 +42,39 @@
   background: -webkit-linear-gradient(left, rgb(247, 112, 55) 0%, rgb(250, 168, 68) 100%);
 }
 
+.countdownContainer{
+  position: relative;
+  padding: 10px;
+  max-width: 50%;
+  max-height: 100%;
+  margin: 20px auto;
+  box-sizing: border-box;
+  font-weight: 350;
+  background-color: transparent !important;
+  font-size: 3vw;
+    
+}
+            
+.info {
+  position: inherit;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: 20% 5% 20% 5% 20% 5% 25%;
+  align-items: center;
+}
+            
+.labels {
+  position: inherit;
+  display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  text-align: center;
+}
+
+.nightcountdown {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+
 .portfolio-item {
   margin-bottom: 30px;
 }

index.html

@@ -24,6 +24,9 @@
 
     <!-- Animate css -->
     <link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
+      
+    <!-- Font for countdown -->
+    <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
 
   </head>
 
@@ -75,6 +78,25 @@
       <h1 class="display-4 typing-anim-ref"><b>Hello, world!</b></h1>
       <h4 class="a-landing-sub-text">Welcome to OpenCode'19</h4>
       <a href="#participants"><button class="header-btn mt-5 a-btn">Get Started</button></a>
+      
+      <div class="countdownContainer display-4 a-landing-header-text">
+            <div class="values">OpenCode Countdown</div>
+            <div class="info" style="font-family: 'Orbitron'">
+                <div id="days" class="values">120</div>
+                <div class="values"> </div>
+                <div id="hours" class="values">4</div>
+                <div class="values">:</div>
+                <div id="minutes" class="values">12</div>
+                <div class="values">:</div>
+                <div id="seconds" class="values">22</div>
+            </div>
+            <div class="labels">
+                <div class= "values">Days</div>
+                <div class= "values">HH</div>
+                <div class= "values">MM</div>
+                <div class= "values">SS</div>
+            </div>
+      </div>
     </div>
 
     <div class="container">

js/main.js

@@ -19,6 +19,43 @@ function topFunction() {
     document.documentElement.scrollTop = 0;
 }
 
+// For countdown timer
+function countdown(){
+    var now = new Date();
+    var eventDate = new Date(2019, 1, 12);
+                
+    var currentTime = now.getTime();
+    var eventTime = eventDate.getTime();
+                
+    var remTime = eventTime - currentTime;
+                
+    var s = Math.floor(remTime / 1000);
+    var m = Math.floor(s / 60);
+    var h = Math.floor(m / 60);
+    var d = Math.floor(h / 24);
+                
+    h %= 24;
+    m %= 60;
+    s %= 60;
+                
+                
+    h = (h < 10) ? "0" + h : h ;
+    m = (m < 10) ? "0" + m : m ;
+    s = (s < 10) ? "0" + s : s;
+                
+    document.getElementById("days").textContent = d;
+    document.getElementById("days").innerText = d;
+                
+    document.getElementById("hours").textContent = h;
+    document.getElementById("minutes").textContent = m;
+    document.getElementById("seconds").textContent = s;
+                
+    setTimeout(countdown, 1000);
+                
+                
+}
+countdown();
+
 $(document).ready(function() {
     var mentors;
     var participants;
@@ -497,6 +534,8 @@ $(document).ready(function(){
         $('.jumbotron').toggleClass('dark-bg-img')
         $('.dark-scrl-btn').toggleClass('dark')
         $('nav,div,footer').toggleClass('dark')
+        $('.countdownContainer,.info,.labels,.values,.labellings').toggleClass('dark',false)
+        $('.countdownContainer,.info,.labels,.values,.labellings').toggleClass('nightcountdown')
         $('h2,h3,h5').toggleClass('dark')
         $('span,img,ul,li').toggleClass('dark')
         $('h1,h4,a').toggleClass('dark-landing-text')