Variety of tools for the time domain: https://codepen.io/popdemtech/pen/LYJKxjE?editors=1111

time-tools.html

<!-- clock -->
<h3>Clock</h3>
<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand minute-hand"></div>
    <div class="hand second-hand"></div>
  </div>
  <div class="pip"></div>
</div>

<!-- timer -->
<h3>Timer</h3>
<div class="timer">
  <div class="timer-clock">
    <div class="timer-digits">00:00:00</div>
  </div>
  <div class="timer-controls">
    <div class="timer-inputs">
      <input type="number" class="timer-hours" placeholder="00" min="0" max="23">
      <input type="number" class="timer-minutes" placeholder="00" min="0" max="59">
      <input type="number" class="timer-seconds" placeholder="00" min="0" max="59">
    </div>
    <div class="timer-buttons">
      <button class="start-button">Start</button>
      <button class="stop-button">Stop</button>
      <button class="reset-button">Reset</button>
    </div>
  </div>
</div>

<!-- add minutes -->
<h3>Add Minutes to Time</h3>
<form id="time-form">
  <label for="time-input">Time (hh:mm AM/PM):</label>
  <input type="text" id="time-input" name="time" required>
  <br>
  <label for="minutes-input">Minutes to Add:</label>
  <input type="number" id="minutes-input" name="minutes" required>
  <br>
  <div class="add-min-result-box"><b>Result:</b> <span id="add-min-result">&nbsp;&nbsp;&nbsp;</span></div>
  <br>
  <button id="add-minutes-btn">Add minutes</button>
</form>


<h3>Add Calendar Days</h3>
<div class="calendar-tool">
  <label for="calendar-date">Select a Calendar Date:</label>
  <input type="date" id="calendar-date" name="calendar-date">
  <br>
  <label for="days-to-add">Number of Days to Add:</label>
  <input type="number" id="days-to-add" name="days-to-add" min="0">
  <br>
  <div><b>Result:</b> <span id="add-days-result">&nbsp;&nbsp;&nbsp;</span></div>
  <br>
  <button id="calculate-button">Calculate Date</button>
  <br>
</div>

<style>
.clock {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  box-shadow: 0 0 0 4px #000, inset 0 0 0 3px #000000, inset 0 0 10px black;
}

.clock-face {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* Center the clock face within the clock */
}

.hand {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 6px;
  transform-origin: 100%;
  transform: rotate(90deg);
  transition: all 0.05s;
}

.hour-hand {
  width: 40%;
  background: black;
  transform-origin:112%;
  top: 46%;
}

.minute-hand {
  background: black;
}

.second-hand {
  height: 4px;
  background: red;
}

.pip {
  background-color: white;
  border: 2px solid black;
  border-radius: 100%;
  width: 8px;
  height: 8px;
  position: absolute;
  top: calc(50% - 5px);
  left: calc(50% - 5px);
  z-index: 100;
}

/* timer */

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.timer-clock {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background: black;
  border-radius: 5px;
  font-family: monospace;
  font-size: 34px;
  color: white;
  margin-bottom: 20px;
}

.timer-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-inputs {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.timer-inputs input {
  width: 50px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  border: none;
  border-radius: 5px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 10px;
}

.timer-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.timer-buttons button {
  font-size: 18px;
  padding: 10px;
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.start-button {
  background-color: green;
  color: white;
}

.stop-button {
  background-color: red;
  color: white;
}

.reset-button {
  background-color: gray;
  color: white;
}

/* add minutes */
/* styles for the form */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

label {
  margin-bottom: 10px;
}

input[type="time"] {
  margin-bottom: 10px;
  padding: 5px;
  font-size: 16px;
  border-radius: 5px;
  border: none;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.add-min-result-box {
  margin-bottom: 10px;
}

#add-minutes-btn {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

/* calendar tool */
.calendar-tool {
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

label {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
}

input[type="date"], input[type="number"] {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

#result {
  font-size: 24px;
  margin-top: 20px;
}
</style>

<script>
// clock
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.minute-hand');
const secondHand = document.querySelector('.second-hand');

function setDate() {
  const now = new Date();
  let flag;

  const seconds = now.getSeconds();
  const secondsDegrees = ((seconds / 60) * 360) + 90;
  if (secondsDegrees === 90) { secondHand.style.transition = 'none'; flag = true; }
  secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
  if (secondsDegrees > 90 && flag) { secondHand.style.transition = 'all 0.05s'; flag = false; }

  const minutes = now.getMinutes();
  const minutesDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
  minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;

  const hours = now.getHours();
  const hoursDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;
  hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}

setInterval(setDate, 1000); // update every second

// timer
const digits = document.querySelector('.timer-digits');
const hoursInput = document.querySelector('.timer-hours');
const minutesInput = document.querySelector('.timer-minutes');
const secondsInput = document.querySelector('.timer-seconds');
const startButton = document.querySelector('.start-button');
const stopButton = document.querySelector('.stop-button');
const resetButton = document.querySelector('.reset-button');
let countdown;

function displayTime(seconds) {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = seconds % 60;
  const time = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  digits.textContent = time;
  document.title = time; // set the timer as the document title
}

function startTimer() {
  const hours = hoursInput.value ? parseInt(hoursInput.value) : 0;
  const minutes = minutesInput.value ? parseInt(minutesInput.value) : 0;
  const seconds = secondsInput.value ? parseInt(secondsInput.value) : 0;
  const totalTime = hours * 3600 + minutes * 60 + seconds;
  let timeLeft = totalTime;
  displayTime(totalTime);
  countdown = setInterval(() => {
    timeLeft--;
    if (timeLeft < 0) {
      clearInterval(countdown);
      document.title = 'Time is up!';
      return;
    }
    displayTime(timeLeft);
  }, 1000);
  disableInputs();
}

function stopTimer() {
  clearInterval(countdown);
  enableInputs();
}

function resetTimer() {
  clearInterval(countdown);
  digits.textContent = '00:00:00';
  document.title = 'Timer';
  enableInputs();
}

function disableInputs() {
  hoursInput.disabled = true;
  minutesInput.disabled = true;
  secondsInput.disabled = true;
}

function enableInputs() {
  hoursInput.disabled = false;
  minutesInput.disabled = false;
  secondsInput.disabled = false;
}

startButton.addEventListener('click', startTimer);
stopButton.addEventListener('click', stopTimer);
resetButton.addEventListener('click', resetTimer);


// Add minutes
const timeInput = document.getElementById('time-input');
const addMinutesBtn = document.getElementById('add-minutes-btn');
const result = document.querySelector('#add-min-result');

// Set default value of time input to current time
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
timeInput.value = `${hours}:${minutes}`;

addMinutesBtn.addEventListener('click', (event) => {
  event.preventDefault();

  const time = timeInput.value.split(':');
  const hours = parseInt(time[0]);
  const minutes = parseInt(time[1]);
  const addMinutes = parseInt(document.getElementById('minutes-input').value);

  const resultTime = new Date();
  resultTime.setHours(hours);
  resultTime.setMinutes(minutes + addMinutes);

  result.textContent = `${resultTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}`;
});
const calculateDate = () => {
  const calendarDateInput = document.getElementById("calendar-date");
  const daysToAddInput = document.getElementById("days-to-add");
  const resultDiv = document.getElementById("add-days-result");

  const calendarDate = new Date(calendarDateInput.value);
  const daysToAdd = parseInt(daysToAddInput.value);

  const newDate = new Date(calendarDate);
  newDate.setDate(newDate.getDate() + daysToAdd + 1);

  resultDiv.innerHTML = newDate.toDateString();
};

const calculateButton = document.getElementById("calculate-button");
calculateButton.addEventListener("click", calculateDate);
</script>