From fc1e1c6cb1c40ba720e60c73a2872896cd7167de Mon Sep 17 00:00:00 2001 From: Erica Stanley Date: Sun, 1 Dec 2019 09:47:19 -0500 Subject: [PATCH] Resolves #10 and #38 - add countdown to homepage --- src/components/Countdown.js | 129 ++++++++++++++++++ src/pages/index.js | 19 ++- src/styles/assets/css/style.css | 28 ++++ static/img/logo/refactr-logo-alt.svg | 21 +++ .../logo/refactr2020-header-slogan-alt.svg | 90 ++++++++++++ 5 files changed, 283 insertions(+), 4 deletions(-) create mode 100644 src/components/Countdown.js create mode 100644 static/img/logo/refactr-logo-alt.svg create mode 100644 static/img/logo/refactr2020-header-slogan-alt.svg diff --git a/src/components/Countdown.js b/src/components/Countdown.js new file mode 100644 index 0000000..b101841 --- /dev/null +++ b/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 ( +
+ + + {this.addLeadingZeros(countDown.days)} + {countDown.days === 1 ? 'Day' : 'Days'} + + + + + + {this.addLeadingZeros(countDown.hours)} + Hours + + + + + + + {this.addLeadingZeros(countDown.min)} + Min + + + + + + {this.addLeadingZeros(countDown.sec)} + Sec + + +
+ ); + } +} + +Countdown.propTypes = { + date: PropTypes.string.isRequired +}; + +Countdown.defaultProps = { + date: new Date() +}; + +export default Countdown; diff --git a/src/pages/index.js b/src/pages/index.js index 5179541..b38b7c9 100644 --- a/src/pages/index.js +++ b/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 }) => (
-
+
(
+
+ APRIL 22nd - 24th +
+ {/*
*/} -
-
+
+ + +
+ + + {/*
+
Diversity.Inclusion.Tech
-
+
*/} diff --git a/src/styles/assets/css/style.css b/src/styles/assets/css/style.css index 7702492..9169000 100755 --- a/src/styles/assets/css/style.css +++ b/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; +} diff --git a/static/img/logo/refactr-logo-alt.svg b/static/img/logo/refactr-logo-alt.svg new file mode 100644 index 0000000..fc9ebdf --- /dev/null +++ b/static/img/logo/refactr-logo-alt.svg @@ -0,0 +1,21 @@ + + + + REFACTR.TECH + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/img/logo/refactr2020-header-slogan-alt.svg b/static/img/logo/refactr2020-header-slogan-alt.svg new file mode 100644 index 0000000..9ac719e --- /dev/null +++ b/static/img/logo/refactr2020-header-slogan-alt.svg @@ -0,0 +1,90 @@ + + + + diversity.inclusion.tech + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file