title: How to restart amount value from 0 at midnight every day?
body: <p>I don't know exactly how to run this function correctly. I'm using <code>localstorage</code> that it stores the amount value forever and I want it to be 0 for each day at 00:00:00 when a user gets more than 0 in <code>Earned Today</code> tag. My code and  <code>localstorage</code>  work fine, where the value will automatically set to 0 as long as the page is open, but when it is closed and open it the value remains the same and does not change after midnight.
  I prefer <code>jQuery</code> code if it's possible and thanks so much for helping me.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//$("#earnedToday").text(localStorage.getItem("TodayEarning"));
  let amount = 0;
  $("button").click(function(){
  let updateEarning = parseFloat($("#earnedToday").text());
   amount = updateEarning;
   amount += 0.01;
   $("#earnedToday").text(amount.toFixed(2));
   let earning = parseFloat($("#earnedToday").text());
   //localStorage.setItem("TodayEarning", earning);
    
  });
  
  function setToZeroAt(hours, minutes, seconds) {
  var now = new Date(), then = new Date();
  then.setHours(hours, minutes, seconds, 0);
  if(then.getTime() &lt; now.getTime()) {
      then.setDate(now.getDate() + 1);
  }
  var timeout = (then.getTime() - now.getTime());
  setTimeout(function() {
    $("#earnedToday").text(0); 
    let earning = parseFloat($("#earnedToday").text());
   //localStorage.setItem("TodayEarning", earning);
  },timeout);
  
  }
  setToZeroAt(0,0,0);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
        width: 25%;
        text-align: center;
        border: 1px solid #d7d7d7;
      }
  
      #earnedToday{
        color: #02b4e4;
       
      }
      button{
      margin-top: 20px;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="box"&gt;
        &lt;p&gt;Earned today&lt;/p&gt;
        &lt;p id="earnedToday"&gt;0&lt;/p&gt;
      &lt;/div&gt;
      &lt;button&gt;Earn&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>