countdown timer example - react.js

countdown timer example - react.js

Georgios Lazaridis
Coding, art, science

countdown timer with react.js

Below is the live preview of the little countdown timers, the code posted is only for the first timer, the second and third are created the same way, only with the change of the setInterval time value (100, 10, 1).

//Timer by Georgios Lazaridis 05.2020
import React from 'react';
import ReactDOM from 'react-dom';

const Timer = () => (


  <div className="columns" style={{textAlign:'center',marginLeft:'-3%'}}>

      <div style={{marginLeft:'3%',height:'20%'}} className="counter box">

        <h6 style={{color:'white'}}>

          <b style={{backgroundColor:'black',padding:'10px',
          fontFamily:'courier new'}}>countdown timers</b>

        </h6>

      <br></br>

      <p id="timer"
      style={{fontSize:'27px',color:'gray',padding:'10px',
      fontFamily:'courier'}}>
        <b>10000</b>
      </p>

      <br></br>

      </div>

    <br></br>

  </div>


);

export default Timer;



function countdown() {
//initial number
let x = 10000;


var a =  setInterval( function(){

    if (document.getElementById('timer')!=null){
        if (x>0){
          x--;
          var element = (
            <span><b>{x}</b></span>
          );
        } else if (x===0){
           element = (
             <span><b>0</b></span>
          );
          clearInterval(a);
        }

          ReactDOM.render(

              element,
              document.getElementById('timer')

          );
        }
      }, 100);
//the 100 number is responsible for the speed of the countown





}

countdown();

I made this little timer for the Multicontent website i have been working for recently.

I let you use my code for any purpose for free, donations or contributions are much appreciated.