JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div id='countdown1'></div>
<input id="timer1" type="button" value="Start timer 1" />

<div id='countdown2'></div>
<input id="timer2" type="button" value="Start timer 2" />

<div id='score'></div>

JavaScript

var h1_worth = 100000;
var h1_rent = 400;
var h1_renovate = 20000;

var h2_worth = 200000;
var h2_rent = 800;
var h2_renovate = 40000;


function renovate(el) {el = (el/100) * 20;return el;} 
function rent(el) {el = (el/100) * 0.4;return el;}



//The Timer


var newscore = 0;
var score = document.getElementById('score');

function countdown(element, minutes, seconds, rental) {
    // Fetch the display element
    var el = document.getElementById(element);

    // Set the timer
    var interval = setInterval(function() {
      
      if (seconds == 11) {seconds = 1;}
      if (seconds == 10) {newscore = (newscore+rental);score.innerHTML = newscore;}

var minute_text = '';


        var second_text = seconds > 1 ? '' : '';
        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
        seconds++;
    }, 1000);
  

  
  
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
    countdown('countdown1', 0, 1, h1_rent);

}

start2.onclick = function() {
    countdown('countdown2', 0, 1, h2_rent);
}