I am currently developing a weather app using node.js and express, but I'm facing an issue where the CSS is not loading. I have followed the instructions provided in this link, however, I have not been successful so far. It's worth mentioning that I have placed the CSS file inside a public folder.
HTML
<link rel="stylesheet" href="/css/style.css">
JavaScript
// Setting up local server
const express = require("express");
// Node internal request
const https = require("https");
const app = express();
// Serving CSS files
app.use(express.static(__dirname + "public"));
app.get("/", function (req, res) {
const query = "Liverpool";
const apiKey = "3af2a1822cfe6d31e4317ac9c4b5d531";
const unit = "metric";
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query +"&appid="+ apiKey + "&units=" + unit;
https.get(url, function(response){
console.log(response.statusCode);
response.on("data", function(data){
// Converting hexadecimal to JavaScript
const weatherData = JSON.parse(data);
// Extracting desired data
const temp = weatherData.main.temp;
const weatherDescription = weatherData.weather[0].description;
const cityName = weatherData.name;
const icon = weatherData.weather[0].icon;
const imgURL = "https://openweathermap.org/img/wn/" + icon + "@2x.png";
res.write("<p>The current weather is " +weatherDescription + "</p>");
res.write("<h1>The temperature in " + cityName + " is " + Math.round(temp) + " degrees Celsius</h1>");
res.write("<img src=" + imgURL + ">");
res.send();
})
});
})