Month: September 2019

Here goes, my first experience with React, the front end language, developed by facebook. I followed some instruction from @dtkatz and managed to solve a puzzle or two of my own over the course of building this app.

first the App is loaded on the index.js page, there’s a public folder where index.html loads <div id="root"></div> after loading index.js

// import React class & ReactDOM classes to extend
import React from 'react';
import ReactDOM from 'react-dom';

// import App class from the local folder
import App from './App';

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

let’s take a look in the App class it shows the Clock, which is a self contained element but also allows for the input of a new date by the user.

Give it a go and change date for yourself! Remember, it has to be in the future, as it’s a live countdown and you can’t count down to yesterday, alas ( – sigh )

// Start with the react component, to extend
import React, { Component } from 'react';
import Clock from './Clock';

// make sure it can be styled
import './app.css';

// the App class, will extend the Component class
class App extends Component {

   // constructor method constructs initial object
   constructor(props) {

     // component passes own props
     super(props);

     // setting state
     this.state = {
       deadline: 'December 25, 2019',
       newDeadline: ''
     }
   }
 changeDeadline() {

     // set the new deadline
     this.setState({deadline: this.state.newDeadline})
   }
 render() { 
     return (
         <div className="App">
           <div className='App-title'>Countdown to {this.state.deadline}</div>
           <Clock
         deadline={this.state.deadline}
           />
           <div>
             <input
             placeholder='new date'
             onChange={event =>(this.setState({newDeadline: event.target.value}))} 
             />
             <button onClick={() => this.changeDeadline()}>Submit</button>
           </div>
         </div>
     )
   }
 }

 // exports the App class
 export default App;

Then we’re on to the Clock class. It’s responsible for updating and changing the time to the deadline, which is set to default to Christmas but can be reset to any date you put in the input. Follow the same format to countdown to your inputted date.

 // Start with the react component, to extend
 import React, { Component } from 'react';

 // make sure it can be styled
 import './app.css';

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

 // beware: research componentWillMount and it's alternatives,
 // add the UNSAFE_ prefix to make this work for 2019!
 // once Component class is mounted, will also mount getTimeUntil
   UNSAFE_componentWillMount() {

     // pass deadline to the getTimeUntil function
     this.getTimeUntil(this.props.deadline);
   }

 // once the Component class has done with the mounting task, set interval to getTimeUntil the deadline repeated every second
   componentDidMount() {
     setInterval(() => this.getTimeUntil(this.props.deadline), 1000);
   }

 // getTimeUntil function is passed the deadline and calculates time until the deadline, it then changes the display to reflect that
   getTimeUntil(deadline) {
     const time = Date.parse(deadline) - Date.parse(new Date());
     const seconds = Math.floor((time/1000) % 60);
     const minutes = Math.floor((time/1000/60) % 60);
     const hours = Math.floor(time/(10006060) % 24);
     const days = Math.floor(time/(10006060*24));

 // changes the display
     this.setState({days, hours, minutes, seconds,});
   }

 render() {

 // always need to return something
     return (
       <div>
         <div className='Clock-days'>{this.state.days} days</div>
         <div className='Clock-hours'>{this.state.hours} hours</div>
         <div className='Clock-minutes'>{this.state.minutes} minutes</div>
         <div className='Clock-seconds'>{this.state.seconds} seconds</div>
       </div>
     )
   }
 }

 // export Clock class
 export default Clock;

Then add some styling with app.css to make it a bit more useable. Since it’s counting down to Christmas, forgive me the Christmas Cheese please?

body {
   background: url('images/Christmas-bg.jpg');
   background-size: cover;
   background-color: green;
 }
 .App {
   text-align: center;
   font-size: 35px;
   margin-top: 20%;
   background-color: red;
   padding: 1rem;
 }
 .App-title {
   font-size: 50px;
 }
 .Clock-days,
 .Clock-hours,
 .Clock-minutes,
 .Clock-seconds {
   display: inline;
   margin: 10px;
 }

I found the image at Pexels but you could choose any typical Christmas scene to add, or why not make the initial deadline for Mardi Gras and change the background to suit?!