Having a bit of trouble with my JavaScript skills as I try to load my index.html file (seems like it should be the 5th easiest thing to do in JavaScript).
Let me get straight to the point; when I manually open my index.html, it loads perfectly WITH the CSS applied (shown below)
https://i.sstatic.net/VZfbq.png
However, when I attempt to load it using JavaScript, it only displays plain HTML without any styling, completely missing my CSS:
https://i.sstatic.net/Eovav.png
The files are organized as follows:
server.js in: root
index.html in: root/public
style.css in: root/public/css
Here's the server.js code:
var http = require('http');
var fs = require('fs');
var handleRequest = function handleRequest(request, response){
if (request.url==='/index.html' || request.url==='/') {
response.writeHeader(200, {'Content-type':'text/html'});
fs.readFile('./public/index.html', function (err, file) {
if (err) throw err;
response.end(file);
});
} else {
response.writeHeader(404);
response.end('Are you lost friend?');
}
}
var server = http.createServer(handleRequest);
var PORT = 8080;
server.listen(PORT, function(){
console.log("Server listening on: http://localhost:%s", PORT);
});
And here's the index.html code:
<!DOCTYPE html>
<html>
<head>
<title>My not-so-amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>The Inspiratorator v5.7.0</h1>
<p>I AM THE SUN</p>
</body>
</html>
Lastly, the style.css content:
h1 {
background-color: #000000;
color: rgba(255, 255, 255, 1);
backface-visibility: 0.5;
font-size: 50px;
text-align: center;
}
p {
background-color: blue;
font-family: sans-serif;
color: white;
}