Create a regressive counter (Countdown) from input and store in localStorage

Question

As you can see in my example below, I have a form that plays the data written in the entries (input) html and these are stored in localStorage.

In the input=date i need the date provided to be transformed into a countdown (countdown), for the remaining days.

<form id="form">
    <label>Name:</label>        <input type="text" id="name"><br>
    <label>Deadline:</label>    <input type="date" id="deadline"><br>
    <label>Image:</label>       <input type="file" id="pic">
    <input id="create" type="button" value="Create" />
</form>
<div id="tbody"></div>

<script>
$(function(){
$('#create').click(function () {
    var theName = $('#name').val();
    var theDeadline = $('#deadline').val();
    var pic = document.getElementById("pic").files[0];
    var imgUrl;
    var reader = new FileReader();  
    reader.onload = function(e) {
      var imgURL = reader.result;
      $('#tbody').prepend("<div>" + theName + "<br>" + theDeadline + "<br><img src=" + imgURL + "></div>");

      var tbody = $('#tbody').html();
      localStorage.setItem('tbody', tbody);
      saveDataToLocalStorage(imgURL);
    }
    reader.readAsDataURL(pic);
    return false;
});

$('#tbody').html(localStorage.getItem('tbody'));
return false;
});
</script>

example version in jsfiddle: https://jsfiddle.net/7qtk9gyh/

I really liked the puglin jquery.countdown.js, It’s very simple, however, as I’m new to scripts, I don’t even know how to make it work from an input and combined with the form. Any help is very welcome!

Answer 1

You can turn your data inputs into milliseconds and calculate the difference between them

const date1 = new Date('8/1/2019'); // M/d/yyyy
const date2 = new Date(new Date().toDateString()); // cria uma data desconsiderando os milisegundos
const diffTime = Math.abs(date2.getTime() - date1.getTime());
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
console.log(`Data 1 = ${date1}`); 
console.log(`Data 2 = ${date2}`); 
console.log(`Diferença de tempo = ${diffTime}`); 
console.log(`Diferença de dias = ${diffDays}`);

So, as you want to store the result of the difference in the location, it would be necessary to just add to the end of the code

localStorage.setItem('countdown', diffDays)