JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<div>
<label for="hours">Hours:</label>
<select id="hours">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  ...
</select>
<label for="minutes">Minutes:</label>
<select id="minutes">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  ...
</select>

<label for="seconds">Seconds:</label>
<select id="seconds">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="2">2</option>
  ...
</select>

  <button id="start-timer">Start Timer</button>
  <button id="reset-timer">Reset Timer</button>

</div>

<div class="pie degree">
  <span class="block"></span>
  <span id="time">0</span>
</div>

CSS

.pie {
  width: 250px;
  height: 250px;
  display: block;
  position: relative;
  border-radius: 50%;
  background-color: #1fbba6;
  border: 2px solid #1fbba6;
/*   float: left;
  margin: 2em; */
}
.pie .block {
  position: absolute;
  background: #fff;
  width: 230px;
  height: 230px;
  display: block;
  border-radius: 50%;
  top: 10px;
  left: 10px;
}

#time {
  font-size: 3em;
  position: absolute;
  top: 35%;
  left: 43%;
  color: #999999;
}

.degree {
  /*90 + ( 360 * .1 )*/
  background-image: linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

JavaScript

var myCounter;
var totaltime = 0;

$("#start-timer").click(function() {
var hours = $("#hours").val();
var minutes = $("#minutes").val();
var seconds = $("#seconds").val();
		
     if (hours == 0 && minutes == 0 && seconds == 0) {
        alert("Please select a valid time");
        return;
    }
    totaltime = (hours * 3600) + (minutes * 60) + seconds;

    var count = parseInt($('#time').text());

    var myCounter = setInterval(function() {
        count += 1;
        $('#time').html(count);
        update(count);
       
        if (count == totaltime) {
    clearInterval(myCounter);
    alert("Time's up!");
}

       
    }, 1000);
});

function update(percent) {
    var deg;
    if (percent < (totaltime / 2)) {
        deg = 90 + (360 * percent / totaltime);
        $('.pie').css('background-image', 'linear-gradient(' + deg + 'deg, transparent 50%, white 50%),linear-gradient(90deg, white 50%, transparent 50%)');
    } else if (percent >= (totaltime / 2)) {
        deg = -90 + (360 * percent / totaltime);
        $('.pie').css('background-image', 'linear-gradient(' + deg + 'deg, transparent 50%, #1fbba6 50%),linear-gradient(90deg, white 50%, transparent 50%)');
    }
}


$("#reset-timer").click(function() {
    clearInterval(myCounter);
    $('.pie').css('background-image',
                'linear-gradient(90deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%)'
               );
    $("#hours").val(0);
    $("#minutes").val(0);
    $("#seconds").val(0);
    $('#time').html(0);
    totaltime = 0;
    clearInterval(myCounter);
    // reset any other elements or variables you have in your web page.
});