Basic Timer

%%html

<style>
    body {
        font-family: sans-serif;
        display: grid;
        height: 100vh;
        place-items: center;
      }
      
      .base-timer {
        position: relative;
        width: 300px;
        height: 300px;
      }
      
      .base-timer__svg {
        transform: scaleX(-1);
      }
      
      .base-timer__circle {
        fill: none;
        stroke: none;
      }
      
      .base-timer__path-elapsed {
        stroke-width: 7px;
        stroke: grey;
      }
      
      .base-timer__path-remaining {
        stroke-width: 7px;
        stroke-linecap: round;
        transform: rotate(90deg);
        transform-origin: center;
        transition: 1s linear all;
        fill-rule: nonzero;
        stroke: currentColor;
      }
      
      .base-timer__path-remaining.green {
        color: rgb(65, 184, 131);
      }
      
      .base-timer__path-remaining.orange {
        color: orange;
      }
      
      .base-timer__path-remaining.red {
        color: red;
      }
      
      .base-timer__label {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
      }
</style>

<html>
    <div id="app"></div>
</html>

<script>
  const FULL_DASH_ARRAY = 283;
  const WARNING_THRESHOLD = 10;
  const ALERT_THRESHOLD = 5;

  const COLOR_CODES = {
    info: {
      color: "green"
    },
    warning: {
      color: "orange",
      threshold: WARNING_THRESHOLD
    },
    alert: {
      color: "red",
      threshold: ALERT_THRESHOLD
    }
  };

  const TIME_LIMIT = 20;
  let timePassed = 0;
  let timeLeft = TIME_LIMIT;
  let timerInterval = null;
  let remainingPathColor = COLOR_CODES.info.color;

  document.getElementById("app").innerHTML = `
  <div class="base-timer">
    <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g class="base-timer__circle">
        <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
        <path
          id="base-timer-path-remaining"
          stroke-dasharray="283"
          class="base-timer__path-remaining ${remainingPathColor}"
          d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          "
        ></path>
      </g>
    </svg>
    <span id="base-timer-label" class="base-timer__label">${formatTime(
      timeLeft
    )}</span>
  </div>
  `;

  startTimer();

  function onTimesUp() {
    clearInterval(timerInterval);
  }

  function startTimer() {
    timerInterval = setInterval(() => {
      timePassed = timePassed += 1;
      timeLeft = TIME_LIMIT - timePassed;
      document.getElementById("base-timer-label").innerHTML = formatTime(
        timeLeft
      );
      setCircleDasharray();
      setRemainingPathColor(timeLeft);

      if (timeLeft === 0) {
        onTimesUp();
      }
    }, 1000);
  }

  function formatTime(time) {
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;

    if (seconds < 10) {
      seconds = `0${seconds}`;
    }

    return `${minutes}:${seconds}`;
  }

  function setRemainingPathColor(timeLeft) {
    const { alert, warning, info } = COLOR_CODES;
    if (timeLeft <= alert.threshold) {
      document
        .getElementById("base-timer-path-remaining")
        .classList.remove(warning.color);
      document
        .getElementById("base-timer-path-remaining")
        .classList.add(alert.color);
    } else if (timeLeft <= warning.threshold) {
      document
        .getElementById("base-timer-path-remaining")
        .classList.remove(info.color);
      document
        .getElementById("base-timer-path-remaining")
        .classList.add(warning.color);
    }
  }

  function calculateTimeFraction() {
    const rawTimeFraction = timeLeft / TIME_LIMIT;
    return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
  }

  function setCircleDasharray() {
    const circleDasharray = `${(
      calculateTimeFraction() * FULL_DASH_ARRAY
    ).toFixed(0)} 283`;
    document
      .getElementById("base-timer-path-remaining")
      .setAttribute("stroke-dasharray", circleDasharray);
  }
</script>

"""
from beepy import beep
import time
import datetime
 
# Create class that acts as a countdown
def countdown(h, m, s):
 
    # Calculate the total number of seconds
    total_seconds = h * 3600 + m * 60 + s
 
    # While loop that checks if total_seconds reaches zero
    # If not zero, decrement total time by one second
    while total_seconds > 0:
 
        # Timer represents time left on countdown
        timer = datetime.timedelta(seconds = total_seconds)
        
        # Prints the time left on the timer
        print(timer, end="\r")
 
        # Delays the program one second
        time.sleep(1)
 
        # Reduces total time by one second
        total_seconds -= 1
 
    print("Bzzzt! The countdown is at zero seconds!")
    beep(sound='ready')
 
# Inputs for hours, minutes, seconds on timer
h = input("Enter the time in hours: ")
m = input("Enter the time in minutes: ")
s = input("Enter the time in seconds: ")
countdown(int(h), int(m), int(s))
"""

'\nfrom beepy import beep\nimport time\nimport datetime\n \n# Create class that acts as a countdown\ndef countdown(h, m, s):\n \n    # Calculate the total number of seconds\n    total_seconds = h * 3600 + m * 60 + s\n \n    # While loop that checks if total_seconds reaches zero\n    # If not zero, decrement total time by one second\n    while total_seconds > 0:\n \n        # Timer represents time left on countdown\n        timer = datetime.timedelta(seconds = total_seconds)\n        \n        # Prints the time left on the timer\n        print(timer, end="\r")\n \n        # Delays the program one second\n        time.sleep(1)\n \n        # Reduces total time by one second\n        total_seconds -= 1\n \n    print("Bzzzt! The countdown is at zero seconds!")\n    beep(sound=\'ready\')\n \n# Inputs for hours, minutes, seconds on timer\nh = input("Enter the time in hours: ")\nm = input("Enter the time in minutes: ")\ns = input("Enter the time in seconds: ")\ncountdown(int(h), int(m), int(s))\n'

Basic Timer • 10 min read

Description