Create user input (that saves) to date/time countup

I know html, css, php but nothing about javascript. So pls bear with me.

My aim is to offer a “count up” option to user. He/she should be able to add present (or passed) date and a time, hit button “start” and a counter starts dynamically counting years, months, days, hours, minutes and seconds from that. As it’s for a single user, the date/time inserted should be saved in some way, meaning that when user later returns to the page, the countup continues from the time/date previously entered. And some kind of reset button in case the already set time variables need to be changed.

I have found what seems to be a perfect countup script here: https://codepen.io/anuar_ars/pen/ZwXvjW. But it lacks user input. Is it possible to combine that with e.g. this?:

<script type="text/javascript">
document.getElementById("local_time").addEventListener('change', timechanged);
function timechanged(){
let startingDate = new Date(this.value).getTime();
let counter = document.querySelector('.countup-timer');

setInterval(function() {
let newDate = new Date().getTime();
let finalDate = newDate - startingDate;

let days = Math.floor(finalDate / (1000 * 60 * 60 * 24));
let hours = Math.floor((finalDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((finalDate % (1000 * 60 *60)) / (1000 * 60));
let seconds = Math.floor((finalDate % (1000 * 60)) / 1000);

}
</script>


Any other suggestions, hints or advice highly appreciated.

Cheers!

Not sure what the goal of your application is, but keep in mind, that the calculation above does not work on daylight saving time countries (DST)

The goal is simply to be able to see how long time has gone from a certain date and time. Yes, I’m aware of DST, but this is a “fun” thing and not for scientists. :wink:

Here is how you could enter a date and time:

Because the number of days in a month varies, working out the number of months is more complicated.

I have not included saving the entered date and time in a cookie.

So this is where it defines where it’s counting from. It’s looking at “this” (which, if you look up…)

says its reading an element with an ID attribute set to “local_time”.

the Date constructor will take a valid date string, and convert it to an object (of type Date). the getTime() function then renders the date as a Extended Timestamp - a number of milliseconds since January 1, 1970 (the UNIX Epoch). A large integer.

So, you have a number of ways of injecting something into that code. You need to get a string into that constructor that registers itself as a valid date format. How you go about that… somewhat depends on you. What sort of input were you thinking of using?

As has been pointed out, counting years and months becomes a little tricky because those measures are not uniform, and is why the code above counts days as its largest scope. DST is not actually a factor if your input to the Date constructor is offset-sensitive.

Here is the part of the codePen that controls everything.

window.onload = function() {
  // Month Day, Year Hour:Minute:Second, id-of-element-container
  countUpFromTime("Jan 1, 2014 12:00:00", 'countup1'); // ****** Change this line!
};

We need to get the date and ID from somewhere. That used to be done with cookies, but these days sessionStorage provides a more convenient interface.

window.onload = function() {
  const countDate = sessionStorage.getItem("countDate");
  if (countDate) {
    countUpFromTime(countDate, "countup1");
  }
};

We can start things off by setting those same values as before, to ensure that the above code does appropriately work.

function setCount(date, id) {
  sessionStorage.setItem("countDate", date);
  sessionStorage.setItem("countId", id);
}
setCount("Jan 1, 2014 12:00:00", "countup1");

We can easily reset the date using the following:

function removeCount() {
  sessionStorage.removeItem("countDate");
  sessionStorage.removeItem("countId");
}
removeCount();

That way commenting out the removeCount() lets us easily go from having a value to having no value, when it comes to initial testing.

Beyond that, we now just need a form interface that appears when there is no date, and when there is a date we’ll want a clear button (with an “Are you sure?” prompt) to reset the date and bring back the form interface.

The details of doing that are too much for me to post right now, but here’s an updated codePen with a “Clear Counter” button that’s barely there, but becomes more visible when you hover on it, and a similar (but orange) time display for entering a new date.