JSFiddle - React, Tailwind, and code Playground
HTML
<input id="save" type="button" value="Salvar log" />
<input id="delete" type="button" value="Excluir log" />
<form id="form">
<label>Deadline:</label> <input type="date" id="deadline">
<br />
<input id="create" type="button" value="Create" />
</form>
<form>
<label>Hoje: <span id="hoje"></span></label>
<br />
<input id="avancar" type="button" value="Avançar dia" />
</form>
<div id="result"></div>
CSS
form {
margin: 5% 0%;
}
JavaScript
$(function(){
var today = new Date(new Date().toDateString()); // salva o dia de hoje
$('#hoje').html(today); // exibe o dia de hoje na tela
var deadline = new Date(localStorage.getItem('deadline')); // recupera o valor já salvo no localstorage com o deadline
function diff(deadline) {
var diffTime = deadline.getTime() - today.getTime();
var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
return diffDays;
}
function showDiff(date) {
$('#result').prepend("<div>" + date + "</div>");
}
if (deadline) {
var date = new Date(deadline);
showDiff(diff(date));
}
$('#save').click(function () {
localStorage.setItem("log", $("#result").html())
});
$('#delete').click(function () {
localStorage.removeItem("log")
});
$('#create').click(function () {
$('#result').html("")
deadline = new Date($('#deadline').val());
deadline.setMinutes(deadline.getMinutes() + deadline.getTimezoneOffset());
showDiff(diff(deadline));
localStorage.setItem('deadline', deadline);
});
$('#avancar').click(function () {
today.setMinutes(1440)
$('#hoje').html(today)
showDiff(diff(deadline));
});
});