Resolves #10 and #38 - add countdown to homepage

src/components/Countdown.js

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types'
+
+/**
+ * Note : 
+ * If you're using react v 15.4 or less
+ * You can directly import PropTypes from react instead. 
+ * Refer to this : https://reactjs.org/warnings/dont-call-proptypes.html
+ */
+
+class Countdown extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      days: 0,
+      hours: 0,
+      min: 0,
+      sec: 0,
+    }
+  }
+
+  componentDidMount() {
+    // update every second
+    this.interval = setInterval(() => {
+      const date = this.calculateCountdown(this.props.date);
+      date ? this.setState(date) : this.stop();
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    this.stop();
+  }
+
+  calculateCountdown(endDate) {
+    let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date())) / 1000;
+
+    // clear countdown when date is reached
+    if (diff <= 0) return false;
+
+    const timeLeft = {
+      years: 0,
+      days: 0,
+      hours: 0,
+      min: 0,
+      sec: 0
+    };
+
+    // calculate time difference between now and expected date
+    if (diff >= (365.25 * 86400)) { // 365.25 * 24 * 60 * 60
+      timeLeft.years = Math.floor(diff / (365.25 * 86400));
+      diff -= timeLeft.years * 365.25 * 86400;
+    }
+    if (diff >= 86400) { // 24 * 60 * 60
+      timeLeft.days = Math.floor(diff / 86400);
+      diff -= timeLeft.days * 86400;
+    }
+    if (diff >= 3600) { // 60 * 60
+      timeLeft.hours = Math.floor(diff / 3600);
+      diff -= timeLeft.hours * 3600;
+    }
+    if (diff >= 60) {
+      timeLeft.min = Math.floor(diff / 60);
+      diff -= timeLeft.min * 60;
+    }
+    timeLeft.sec = diff;
+
+    return timeLeft;
+  }
+
+  stop() {
+    clearInterval(this.interval);
+  }
+
+  addLeadingZeros(value) {
+    value = String(value);
+    while (value.length < 2) {
+      value = '0' + value;
+    }
+    return value;
+  }
+
+  render() {
+    const countDown = this.state;
+
+    return (
+      <div className="Countdown">
+        <span className="Countdown-col">
+          <span className="Countdown-col-element">
+              <strong>{this.addLeadingZeros(countDown.days)}</strong>
+              <span>{countDown.days === 1 ? 'Day' : 'Days'}</span>
+          </span>
+        </span>
+
+        <span className="Countdown-col">
+          <span className="Countdown-col-element">
+            <strong>{this.addLeadingZeros(countDown.hours)}</strong>
+            <span>Hours</span>
+          </span>
+        </span>
+
+
+        <span className="Countdown-col">
+          <span className="Countdown-col-element">
+            <strong>{this.addLeadingZeros(countDown.min)}</strong>
+            <span>Min</span>
+          </span>
+        </span>
+
+        <span className="Countdown-col">
+          <span className="Countdown-col-element">
+            <strong>{this.addLeadingZeros(countDown.sec)}</strong>
+            <span>Sec</span>
+          </span>
+        </span>
+      </div>
+    );
+  }
+}
+
+Countdown.propTypes = {
+  date: PropTypes.string.isRequired
+};
+
+Countdown.defaultProps = {
+  date: new Date()
+};
+
+export default Countdown;

src/pages/index.js

@@ -4,6 +4,7 @@ import Footer from "../components/footer";
 import { FeaturedSpeakerCard } from "../components/FeaturedSpeakerCard";
 import { KeynoteSpeakerList } from "../components/KeynoteSpeakerList";
 import NavigationBar from "../components/NavigationBar";
+import Countdown from "../components/Countdown";
 import { Helmet } from "react-helmet";
 
 import "../styles/assets/css/responsive2.css";
@@ -91,7 +92,7 @@ export default ({ data }) => (
                   </div>
 
                   <div className="row justify-content-center" style={{marginTop: '30px'}}>
-                    <div className="col-lg-6">
+                    <div className="col-lg-7">
                         <img
                         className="img-fluid"
                         src="/img/logo/refactr2020-header-slogan.svg"
@@ -100,19 +101,29 @@ export default ({ data }) => (
                     </div>
                   </div>
 
+                  <div className="row justify-content-center">
+                      <span style={{color: '#C418A3', 'font-size':'2em', 'font-weight': '500', marginTop: '20px'}}>APRIL 22nd - 24th</span>
+                  </div>
+
                   {/*<div className="upcoming">
                     <span className="is-countdown"> </span>
                     <div data-countdown="2019/06/05" /> 
                   </div>*/}
 
-                  <div className="row justify-content-end">
-                    <div className="col-lg-5 col-md-5 col-sm-5 col-5">
+                  <div className="row justify-content-center">
+                        <Countdown date={`2020-04-22T12:00:00`} />
+
+                  </div>
+
+
+                  {/* <div className="row justify-content-end" style={{marginTop: '-30px', marginBottom: '0'}}>
+                    <div className="col-sm-5 col-5">
                         <img
                         src="/img/logo/refactr2020-header-location.svg"
                         alt="Diversity.Inclusion.Tech"
                       />
                     </div>
-                  </div>
+                </div> */}
 
 
 

src/styles/assets/css/style.css

@@ -2589,3 +2589,31 @@ a {
 	color:#12114a;
 	font-weight:700;
 }
+
+.Countdown{
+  margin: 30% auto 30% auto;
+  padding-bottom: 20px;
+}
+
+.Countdown-col{
+  display: inline-block;
+}
+
+.Countdown-col-element{
+  display: inline-block;
+  margin: 0 20px 40px 20px;
+  display: flex;
+  flex-direction: column;
+  color: #C418A3;
+}
+
+.Countdown-col-element strong{
+  font-size: 8em;
+}
+
+.Countdown-col-element span{
+  font-size: 1.6em;
+  text-align: center;
+  margin-top:50px;
+  font-weight: 500;
+}