feat: completed app

server.js now serves local API server with GET and POST endpoints.

app.js now performs intended front-end functionality, including getting
weather data , storing user input on the local server and updating the UI

made small changes in index.html and style.css to fit front-end to purpose
(also added additional user input form)

config.js

@@ -0,0 +1,2 @@
+exports.port = process.env.PORT || 5001;
+exports.origin = process.env.ORIGIN || `http://localhost:${exports.port}`

package.json

@@ -6,7 +6,8 @@
   "dependencies": {
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
-    "express": "^4.17.1"
+    "express": "^4.17.1",
+    "node-fetch": "^2.6.0"
   },
   "devDependencies": {},
   "scripts": {

server.js

@@ -2,18 +2,49 @@
 projectData = {};
 
 // Require Express to run server and routes
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const config = require('./config');
+
 
 // Start up an instance of app
+const app = express();
 
 /* Middleware*/
 //Here we are configuring express to use body-parser as middle-ware.
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(bodyParser.json());
 
 // Cors for cross origin allowance
+app.use(cors());
 
 // Initialize the main project folder
 app.use(express.static('website'));
 
+app.get('/get', (req, res) => {
+  res.status(200).send(projectData);
+})
+
+app.post('/post', bodyParser.json(), (req, res) => {
+  const { temperature, date, userResponse } = req.body;
+
+  if (temperature && date && userResponse) {
+    projectData = {
+      temperature,
+      date,
+      userResponse
+    }
+    res.status(202).send();
+  } else {
+    res.status(403).send({
+      error: 'Invalid data provided. Please provide temperature, date and userResponse data'
+    })
+  }
+})
+
 
-// Setup Server
+// Setup Server
+app.listen(config.port, () => {
+  console.log('Server is running on port %s - press Crtl+C to terminate', config.port)
+})

website/app.js

@@ -1,5 +1,54 @@
 /* Global Variables */
+const baseURL = 'http://api.openweathermap.org/data/2.5/weather';
+const key = '&APPID=';
+const keyValue = 'b6c2e555f36966be6615e36144ea6610';
+const localURL = 'http://localhost';
+const port = 5001;
 
-// Create a new date instance dynamically with JS
 let d = new Date();
-let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();
+let month = d.getMonth() + 1;
+let newDate = d.getDate() + '/' + month + '/' + d.getFullYear();
+
+
+/* Functions */
+
+// GET call to obtain weather data with user-provided zip code and country code
+const getWeather = async (zip, country) => {
+  const url = baseURL + '?zip=' + zip + ',' + country + key + keyValue;
+  return await fetch(url).then(response => response.json()).then(response => response.main.temp);
+}
+
+// POST call to send user data from forms to own API server
+const postUserData = async (temperature, date, userResponse) => {
+  fetch(localURL + ':' + port + '/post', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({temperature, date, userResponse})
+  })
+}
+
+// GET call to obtain current project data object
+const getCurrentData = async () => {
+  return await fetch(localURL + ':' + port + '/get').then(response => response.json())
+}
+
+
+/* Execution */
+
+// Adding click EventListener to "Generate" button in HTML
+
+document.getElementById('generate').addEventListener('click', async () => {
+  const country = document.getElementById('country').value;
+  const zip = document.getElementById('zip').value;
+  const userResponse = document.getElementById('feelings').value;
+  const temperature = await getWeather(zip, country);
+  await postUserData(temperature, newDate, userResponse);
+  await getCurrentData()
+  .then((response) => {
+    document.getElementById('date').innerText = response.date,
+    document.getElementById('temp').innerText = response.temperature,
+    document.getElementById('content').innerText = response.userResponse
+  });
+})

website/index.html

@@ -1,35 +1,52 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="UTF-8">
-<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 zip">
-    <label for="zip">Enter Zipcode here</label>
-    <input type="text" id="zip" placeholder="enter zip code here">
-  </div>
-  <div class ="holder feel">
-    <label for="feelings">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>
+  <head>
+    <meta charset="UTF-8">
+    <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>
+
+      <section class='holders2'>
+        <div class ="holder-country">
+          <label for="country">Enter country code here</label>
+          <input type="text" id="country" placeholder="enter country code here">
+        </div>
+
+        <div class ="holder zip">
+          <label for="zip">Enter Zipcode here</label>
+          <input type="text" id="zip" placeholder="enter zip code here">
+        </div>
+      </section>
+
+      <div class ="holder feel">
+        <label for="feelings">How are you feeling today?</label>
+        <textarea class= "myInput" id="feelings" placeholder="Enter your feelings here" rows="3" 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>
 
-</body>
+  </body>
 </html>

website/style.css

@@ -16,37 +16,21 @@ body{
     font-family: 'Oswald', sans-serif;
 }
 
-.holder{
+.holders2{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: top;
+}
 
+.holder-country {
+    margin-right: 10vw;
 }
 
 .entry{
     background: rgba(59, 74, 107, .4);
 }
 
-#entryHolder{
-
-}
-
-#date{
-
-}
-
-#temp{
-
-}
-
-#content{
-
-}
-
-.headline {
-
-}
-.title{
-
-}
-
 /*  Basic Styling To Override Default For Basic HTML Elements */
 label{
     display:block;