I am new to posting questions to stackoverflow. I have a question about React js. Trying to add an old html page with a script I made.
When I take off the comment from the import it breaks the app. Any way to fix this?
Leaving the script commented lets the page load with the css but nothing else.
Here is the code in the component
import './style.css';
// import './script.js';
import { NavBar } from "../Nav";
export function CountDownTimer() {
return (
<>
<NavBar />
<h1>Countdown</h1>
<h2>Default set to new years 2050</h2>
<div className='calendar'>
<input type='date' id='Date' />
<button onclick="changeDate()">Countdown</button>
</div>
<div className='timer-container' >
<div>
<div id='days'></div>
<span>days</span>
</div>
<div>
<div id='hours'></div>
<span>hours</span>
</div>
<div>
<div id='minutes'></div>
<span>minutes</span>
</div>
<div>
<div id='seconds'></div>
<span>seconds</span>
</div>
</div>
<div className='timer-container' >
<div>
<div id='thours'></div>
<span>Total hours</span>
</div>
<div>
<div id='tminutes'></div>
<span>Total minutes</span>
</div>
<div>
<div id='tseconds'></div>
<span>Total seconds</span>
</div>
</div>
{/* <script src="script.js"></script> */}
</>
);
}
and the script.js
//target date to countdown to
var setDate = new Date('2050-01-01T00:00:00');
console.log('Date set to: ' + setDate);
var currentDate;
function countdown() {
currentDate = new Date();
var time = (setDate.getTime() - currentDate.getTime());
var seconds = Math.floor(time/1000)%60;
var minutes = Math.floor(time/60/1000 % 60);
var hours = Math.floor(time/1000/3600 % 24);
var days = Math.floor(time/3600/24/1000);
// console.log('days, hours, minutes, seconds', days, hours, minutes, seconds);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
var totalSeconds = Math.floor(time/1000);
var totalMinutes = Math.floor(time/60/1000);
var totalHours = Math.floor(time/1000/3600);
document.getElementById("tseconds").innerHTML = totalSeconds;
document.getElementById("tminutes").innerHTML = totalMinutes;
document.getElementById("thours").innerHTML = totalHours;
}
function changeDate() {
var newDate = document.getElementById("Date").value;
console.log("newDate: ", newDate);
setDate = new Date(newDate+"T00:00:00");
}
countdown();
setInterval(countdown, 1000);
