title: Javascript Countdown Timer Not Pulling Current Date
body: <p>I've inherited a React project where a jQuery countdown timer is used to hide/display a button. If there is time left on the clock, the button below is unclickable and greyed out, else there is no time left on the clock the button is meant to be clickable and the countdown timer should then be hidden.</p>
  <p>The timer counts down, but it is not pulling the correct date to count down to, so it won't expire for another 261 days. I've tried setting the date in the past so that the timer expires and no longer displays, thereby allowing the button to be clickable but that's not working.</p>
  <p>I deployed this site as a static build at <a href="https://scarebearsnft.com" rel="nofollow noreferrer">https://scarebearsnft.com</a>, does that have something to do with it? That it can't get the current date and time from the system?</p>
  <p>Handletimer.js</p>
  <pre><code>import $ from 'jquery';
  
  export const HandleTimer = () =&gt; {
      var countDownDate = new Date(&quot;Oct 30, 2021 15:37:25&quot;).getTime();
  
      var x = setInterval(function() {
      
      var now = new Date().getTime();
      var distance = countDownDate - now;
      
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      
      // If time is left, timer will be displayed and button will be disabled
      if (distance &gt;0) {    
          $(&quot;.time&quot;).show();
    
          $(&quot;#daysTimer&quot;).html(days);
          $(&quot;#hoursTimer&quot;).html(hours);
          $(&quot;#minutesTimer&quot;).html(minutes);
          $(&quot;#secondsTimer&quot;).html(seconds);
          
          
          $(&quot;#mintBtn&quot;).prop('disabled',true) 
          $(&quot;#selectBtn&quot;).attr('disabled',true) 
          $(&quot;#mintBtn&quot;).css({'background-color':'gray'})
          $(&quot;.mintBtn&quot;).hover(function(){
              $(this).css('color','white')
          })
          $(&quot;#selectBtn&quot;).css({'background-color':'gray'})
        
      }
  
      // If time has finished, timer will hide and button will be enabled
      else{
          clearInterval(x);
          $(&quot;.time&quot;).hide();
  
          $(&quot;.mintBtn&quot;).mouseover(function() {
              $(this).css(&quot;background-color&quot;,&quot;white&quot;);
              $(this).css(&quot;color&quot;,&quot;#850101&quot;);
          }).mouseout(function() {
              $(this).css(&quot;background-color&quot;,&quot;#850101&quot;);
              $(this).css(&quot;color&quot;,&quot;white&quot;);
          }); 
      }
      },1000);
  }
  </code></pre>
  <p>Topsection.js</p>
  <pre><code>import React, { useEffect, useState, useRef } from &quot;react&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { connect } from &quot;../redux/blockchain/blockchainActions&quot;;
  import { fetchData } from &quot;../redux/data/dataActions&quot;;
  import { counter } from &quot;../hooks/counter&quot;;
  import Background from '../images/cover.jpeg';
  
  
  const TopSection = () =&gt; {
    const [timeLeft, setTimeLeft] = React.useState(counter());
    const [mintvalue, setMintvalue] = React.useState(0);
    const dispatch = useDispatch();
    const blockchain = useSelector((state) =&gt; state.blockchain);
    const data = useSelector((state) =&gt; state.data);
    const [costOfNFT, setCost] = useState(0.005);
    
    const [claimingNft, setClaimingNft] = useState(false);
  
    const claimNFTs = (_amount) =&gt; {
      if (_amount &lt;= 0) {
        alert(&quot;Enter some amount to mint your Scare Bears&quot;)
        return;
      }
      else if (_amount &gt; 20){
        alert(`You cannot mint more than ${_amount} Scare Bears at a time`)
        return;
      }
      setClaimingNft(true);
      blockchain.smartContract.methods
        .mint(_amount)
        .send({
          to: &quot;HIDDEN&quot;,
          from: blockchain.account,
          value: blockchain.web3.utils.toWei((22 * _amount).toString(), &quot;ether&quot;),
        })
        .once(&quot;error&quot;, (err) =&gt; {
          console.log(err);
          alert(err['message'])
          setClaimingNft(false);
        })
        .then((receipt) =&gt; {
          alert(&quot;You now own a Scare Bears. go visit Opensea.io to view it.&quot;)
          setClaimingNft(false);
          dispatch(fetchData(blockchain.account));
        });
    };
    const getData = () =&gt; {
      if (blockchain.account !== &quot;&quot; &amp;&amp; blockchain.smartContract !== null) {
        dispatch(fetchData(blockchain.account));
      }
    };
  
    useEffect(() =&gt; {
      getData();
    }, [blockchain.account]);
  
  
    React.useEffect(() =&gt; {
      const id = setTimeout(() =&gt; {
        setTimeLeft(counter());
      }, 1000);
  
      return () =&gt; {
        clearTimeout(id);
      };
    });
  
    return (
      &lt;&gt;
        &lt;div
          class=&quot;main d-flex align-items-md-center py-5 py-sm-0&quot;
          style={{
            backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.5), rgb(0, 0, 0)), url(${Background})`,
            //backgroundImage: `url(/images/Header.gif)`,
            backgroundRepeat: &quot;no-repeat&quot;,
            backgroundSize: &quot;cover&quot;,
          }}
        &gt;
          &lt;div className=&quot;main-section&quot;&gt;
  
            &lt;div class=&quot;row d-flex align-items-center&quot; style={{
              marginTop: '43px'
              , justifyContent: 'center', paddingBottom: '75px'
            }}&gt;
              &lt;div class=&quot;col-md-4 col-lg-4 d-flex align-items-center &quot;&gt;
                &lt;div class=&quot;col-12 d-flex flex-column&quot;&gt;
                  {Object.keys(timeLeft).length &gt; 0 &amp;&amp; (
                    &lt;div class=&quot;row text-center justify-content-around time&quot;&gt;
                      &lt;div class=&quot;col-2 &quot;&gt;
                        &lt;h3 id=&quot;daysTimer&quot;&gt;{timeLeft.days}&lt;/h3&gt;
                        &lt;h4&gt;Days&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-2&quot;&gt;
                        &lt;h3 id=&quot;hoursTimer&quot;&gt;{timeLeft.hours}&lt;/h3&gt;
                        &lt;h4&gt;Hrs&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-2&quot;&gt;
                        &lt;h3 id=&quot;minutesTimer&quot;&gt;{timeLeft.minutes}&lt;/h3&gt;
                        &lt;h4&gt;Min&lt;/h4&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;col-2&quot;&gt;
                        &lt;h3 id=&quot;secondsTimer&quot;&gt;{timeLeft.seconds}&lt;/h3&gt;
                        &lt;h4&gt;Sec&lt;/h4&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  )}
                  {blockchain.account === &quot;&quot; ||
                          blockchain.smartContract === null ? (
                  &lt;div className=&quot;row mint&quot; style={{
                    marginLeft: '0px', marginRight: '0px'
                    , justifyContent: 'center'
                  }}&gt;
                  
                    &lt;div className=&quot;col-12&quot;&gt;
                      &lt;div class=&quot;row d-flex align-items-stretch mint-box-title&quot;
                        style={{ borderColor: 'blanchedalmond', marginLeft: '0px', marginRight: '0px' }}&gt;
                        &lt;p class=&quot;col-md-12 text-center&quot;&gt;
                          0/4444
                        &lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                      &lt;div class=&quot;d-flex align-items-stretch&quot;
                        style={{ borderColor: 'blanchedalmond', marginLeft: '0px', marginRight: '0px' }}&gt;
                        &lt;h2 class=&quot;col-md-12 text-center&quot;&gt;
                          ScareBears cost 22 MATIC
                        &lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;col-12&quot;&gt;
                      &lt;div class=&quot;row right d-flex align-items-stretch&quot;
                        style={{ borderColor: 'blanchedalmond', marginLeft: '0px', marginRight: '0px' }}&gt;
                        &lt;p class=&quot;col-md-12 text-center&quot; style={{ fontSize: '12px' }}&gt;
                          CONNECT TO THE POLYGON NETWORK
                        &lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-6&quot; style={{ marginLeft: '25%' }}&gt;
                      &lt;button
                        class={&quot;col-12 py-3  mintBtn&quot;}
                        className={`col-12 py-2  mintBtn ${Object.keys(timeLeft).length &gt; 0
                          ? &quot;mint-btn-before&quot;
                          : &quot;mint-btn-after&quot;
                          }`}
                        id=&quot;mintBtn&quot;
                        disabled={Object.keys(timeLeft).length &gt; 0}
                        onClick={(e) =&gt; {
                          e.preventDefault();
                          dispatch(connect());
                          getData();
                        }}
                      &gt;
                        {!Object.keys(timeLeft).length &gt; 0 ? &quot;CONNECT&quot; : &quot;CONNECT&quot;}
                      &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    
                    
                  &lt;/div&gt;
                  ):(
                    
                    &lt;div className=&quot;col-12&quot; &gt;
                      &lt;div class=&quot;row d-flex align-items-stretch mint-box-title&quot;
                        style={{ borderColor: 'blanchedalmond', marginLeft: '1px', marginRight: '0px' }}&gt;
                        &lt;p class=&quot;col-md-12 text-center&quot;&gt;
                        {data.totalSupply}/4444
                        &lt;/p&gt;
                      &lt;/div&gt;
                   
  
                      &lt;div className=&quot;col-8&quot;  style={{ marginLeft: '16%' }}&gt;
                        &lt;div className=&quot;number&quot;&gt;
                          &lt;span className=&quot;minus&quot; onClick={() =&gt; setMintvalue((mintvalue &gt; 0) ? mintvalue - 1 : mintvalue)}&gt;-&lt;/span&gt;
                          &lt;input type=&quot;number&quot; min=&quot;0&quot; max=&quot;20&quot; className=&quot;number-mint&quot; value={mintvalue} /&gt;
                          &lt;span className=&quot;plus&quot; onClick={() =&gt; setMintvalue((mintvalue &lt; 20) ? mintvalue + 1 : mintvalue)}&gt;+&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;col-8&quot; style={{ marginLeft: '15%' }}&gt;
                      &lt;button
                        class={&quot;col-12 py-3  mintBtn&quot;}
                        className={`col-12 py-2  mintBtn ${Object.keys(timeLeft).length &gt; 0
                          ? &quot;mint-btn-before&quot;
                          : &quot;mint-btn-after&quot;
                          }`}
                        id=&quot;mintBtn&quot;
                        disabled={Object.keys(timeLeft).length &gt; 0}
                        onClick={(e) =&gt; {
                          e.preventDefault();
                          claimNFTs(parseInt(mintvalue));
                          getData();
                        }}
                      &gt;
                        {!Object.keys(timeLeft).length &gt; 0 ? &quot;Mint&quot; : &quot;Minted&quot;}
                      &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col-12&quot;&gt;
                      &lt;div&gt;
                      &lt;div class=&quot;row d-flex align-items-stretch mint-box-title&quot;
                        style={{ borderColor: 'blanchedalmond', marginLeft: '0px', marginRight: '0px' }}&gt;
                        &lt;h2 class=&quot;col-md-12 text-center&quot;&gt;
                          ScareBears cost 22 MATIC
                        &lt;/h2&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
          
                      
                    &lt;/div&gt;
                  &lt;/div&gt;
                    &lt;/div&gt;
                    )}
                  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  export default TopSection;
  
  </code></pre>