A Pen by Saman

Thumbnail
This awesome code was written by xengil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright xengil ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Saman</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper timer">
  <ul class="timer-options">
    <li class="timer-options__item" data-time="0.5">30 secs</li>
    <li class="timer-options__item" data-time="10">10 mins</li>
    <li class="timer-options__item" data-time="20">20 mins</li>
    <li class="timer-options__item" data-time="30">30 mins</li>
    <li class="timer-options__item" data-time="60">1 hour</li>
    
    <li class="custom-timer">
      <form class="custom-timer__form" name="custom_timer">
        <input type="text" class="custom-timer__input" name="custom_timer_in_minute"> Minutes
      </form>
    </li>
  </ul>
  
  <div class="display-timer">
    <div class="display-timer__time-left"></div>
    <div class="display-timer__end-time"></div>
  </div>
  
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/xengil/a-pen-by-saman-zpKmeM */
.timer-options {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.timer-options__item, .custom-timer {
  display: inline-block;
  cursor: pointer;
  background: blue;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-size: inherit;
}

.custom-timer {
  box-sizing: border-box;
  padding: 0;
  background: none;
  color: #000;
}

.custom-timer__input {
  display: inline-block;
  border: none;
  background: red;
  padding: 0.5em;
  border-radius: 5px;
  font-size: inherit;
  width: 50px;
  color: #fff;
}

.display-timer {
  text-align: center;
  margin-top: 50px;
  font-size: 2em;
}

.display-timer__time-left {
  margin-bottom: 20px;
}

/*Downloaded from https://www.codeseek.co/xengil/a-pen-by-saman-zpKmeM */
// This is our countdown interval
let countdown;
const timerDisplay = document.querySelector('.display-timer__time-left');
const endTimeDisplay = document.querySelector('.display-timer__end-time');
const timerOptions = document.querySelectorAll('.timer-options__item');

function timer(seconds) {
  // We have to clear any previous interval
  clearInterval(countdown);
  
  const now = Date.now();
  const then = now + seconds * 1000;
  
  displayEndTime(then);
  displayTimeLeft(seconds);
  
  countdown = setInterval(() => {
    const secondsLeft = Math.round((then - Date.now()) / 1000);
    
    if (secondsLeft < 0) {
      clearInterval(countdown);
      return;
    }
    
    displayTimeLeft(secondsLeft);
  }, 1000);
}

function displayTimeLeft(seconds) {
  const toHours = Math.floor(seconds / 3600);
  const toMinutes = Math.floor(seconds / 60) % 60;
  const toSeconds = Math.floor(seconds % 60);
  
  const display = `${zeroPad(toHours)}:${zeroPad(toMinutes)}:${zeroPad(toSeconds)}`;
  
  timerDisplay.textContent = document.title = display;
}

function displayEndTime(timestamp) {
  const end = new Date(timestamp);
  const hours = end.getHours();
  const adjustedHour = hours > 12 ? hours - 12 : hours;
  const minutes = end.getMinutes();
  endTimeDisplay.textContent = `You'll be finished by ${zeroPad(adjustedHour)}:${zeroPad(minutes)}`
}

function zeroPad(number) {
  return number < 10 ? '0' + number : number;
}

function startTimer(e) {
  e.preventDefault();
  const minutes = this.dataset.time? this.dataset.time : this.custom_timer_in_minute.value;
  timer(parseInt(minutes * 60));
}

timerOptions.forEach(option => option.addEventListener('click', startTimer));

document.custom_timer.addEventListener('submit', startTimer);

Comments