Javasacript Countdown timer in Days, Hours, Minute, Seconds

Question

I\'m trying to create a time-based count down clock. It is not based upon current_dates. The initial time that will be pulled will be from a separate php file. This will be

Answer 1

Thanks to OP Phoenix Ryan I made the following React component using your solution. Many thanks!

const Panel = ({label, n}) => (
  

    {label}
    {n < 10 ? "0" + n : n}
  
)

const App = () => {
  const [secondsLeft, setSecondsLeft] = React.useState(86403)

  React.useEffect(() => {
    const interval = setInterval(() => {
      if (secondsLeft == 0) {
        clearInterval(interval);
        console.log('Times up!')
      } else {
        setSecondsLeft(secondsLeft - 1)
      }
    }, 1000)
    return () => clearInterval(interval)
  })
  
  const days = Math.floor(secondsLeft/24/60/60);
  const hoursLeft = Math.floor((secondsLeft) - (days*86400));
  const hours = Math.floor(hoursLeft/3600);
  const minutesLeft = Math.floor((hoursLeft) - (hours*3600));
  const minutes = Math.floor(minutesLeft/60);
  const seconds = secondsLeft % 60;
    
  return (
    

      
      
      
      
    
  )
}

ReactDOM.render(
  ,
  document.getElementById('root')
)

.root {
  display: flex;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 8px;
  color: #444;
}

.panel small {
  font-size: 9px;
  text-transform: uppercase;
  font-family: sans-serif;
}

.panel span {
  font-size: 3em;
  font-weight: bold;
  font-family: serif;
}