JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="container">
<div id="counter"></div>

<div id="reset-counter" class="btn">
Reset <span></span>
</div>
</div>
<div id="progress"></div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  font-family: 'Bebas Neue', Sans-Serif;
}

body {

  border: 1px solid green;
  margin: 0;
  padding: 0;
  height: 100vh;

}

.btn {
  justify-self: flex-end;
  flex: 0 0 auto;
  width: 100%;
  font-size: 1rem;
  padding: 0.5em 1em;
  background-color: gray;
  text-align: center;
  cursor: pointer;
  border-radius: 0.2rem;
  color: white;
  letter-spacing: 0.2rem;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid grey;
  padding: 0.5em;
  margin: 0.5em;
  min-height: 4em;
  font-weight: 800;

}

#counter {
  flex: 0 0 auto;
  font-size: 3rem;
  min-height: 4rem;
}

.success {
  background-color: rgb(0 126 51);
}

.warning {
  background-color: rgb(255 136 0);
}

.alert {
  background-color: rgb(204 0 0);
}

JavaScript

var TIMER = {};
TIMER.SET = {};
TIMER.SET.baseTime = 40;




TIMER.init = function() {

  TIMER.SET.intervalId = null;

  //TIMER.countDown();

  //start timer:
  TIMER.SET.interval = TIMER.SET.baseTime;
  TIMER.SET.intervalId = setInterval(TIMER.countDown, 1000);
  TIMER.resetButton = $('#reset-counter');

  // bindings:
  TIMER.resetButton.on('click touchendr', TIMER.resetTimer);
  $('body').on("touchend click blur", TIMER.resetTimer);

  // log:
  console.clear();
  console.log("TIMER:", TIMER.SET);

};


// couunter:
TIMER.countDown = function() {

  //count down:
  TIMER.SET.interval--;
  
  var counter = "0:" + (TIMER.SET.interval < 10 ? "0" : "") + String(TIMER.SET.interval);

 
   
    //update counter view:
    $("#counter").html(TIMER.SET.interval);


    //interactions:
    if (TIMER.SET.interval <= 30) {
      TIMER.resetButton.find('span').text(counter);
      TIMER.resetButton.addClass('success');
    }

    if (TIMER.SET.interval <= 20) {
      TIMER.resetButton.addClass('warning');
    }
    if (TIMER.SET.interval <= 10) {
      TIMER.resetButton.removeClass('warning').addClass('alert');
    }

    if (TIMER.SET.interval <= 0){
    
    	console.log("clearing timer:");
    
      clearInterval(TIMER.SET.intervalId);
      console.log("reset time");
      TIMER.SET.interval = TIMER.SET.baseTime;
      TIMER.SET.intervalId = setInterval(TIMER.countDown, 1000);
      TIMER.resetButton.removeClass('warning alert').find('span').text('');
      console.log(TIMER.SET);
    }

 

};


// reseter:
TIMER.resetTimer = function() {
console.clear();
 console.log(TIMER.SET);

  //reset countdown
  clearInterval(TIMER.SET.intervalId);
  TIMER.SET.interval = TIMER.SET.baseTime;
  TIMER.SET.intervalId = TIMER.SET.intervalId = setInterval(TIMER.countDown, 1000);

  TIMER.resetButton.removeClass('alert warning').find('span').text("");

};


// call start
$(function() {

  TIMER.init();

});