Issue with loading CSS file in HTML.
Checking out my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h1>TEST</h1>
</body>
</html>
The style.css file is in the same directory as the .html file above.
Here's the content of style.css:
body {
background: red;
}
Upon inspecting the Chrome developer tools "Network" tab, the status of style.css shows as "pending".
Any suggestions on how to resolve this? I have already tried disabling AdBlock and clearing cache.
I am using node.js to run the server, not sure if that's relevant...
Take a look at my server.js file:
var http = require("http");
// requests are routed through router file
var router = require("./router.js");
// define port number
port = "8080";
// listen for requests
http.createServer(function (request, response) {
router.home(request, response);
}).listen(port);
// Server running message
console.log('Server running at http://127.0.0.1:' + port + '/');
Check out the router.js file:
var renderer = require("./renderer.js");
var url = require("url");
var htmlHeader = {'Content-Type': 'text/html'};
function home(request, response) {
if (request.url === "/") {
if (request.method.toLowerCase() === "get") {
response.writeHead(200, htmlHeader);
renderer.view("header", {}, response);
renderer.view("footer", {}, response);
response.end();
}
}
}
module.exports.home = home;
Last but not least, take a look at renderer.js file:
// read [view].html files contents
var fs = require('fs');
// insert values into [view].html file
function mergeValues(values, content) {
// loop over keys
for (var key in values) {
// replace all {{key}} with value from object
content = content.replace("{{" + key + "}}", values[key]);
}
// return merged content
return content;
}
// handle view passed as argument
function view(templateName, values, response) {
// find [view].html file in /views/ folder
var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf8"});
// insert values into file content
fileContents = mergeValues(values, fileContents);
// write out content to response
response.write(fileContents);
}
module.exports.view = view;
Thank you!