I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000.
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("The server is now up and running...");