We Keep Coding

How to add lap functionality in stopwatch using Javascript?

I am working on a stopwatch and basically I have all done but I don't know how to add the lapping functionality. I want that as soon as the user clicks on the lap button, a new lap gets added on a "new line". However I am not able to do that here is my code:
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let laps = null;
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10){
displayMilisec = "0" + miliseconds.toString();
}
else {
displayMilisec = miliseconds;
}
if(seconds < 10) {
displaySec = "0" + seconds.toString();
}
else {
displaySec = seconds;
}
if(minutes < 10) {
displayMins = "0" + minutes.toString();
}
else {
displayMins = minutes;
}
if(hours < 10) {
displayHours = "0" + hours.toString();
}
else {
displayHours = hours;
}
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
document.getElementById("timerMilisec").innerHTML = displayMilisec;
document.getElementById("timerSec").innerHTML = displaySec;
document.getElementById("timerMins").innerHTML = displayMins;
document.getElementById("timerHrs").innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = window.setInterval(start, 10);
document.getElementById('startBtn').innerHTML = "Stop";
status = "started";
}
else {
window.clearInterval(interval);
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
}
function reset() {
window.clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timerMilisec").innerHTML = "00";
document.getElementById("timerSec").innerHTML = "00";
document.getElementById("timerMins").innerHTML = "00";
document.getElementById("timerHrs").innerHTML = "00";
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
function lap() {
lapNow = hours + " : " + minutes + " : " + seconds + " : " + miliseconds;
laps = document.getElementById('lapRecord').innerHTML + lapNow;
document.getElementById('lapRecord').innerHTML = laps;
}
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito","poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito","poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn" onclick="startStop()">Start</button>
<button type="button" id="resetBtn" onclick="reset()">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord">
</p>
</div>
</div>
I have used a very bad method to do this but yeah I will definitely improve it as soon as know how to add that lap function. I would appreciate an explanation of your code as I just a beginner to coding and I don't know much still. Thank you so much for reading my questions.

Well then, I've edited the code and implemented the lap functionality. Here's what I did.
I would advice you stop using inline html event listeners (onclick). So I replaced all the onclicks with addEventListener('click')
Selecting elements from the DOM is heavy on the performance of your document, so I assigned all the ids to a variable, because these elements were used a lot.
In the lap function, I used template stings to concatenate the time together, and wrapped them in a <div></div> tag with a class of lap in case you want to style the laps later.
I also removed curly braces ({ }) around one-line ifelse statements to reduce the number of lines in the code.
You can test it out here in the snippet. :-)
const lapBtn = document.getElementById('lapBtn');
const timerMilliSec = document.getElementById('timerMilliSec');
const timerSec = document.getElementById('timerSec');
const timerMins = document.getElementById('timerMins');
const timerHrs = document.getElementById('timerHrs');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const lapRecord = document.getElementById('lapRecord');
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10) displayMilisec = "0" + miliseconds.toString();
else displayMilisec = miliseconds;
if (seconds < 10) displaySec = "0" + seconds.toString();
else displaySec = seconds;
if (minutes < 10) displayMins = "0" + minutes.toString();
else displayMins = minutes;
if (hours < 10) displayHours = "0" + hours.toString();
else displayHours = hours;
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
timerMilisec.innerHTML = displayMilisec;
timerSec.innerHTML = displaySec;
timerMins.innerHTML = displayMins;
timerHrs.innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = setInterval(start, 10);
startBtn.innerHTML = "Stop";
status = "started";
} else {
clearInterval(interval);
startBtn.innerHTML = "Start";
status = "stopped";
}
}
function reset() {
clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
timerMilisec.innerHTML = "00";
timerSec.innerHTML = "00";
timerMins.innerHTML = "00";
timerHrs.innerHTML = "00";
startBtn.innerHTML = "Start";
lapRecord.innerHTML = '';
status = "stopped";
}
function lap() {
lapNow = `<div class="lap">${hours} : ${minutes} : ${seconds} : ${miliseconds}</div>`;
lapRecord.innerHTML += lapNow;
}
lapBtn.addEventListener('click', lap);
startBtn.addEventListener('click', startStop);
resetBtn.addEventListener('click', reset);
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito", "poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito", "poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn">Start</button>
<button type="button" id="resetBtn">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord"></p>
</div>
</div>

Enable Button when click counter is at 100 with jQuery/JavaScript

I've been doing a little game lately. You have two buttons with which you can earn money, One has a timer and when the timer is over you can click on it and you get +$500 in your account.
With the other button you can earn money by clicking on it. With every click you get +1$ in your account.
Now I wanted to make a button that doubles the money. For this I made a third button that says "Enable me".
I wanted to make a function that enables the button when your account is over $100. Do you know how I could do it?
Here is my code:
$(".addOneButton").click(function() {
setCounter(getCounter() + 1);
});
function myFunction(){
$(".addOneButton").click(function() {
setCounter(getCounter() + 1);
});
}
function hideUpgradeButton() {
document.getElementById("upgrade").style.display = "none";
}
$('#btn').prop('disabled',true);
startCountDown();
function getCounter(){
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter() + 500);
$('#btn').prop('disabled',true);
startCountDown();
});
function startCountDown() {
var counter = document.getElementById("counter")
var minutes = 1,
seconds = 30;
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
$("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
clearInterval(count);
$('#btn').prop('disabled',false);
} else {
$("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
seconds--;
if (seconds < 10) seconds = "0" + seconds;
}
if(parseInt(minutes) === 1 && parseInt(seconds) === 0) {
minutes = 0;
seconds = 60
}
if(parseInt(counter) > 500){
$("#upgrade").prop('disabled', false);
}
}, 1000);
}
* {
font-family: 'Roboto', sans-serif;
}
#total {
display: flex;
justify-content: center;
margin: 0 auto;
width: auto;
}
#border {
border: 1px solid grey;
padding: 0.2em 1em 0.2em 1em;
}
.inline {
display: inline-block;
}
/*
Timer Button Start
*/
button:disabled {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #d0d0d0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
filter: grayscale(30%);
}
button {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
margin: 0.5em;
user-select: none;
}
button:enabled:hover {
transform: scale(1.1);
}
button:enabled:active {
transform: scale(0.9);
filter: brightness(70%);
}
/*
Timer Button End
*/
.bi {
font-size: 20px;
display: inline-flex;
align-items: center;
}
#centerButtons {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div id="total">
<div id="border">
<div class="inline" id="counter">0</div>
<div class="inline" id="money">$</div>
</div>
</div><br>
<div id="centerButtons">
<button id="btn">
<span id="countdown">Collect</span>
</button>
<button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>
<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

Set a variable that holds the increment value , and a var that make sur you enable the button double once ,
then check if counter > 100 && wasn't enabled yet then increment the increment using the function myFunction()
PS I've edited timer value : to go fast with testing :
see below, snippet :
var increment = 1;
var enabled = false;
$(".addOneButton").click(function() {
var count = getCounter();
if(count > 100 && !enabled) {
$("#upgrade").prop('disabled', false)
enabled = true;
}
setCounter(count + increment);
});
function myFunction() {
increment++;
}
function hideUpgradeButton() {
document.getElementById("upgrade").style.display = "none";
}
$('#btn').prop('disabled', true);
startCountDown();
function getCounter() {
return parseInt($('#counter').html());
}
function setCounter(count) {
$('#counter').html(count);
}
$("#btn").click(function() {
setCounter(getCounter() + 500);
$('#btn').prop('disabled', true);
startCountDown();
});
function startCountDown() {
var counter = document.getElementById("counter")
var minutes = 0,
seconds = 10
$("#countdown").html(minutes + ":" + seconds);
var count = setInterval(function() {
if (parseInt(minutes) < 0 || parseInt(seconds) <= 0) {
$("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
clearInterval(count);
$('#btn').prop('disabled', false);
} else {
$("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
seconds--;
if (seconds < 10) seconds = "0" + seconds;
}
if (parseInt(minutes) === 1 && parseInt(seconds) === 0) {
minutes = 0;
seconds = 60
}
if (parseInt(counter) > 500) {
$("#upgrade").prop('disabled', false);
}
}, 1000);
}
* {
font-family: 'Roboto', sans-serif;
}
#total {
display: flex;
justify-content: center;
margin: 0 auto;
width: auto;
}
#border {
border: 1px solid grey;
padding: 0.2em 1em 0.2em 1em;
}
.inline {
display: inline-block;
}
/*
Timer Button Start
*/
button:disabled {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #d0d0d0;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
filter: grayscale(30%);
}
button {
font-size: 25px;
width: 200px;
padding: 0.2em;
background: #f54532;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
margin: 0.5em;
user-select: none;
}
button:enabled:hover {
transform: scale(1.1);
}
button:enabled:active {
transform: scale(0.9);
filter: brightness(70%);
}
/*
Timer Button End
*/
.bi {
font-size: 20px;
display: inline-flex;
align-items: center;
}
#centerButtons {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<div id="total">
<div id="border">
<div class="inline" id="counter">0</div>
<div class="inline" id="money">$</div>
</div>
</div><br>
<div id="centerButtons">
<button id="btn">
<span id="countdown">Collect</span>
</button>
<button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>
<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

change getCounter:
function getCounter(){
var counter = parseInt($('#counter').html());
if(parseInt(counter) > 99){
$("#upgrade").prop('disabled', false);
}
return counter;
}

How to make javascript countdown continue after refresh

I want to make javascript countdown continue after refreshing until the end even if page closed if possible without a database. I have done some searching but couldn't apply any on this code at all.
Can anyone help me with this one, please? I need to get it working without replacing the whole thing.
let countdown;
const timerDisplay = document.querySelector('.display__time-left');
const endTime = document.querySelector('.display__end-time');
const buttons = document.querySelectorAll('[data-time]');
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
// check if we should stop it!
if(secondsLeft < 0) {
document.getElementById('itimer').style.display = 'none'
document.getElementById('ifree').innerHTML = "done!";
document.getElementById("ifree").style.fontSize = "3.5rem";
clearInterval(interval);
clearInterval(countdown);
return;
}
// display it
displayTimeLeft(secondsLeft);
}, 1000);
document.getElementById('itimer').style.display = 'unset'
document.getElementById("ifree").style.fontSize = "15px";
}
function displayTimeLeft(seconds){
const minutes = Math.floor(seconds/60);
const remainderSeconds = seconds % 60;
const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;``
document.title = display;
timerDisplay.textContent = display;
}
function displayEndTime(timestamp){
const end = new Date(timestamp);
const hour = end.getHours();
const minutes = end.getMinutes();
endTime.textContent = `... ${hour}:${minutes}`;
}
function startTimer() {
const seconds = parseInt(this.dataset.time);
timer(seconds);
}
buttons.forEach(button => button.addEventListener('click', startTimer));
document.customForm.addEventListener('submit', function(e) {
e.preventDefault();
const mins = this.minutes.value;
console.log(mins);
timer(mins * 60);
this.reset();
});
.body{
direction: rtl;
font-family: 'Droid Arabic Kufi', sans-serif;
color: black;
}
#ifree{
font-size: 15px;
color:black;
}
html {
box-sizing: border-box;
font-size: 10px;
color: black;
}
*, *:before, *:after {
box-sizing: inherit;
}
.display__time-left {
font-weight: 100;
font-size: 5rem;
margin: 12px;
color:white;
text-shadow:4px 4px 0 rgba(0,0,0,0.05);
margin-bottom: -25px;
color: black;
}
.timer {
display:flex;
min-height: 35vh;
flex-direction:column;
direction: rtl;
}
.timer__controls {
display: flex;
}
.timer__controls > * {
flex:1;
}
.timer__controls form {
flex:1;
display:flex;
}
.timer__controls input {
flex:1;
border:0;
padding:2rem;
}
.timer__button {
background:none;
border:0;
cursor: pointer;
color:black;
font-size: 2.5vh;
text-transform: uppercase;
background:rgba(0,0,0,0.1);
border-bottom:3px solid rgba(0,0,0,0.2);
border-right:1px solid rgba(0,0,0,0.2);
padding:1rem;
font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__leave {
border:0;
cursor: pointer;
color:black;
font-size: 2.5vh;
text-transform: uppercase;
background:rgba(0,0,0,0.1);
border-bottom:3px solid rgba(0,0,0,0.2);
border-right:1px solid rgba(0,0,0,0.2);
padding:1rem;
font-family: 'Droid Arabic Kufi', sans-serif;
}
.timer__button:hover,
.timer__button:focus {
background:rgba(0,0,0,0.2);
outline:0;
}
.display {
flex:1;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-height: 105px;
}
.display__end-time {
font-size: 3vh;
color:white;
font-family: 'Droid Arabic Kufi', sans-serif;
margin: 12px;
}
#media screen and (min-width: 1200px) {
timer__button {
font-size: 1px;
}
}
<body>
<div class="timer">
<div class="timer__controls">
<button data-time="1800" class="timer__button">30</button>
<button data-time="3600" class="timer__button">60</button>
<button data-time="5400" class="timer__button">90</button>
<button data-time="7200" class="timer__button">120</button>
<button data-time="14400" class="timer__button">240</button>
<button class="timer__leave" id="timer__leave">OFF</button>
<button data-time="0" class="timer__button">X</button>
</div>
<div class="display">
<h1 class="display__time-left" id="itimer"></h1>
<p class="display__end-time" id="ifree"></p>
</div>
</body>

Update the timer function
function timer(seconds) {
// clear any existing timers
clearInterval(countdown);
const now = Date.now();
const then = now + seconds * 1000;
displayTimeLeft(seconds);
displayEndTime(then);
countdown = setInterval(() => {
const secondsLeft = Math.round((then - Date.now()) / 1000);
// check if we should stop it!
if(secondsLeft < 0) {
document.getElementById('itimer').style.display = 'none'
document.getElementById('ifree').innerHTML = "متاح الآن!";
document.getElementById("ifree").style.fontSize = "3.5rem";
clearInterval(interval);
clearInterval(countdown);
localStorage.removeItem("timeLeft")
return;
}
// display it
localStorage.timeLeft=secondsLeft;
displayTimeLeft(secondsLeft);
}, 1000);
document.getElementById('itimer').style.display = 'unset'
document.getElementById("ifree").style.fontSize = "15px";
}
then add the below condition.
if(localStorage.timeLeft){
timer(localStorage.timeLeft);
}

Maybe use localStorage?
Add 3 additional functions:
function loadTimeLeft() {
return JSON.parse(localStorage.timeLeft)
}
function persistTimeLeft(timeLeft) {
localStorage.timeLeft = JSON.stringify(timeLeft)
}
function clearTimeLeft() {
localStorage.removeItem("timeLeft")
}
Then just plug it in:
window.onload = function() {
const seconds = loadTimeLeft()
if (seconds) {
timer(seconds)
}
}
function timer(seconds) {
....
countdown = setInterval(() => {
if(secondsLeft < 0) {
....
clearTimeLeft() //added at the end of if statement
return
}
displayTimeLeft(secondsLeft)
persistTimeLeft(secondsLeft) //added at the end of callback
}, 1000)
...

Loading a video at specific times - html, javascript

I have a simple html page for a Christmas countdown. The countdown functions fine and running ok, but the problem is that i am trying to call a video at specific times of the day.
So I want the timer to continue running until say on the hour then i want my 3 minute video to play, once the video has finished i would like it to return to my countdown timer.
I have tried to do the timer for the video nothing seems to happen and the timer continues to play.
Here is all my code...
HTML
<html>
<head>
<title>Xmas Countdown</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/countdown.js"></script>
<script src="js/video.js"></script>
</head>
<body onload="startTime()">
<div id="header">
<h1>Santa will be here in...</h1>
</div>
<div id="del-countdown">
<div id="clock"></div>
<div id="units">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
<div id="footer">
<h2>Merry Christmas</h2>
</div>
</body>
</html>
VIDEO.JS
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
var video = document.createElement('video');
video.src = '/media/santa.mp4';
video.autoPlay = true;
if(m=>00) {
document.getElementById('video').src
}
var t = setTimeout(startTime, 500);
}
window.onload = ('startTime()');
};
COUNTDOWN.JS
function updateTimer(deadline){
var time = deadline - new Date();
return {
'days': Math.floor( time/(1000*60*60*24) ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("December 25, 2016 00:00:00");
startTimer("clock", deadline);
};
CSS
#font-face {
font-family: Polo;
src: url(fonts/Polo.ttf);
}
body{
position: relative;
background: #f21c0a;
font-family: Polo;
max-height: 100%;
}
h1{
color: #fff;
text-align: center;
font-size: 100px;
letter-spacing: 8px;
}
h2{
color: #fff;
text-align: center;
font-size: 45px;
letter-spacing: 8px;
}
#header{
width: 100%;
margin: 5% auto;
}
#footer{
width: 100%;
margin-top: 20% auto;
}
#del-countdown{
width: 100%;
margin: 10% auto;
}
#clock span{
float: left;
text-align: center;
font-size: 150px;
margin: 0 2.5%;
color: #fff;
padding: 50px;
width: 20%;
border-radius: 20px;
box-sizing: border-box;
}
#clock span:nth-child(1){
background: #fa3221;
}
#clock span:nth-child(2){
background: #fa3221;
}
#clock span:nth-child(3){
background: #fa3221;
}
#clock span:nth-child(4){
background: #fa3221;
color: #b90b01;
}
#clock:after{
content: "";
display: block;
clear: both;
}
#units span{
float: left;
width: 25%;
text-align: center;
margin-top: 15px;
color: #fff;
text-transform: uppercase;
font-size: 30px;
letter-spacing: 1px;
}

Why does my countdown app work fine when I open the html page through the browser, but not when I use an http server?

The app is fully functioning when I open the html file in my browser, but when I try and open it on localhost:3000 it only loads the html and doesn't pick up the css or javascript.
HTML:
<html>
<head>
<link href="./main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="del-countdown">
<h1>THE SINGULARITY IS NEAR</h1>
<div id="clock"></div>
<div id="units">
<span>Years</span>
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
<script src="../index.js"></script>
</body>
</html>
CSS:
body{
background: #282e3a;
font-family: tahoma;
}
h1{
color: #fff;
text-align: center;
font-size: 74px;
letter-spacing: 10px;
margin-bottom: 5px;
}
h3{
color: #fff;
text-align: center;
font-size: 36px;
letter-spacing: 5px;
margin-top: 5px;
}
#del-countdown{
width: 850px;
margin: 15% auto;
}
#clock span{
float: left;
text-align: center;
font-size: 84px;
margin: 0 2%;
color: #fff;
padding: 20px;
width: 16%;
border-radius: 20px;
box-sizing: border-box;
}
#clock span:nth-child(1){
background: #696868;
}
#clock span:nth-child(2){
background: #7D7C7C;
}
#clock span:nth-child(3){
background: #9E9E9E;
}
#clock span:nth-child(4){
background: #C4C4C4;
}
#clock span:nth-child(5){
background: #D9D7D7;
}
#clock:after{
content: "";
display: block;
clear: both;
}
#units span{
float: left;
width: 20%;
text-align: center;
margin-top: 30px;
color: #ddd;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px rgba(10,10,10, 0.7);
}
span.turn{
animation: turn 0.7s ease forwards;
}
#keyframes turn{
0%{transform: rotateX(0deg)}
100%{transform: rotateX(360deg)}
}
Index.js:
function updateTimer(deadline){
var time = deadline - new Date();
return {
'years': Math.floor( time/(1000*60*60*24*365) ),
'days': Math.floor( time/(1000*60*60*24) % 365 ),
'hours': Math.floor( (time/(1000*60*60)) % 24 ),
'minutes': Math.floor( (time/1000/60) % 60 ),
'seconds': Math.floor( (time/1000) % 60 ),
'total' : time
};
}
function animateClock(span){
span.className = "turn";
setTimeout(function(){
span.className = "";
},700);
}
function startTimer(id, deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id);
var timer = updateTimer(deadline);
clock.innerHTML = '<span>' + timer.years + '</span>'
+ '<span>' + timer.days + '</span>'
+ '<span>' + timer.hours + '</span>'
+ '<span>' + timer.minutes + '</span>'
+ '<span>' + timer.seconds + '</span>';
//animations
var spans = clock.getElementsByTagName("span");
animateClock(spans[4]);
if(timer.seconds == 59) animateClock(spans[3]);
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[2]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.days == 364 && timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]);
//check for end of timer
if(timer.total < 1){
clearInterval(timerInterval);
clock.innerHTML = '<span>0</span><span>0</span><span>0</span><span>0</span><span>0</span>';
}
}, 1000);
}
window.onload = function(){
var deadline = new Date("January 01, 2045 00:00:01");
startTimer("clock", deadline);
};
Server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
//404 response
function send404Response(res) {
res.writeHead(404, {"Content-Type": "text/plain"})
res.write("Error 404: Page not found!")
res.end()
}
//Handle user request
function onRequest(req, res) {
if(req.method == 'GET' && req.url == '/') {
res.writeHead(200, {"Content-Type": "text/html"})
fs.createReadStream("./public/index.html").pipe(res)
}
else{
send404Response(res)
}
}
http.createServer(onRequest).listen(3000)
console.log("Server is now running...");

put the js and css file in a folder named pubilc. And call app.use('/public',express.static(__dirname + '/public'));
Now add css and js src="/public/js"