3,256 reads

Ready for Infinity War? Here’s a Simple Countdown Timer Using ReactJS!

by Joseph J. BautistaAugust 29th, 2017

Too Long; Didn't Read

I’m a huge fan of Marvel. I’ve been following the story line leading up to the big fight against Thanos since Iron Man was released in 2008. But at the same time, I like <a href="https://hackernoon.com/tagged/programming" target="_blank">programming</a>. Recently I’ve been learning bits and pieces of <a href="https://hackernoon.com/tagged/reactjs" target="_blank">ReactJS</a> and I thought to myself, “Why not make something useful out of these random pieces of tricks I learned!” See it <a href="https://desolate-falls-20423.herokuapp.com" target="_blank">here</a>. <strong>If the font looks like TNR, wait a bit and refresh the page. It takes a while to download the Avengers fonts.</strong>

Companies Mentioned

featured image - Ready for Infinity War? Here’s a Simple Countdown Timer Using ReactJS!

Source: https://velopert.com/wp-content/uploads/2016/03/react.png

I’m a huge fan of Marvel. I’ve been following the story line leading up to the big fight against Thanos since Iron Man was released in 2008. But at the same time, I like programming. Recently I’ve been learning bits and pieces of ReactJS and I thought to myself, “Why not make something useful out of these random pieces of tricks I learned!” See it here. If the font looks like TNR, wait a bit and refresh the page. It takes a while to download the Avengers fonts.

This was one of the first few apps I made during my earlier learning stages. I’ve learned a lot more since then. I plan on sharing my other works in the future to document my learning progress. It’s amazing how much time we don’t use that we otherwise could use for just learning and building. This gap year I’m taking is making me realize that.

My belief in “learning by doing” stems from the idea of building up certainty. At first I had no idea what the hell I was doing with the earlier fiddling I did with ReactJS. There were tons of trial and error involved like setting up a damn project for starters! Afterward, I continued looking around and made sure I understood at least one or two things from the code that I knew contributed to the output. I’m still in that process (I don’t think you’ll ever really get out of that honestly), and I’ll continue on that path because it helps me fill in gaps, and at the same time, build on previous knowledge that will eventually culminate to bigger projects.

Doing this was really easy, seeing as a simple command such as create-react-app was all I needed to setup everything at hand. Makes life much easier than having to setup everything from Babel to Webpack. Programmers are notoriously lazy, so shortcuts like these are always welcomed and adapted.

My experience in Python and MATLAB programming also helped in understanding JS as a whole. It’s pretty easy to migrate skills to other languages when you start to realize that they all pretty much follow the same structure and logic one way or another. ReactJS is pretty big, let alone JS, so I’d say it’s still a long way to go.

Here’s what the contents of the html file look like after I did some cleaning:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>ReactJS Countdown Timer</title></head>

<body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

Everything gets set up for you quite neatly. Here’s what the main index.js file looks like:

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

The rendering happens here by “attaching” the contents of “App” into the root div tag in the HTML file above. Think of it like inserting a previously coded 200+ line HTML file into that root div tag. That’s how ReactJS works in summary. You program in JavaScript eXtension (JSX), making it look like you’re programming still in HTML when in fact what you’re using is JavaScript. Pretty awesome stuff.

The bulk of the rendering happens in App.js, and as you can see below. JSX makes it feel like you’re writing both HTML and JS at the same time. Amazing stuff!

import React, { Component } from 'react';import './App.css';import Clock from './Clock';

class App extends Component {

 _constructor_(_props_) {  
      super(props);  
      this.state = { deadline: 'May, 4, 2018' };  
 }

 render() {  
      return (  
          <div className="App">  
               <div className="App-title">  
                    Avengers: Infinity War  
               </div>  
               <div className="App-date">  
                    {this.state.deadline}  
               </div>

               <_Clock_ deadline={ this.state.deadline }/>  
          </div>  
      );  
 }

}export default App;

The functionality of the countdown timer was put in another file called Clock.js. The bulk of the math and the actual rendering that allows one to see in real time the countdown is all there. I haven’t intuitively understood the component lifecycle yet, so I can’t explain yet in simple terms how componentWillMount() and componentDidMount() work. I know it works, but I just can’t find the simple words yet to describe why and how. I don’t want to presume knowledge in something I don’t know well enough of. Told you there are still some gaps; I’m working on it!

import React, { Component } from 'react';import './App.css';

class Clock extends Component {constructor(props) {super(props);this.state = {days: 0,hours: 0,minutes: 0,seconds: 0,};}

 componentWillMount() {  
      this.getTimeUntil(this.props.deadline);  
 }

 componentDidMount() {  
      setInterval(() _\=>_ this.getTimeUntil(this.props.deadline), 1000);  
 }  

 leading0(_num_) {  
      return num < 10 ? '0' + num : num;  
 }

 getTimeUntil(_deadline_) {  
      _const_ time = _Date_.parse(deadline) - _Date_.parse(new Date());  
      if(time < 0) {  
           this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 });  
        
      } else {  
           _const_ seconds = Math.floor((time/1000)%60);  
           _const_ minutes = Math.floor((time/1000/60)%60);  
           _const_ hours = Math.floor((time/(1000\*60\*60))%24);  
           _const_ days = Math.floor(time/(1000\*60\*60\*24));  
           this.setState({ days, hours, minutes, seconds });  
      }  
 }

 render() {  
      return(  
           <div>  
                <div className="Clock-days">  
                     {this.leading0(this.state.days)} Days  
                </div>

                <div className="Clock-hours">  
                     {this.leading0(this.state.hours)} Hours  
                </div>

                <div className="Clock-minutes">  
                     {this.leading0(this.state.minutes)} Minutes  
                </div>

                <div className="Clock-seconds">  
                     {this.leading0(this.state.seconds)} Seconds  
                </div>  
           </div>  
      );  
 }

}export default Clock;

If you’re new to ReactJS, you might have noticed that the div tag has className instead of class. Remember, we’re still programming in JS, and the word class is already reserved. There are some other minute details like this also. For instance, using const or let instead of var. I’m still new to all of this so I’m still navigating.

I’ve hosted everything on my Github page in case anybody wanted to take a look at the whole shebang.

Still got a long way to go! Gotta keep practicing. I mean I gotta host my Machine Learning backends online somewhere somehow, right?