<form id="countdate" class="hide">
    <input class="timeel" name="year" value="0">
    <span class="timeel timeRefYears">year</span>
    <input class="timeel" name="month" value="0">
    <span class="timeel timeRefMonths">month</span>
    <input class="timeel" name="day" value="0">
    <span class="timeel timeRefDays">day</span>
    <input class="timeel" name="hours" value="0">
    <span class="timeel timeRefHours">hour</span>
    <input class="timeel" name="minutes" value="0">
    <span class="timeel timeRefMinutes">minutes</span>
    <input class="timeel" name="seconds" value="0">
    <span class="timeel timeRefSeconds">seconds</span>
    <input type="submit" value="Count!">
</form>
<div class="countup" id="countup1">
  <span class="timeel years">00</span>
  <span class="timeel timeRefYears">years</span>
  <span class="timeel days">00</span>
  <span class="timeel timeRefDays">days</span>
  <span class="timeel hours">00</span>
  <span class="timeel timeRefHours">hours</span>
  <span class="timeel minutes">00</span>
  <span class="timeel timeRefMinutes">minutes</span>
  <span class="timeel seconds">00</span>
  <span class="timeel timeRefSeconds">seconds</span>
  <button class="clear">Clear Counter</button>
</div>
#countdate, .countup {
  text-align: center;
  margin: 120px;
}
#countdate .timeel,
.countup .timeel {
  display: inline-block;
  padding: 10px;
  background: #151515;
  margin: 0;
  color: white;
  width: 2.6rem;
  margin-left: 13px;
  border-radius: 10px 0 0 10px;
}
#countdate [class*="timeRef"],
.countup [class*="timeRef"] {
  border-radius: 0 10px 10px 0;
  margin-left: 0;
  background: #e8c152;
  color: black;
}
#countdate [class*="timeRef"] {
  background: orange;
}

input {
  border: none;
  border-radius: 10px 0 0 10px;
}
.hide {
  display: none;
}
.clear {
  visibility: visible;
  opacity: 0.2;
  transition: all 1s ease-in;
}
.clear:hover {
  visibility: visible;
  opacity: 1;
  transition: all 1s ease-in;
}
function countUpFromTime(countFrom, id) {
  countFrom = new Date(countFrom).getTime();
  var now = new Date(),
      countFrom = new Date(countFrom),
      timeDifference = (now - countFrom);

  var secondsInADay = 60 * 60 * 1000 * 24,
      secondsInAHour = 60 * 60 * 1000;
    
  days = Math.floor(timeDifference / (secondsInADay) * 1);
  years = Math.floor(days / 365);
  if (years > 1){ days = days - (years * 365) }
  hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
  mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) * 1);
  secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 1000)) / 1000 * 1);

  var idEl = document.getElementById(id);
  idEl.getElementsByClassName('years')[0].innerHTML = years;
  idEl.getElementsByClassName('days')[0].innerHTML = days;
  idEl.getElementsByClassName('hours')[0].innerHTML = hours;
  idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
  idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

  clearTimeout(countUpFromTime.interval);
  countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 1000);
}

function setCount(date, id) {
  sessionStorage.setItem("countDate", date);
  sessionStorage.setItem("countId", id);
}
function removeCount() {
  sessionStorage.removeItem("countDate");
  sessionStorage.removeItem("countId");
  sessionStorage.clear();
}
function setFormTime(date) {
  const form = document.querySelector("#countdate");
  const elements = form.elements;
  elements.year.value = date.getFullYear();
  elements.month.value = date.getMonth() + 1;
  elements.day.value = date.getDate();
  elements.hours.value = date.getHours();
  elements.minutes.value = date.getMinutes();
  elements.seconds.value = date.getSeconds();
}

function checkCounter(form) {
  const countDate = sessionStorage.getItem("countDate");
  const counter = document.querySelector("#countup1");
  console.log(countDate);
  if (countDate) {
    countUpFromTime(countDate, "countup1");
    form.classList.add("hide");
    counter.classList.remove("hide");
  } else {
    setFormTime(new Date());
    form.classList.remove("hide");
    counter.classList.add("hide");
  }
}
function createDateTime(form) {
  formdate = new Date();
  formdate.setFullYear(form.elements.year.value);
  formdate.setMonth(form.elements.month.value - 1);
  formdate.setDate(form.elements.day.value);
  formdate.setHours(form.elements.hours.value);
  formdate.setMinutes(form.elements.minutes.value);
  formdate.setSeconds(form.elements.seconds.value);
  const date = formdate.toDateString().substr(4);
  const time = formdate.toTimeString().substr(0, 8);
  return date + " " + time;
}

const form = document.querySelector("#countdate");
const clearButton = document.querySelector("button.clear");
checkCounter(form);

form.addEventListener("submit", function (evt) {
  evt.preventDefault();
  const form = document.querySelector("#countdate");
  const datetime = createDateTime(form);
  console.log(datetime);
  setCount(datetime, "countup1");
  checkCounter(form);
});

clearButton.addEventListener("click", function () {
  if (confirm("Are you sure you want to clear the counter?")) {
    removeCount();
  }
  checkCounter(form);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.