My app.js
const express = require ("express");
const res = require("express/lib/response");
const https = require ("https");
const bodyParser = require ("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended:true}));
app.get("/",function(request, response){
response.sendFile(__dirname+"/index.html");
})
app.post("/", function(req, res){
console.log(req.body.cityName);
// console.log("POST request received.");
const query=req.body.cityName;
const apiKey="796ea31271937af05a23079696c29758";
const units = "metric";
const url = "https://api.openweathermap.org/data/2.5/weather?q="+query+"&appid="+apiKey+"&units="+units;
https.get(url, function(response){
console.log(res.statusCode);
response.on("data", function(data){
//console.log(data);
const weatherData= JSON.parse(data);
// console.log(weatherData);
// const object = {
// name: "Ann",
// favouriteFood: "Butter Chicken"
// }
// console.log(JSON.stringify(object));
const temp = weatherData.main.temp;
console.log("Temperature : "+temp);
const feelsLike = weatherData.main.feels_like;
console.log("Feels like : "+feelsLike);
const weatherDescription = weatherData.weather[0].description;
console.log("Weather Description : "+weatherDescription);
const icon= weatherData.weather[0].icon;
imageURL = "http://openweathermap.org/img/wn/"+icon+"@2x.png"
// Method 1
//response.send("<h2>The temperature in Montreal, Quebec is "+temp+" degrees Celcius.</h2><br><h2>The weather is currently "+weatherDescription+"</h2><br><h2>The feels like temperature is "+feelsLike+" degrees Celcius. </h2>")
// Method 2
res.set("Content-Type", "text/html");
res.write("<h2>The temperature in "+query+" is "+temp+" degrees Celcius.</h2>")
res.write("<p>The weather is currently "+weatherDescription+"</p>")
res.write("<h4>The feels like temperature is "+feelsLike+" degrees Celcius. </h4>")
res.write("<img src="+imageURL+">");
res.send();
});
});
})
app.listen(3000, function(){
console.log("Server is running on port 3000.");
})
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weather Project</title>
</head>
<body>
<form action="/" method="post">
<label for="city-input">City Name: </label>
<input id="city-input" type="text" name="cityName" />
<button type="submit">Go</button>
</form>
</body>
</html>
When I test this app.js on my local server it shows the expected response, i.e. the temperature of the city that I send in POST request. But when I run the project using my Github pages link it shows the index.html but when I send the city as POST request,I get a 405 error on the next page. I am new so I am not sure what is wrong but my initial thought was that it is something related to the API key? as in the key ID? Please help.
