JavaScript is a whole new world for me, and I'm struggling with all these errors.
The goal here is simple: click the "generate" button, and under "Most Recent Entry," display the current temperature for the entered zip code, today's date, and the user's input on how they're feeling.
However, when I tested it in the browser, a flood of errors popped up, leaving me puzzled. I've got node, cors, body-parser, and express installed, but they all show vulnerabilities - not sure if that's causing some functions to fail.
This is what shows up on the console after entering a zip code and some text: browser console errors
On the server side:
/* Initializing an empty JS object */
projectData = {};
/* Setting up Node environment */
const express = require("express");
const app = express();
/* Dependencies */
// Middleware
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
const cors = require("cors");
app.use(cors());
/* Initialize the main project folder */
app.use(express.static("website"));
/* Create server */
const port = 8000;
app.listen(port, listening);
function listening() {
console.log(`Server running on port ${port}`);
};
/* GET route */
app.get("/all", returnData);
function returnData(req, res) {
res.send(projectData);
};
/* POST route */
const data = [];
app.post("/addData", addData);
function addData(req, res) {
let newData = request.body;
let newEntry = {
temp: newData.temp,
date: newData.date,
content: newData.content,
}
data.push(newEntry);
};
On the client side:
/* Asynchronous POST */
const postData = async (url = "", data = {}) => {
console.log(data);
const response = await fetch(url, {
method: "POST",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
try {
const newData = await response.json();
console.log(newData);
return newData;
} catch(error) {
console.log("error", error);
}
}
/* API Acquisition */
const zipCode = document.getElementById("zip").value;
const userResponse = document.getElementById("feelings").value;
const apiKey = "4c603ee35d9242056474d3fbf69afec3";
const baseURL = `https://api.openweathermap.org/data/2.5/weather?zip=${zipCode},&appid=${apiKey}`;
let d = new Date();
let getDate = d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear();
const getGenerate = document.getElementById("generate");
getGenerate.addEventListener("click", retrieveData);
/* GET request to API */
const getWeatherData = async(baseURL, zipCode, apiKey) => {
const res = await fetch(baseURL + zipCode + apiKey);
try {
const data = await res.json();
console.log(data)
} catch(error) {
console.log("error", error);
}
}
/* Adding API & User Data */
function retrieveData(e) {
getWeatherData(baseURL, zipCode, apiKey)
.then(function(data) {
console.log(data);
postData("/addData",
{temp: temp, date: getDate, content: userResponse});
})
.then(
updateUI()
)
}
/* Updating UI */
const updateUI = async() => {
const request = await fetch("/all");
try {
const allData = await request.json();
console.log(allData);
document.getElementById("temp").innerHTML = allData[0].temp;
document.getElementById("date").innerHTML = allData[0].date;
document.getElementById("content").innerHTML = allData[0].userInput;
} catch(error) {
console.log("error", error);
}
};
HTML markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Journal</title>
<link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id ="app">
<div class="holder headline">Weather Journal App</div>
<div class="holder zipcode">
<label for="zc">Enter Zipcode here</label>
<input type="text" id="zip" placeholder="enter zip code here">
</div>
<div class="holder userresponse">
<label for="ur">How are you feeling today?</label>
<textarea class="myInput" id="feelings" placeholder="enter your feelings here" rows="9" cols="50"></textarea>
<button id="generate" type="submit">Generate</button>
</div>
<div class="holder entry">
<div class="title">Most Recent Entry</div>
<div id="entryHolder">
<div id="date"></div>
<div id="temp"></div>
<div id="content"></div>
</div>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
<script src="../server.js" type="text/javascript"></script>
</body>
</html>