object shorthand notation

iamshaunjp · Evelyn-ZYW · Jul 24, 2021 · Jul 27, 2021 · Jul 28, 2021 · Jul 30, 2021
commit e0ee6fde0c3dc9c3a75648ab829bda5272f1d0d4
diff --git a/chapter_13_weather_app/index.html b/chapter_13_weather_app/index.html
@@ -0,0 +1,47 @@
+<!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" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Weather App</title>
+  </head>
+  <body>
+
+    <div class="container my-5 mx-auto">
+
+      <h1 class="text-muted text-center my-4">NinjaWeather</h1>
+
+      <form class="change-location my-4 text-center text-muted">
+        <label for="city">Enter a location for weather information</label>
+        <input type="text" name="city" class="form-control p-4">
+      </form>
+
+      <div class="card shadow-lg rounded">
+        <img src="https://via.placeholder.com/400x300" class="time card-img-top" alt="">
+        <div class="icon bg-light mx-auto text-center">
+
+        </div>
+        <div class="text-muted text-uppercase text-center details">
+          <h5 class="my-3">City name</h5>
+          <div class="my-3">Weather Condition</div>
+          <div class="display-4 my-4">
+            <span>temp</span>
+            <span>&deg;C</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <script src="scripts/forecast.js"></script>
+    <script src="scripts/app.js"></script>
+  </body>
+</html>
diff --git a/chapter_13_weather_app/sandbox.js b/chapter_13_weather_app/sandbox.js
@@ -0,0 +1,10 @@
+console.log(1)
+console.log(2)
+
+//This is asynchronous code in action. In this case we are not fetching data from a database, this is just wait in two seconds to emulate that request and then we are firing the console log.
+setTimeout(()=>{
+  console.log('callback function fired')
+}, 2000)
+
+console.log(3)
+console.log(4)
diff --git a/chapter_13_weather_app/scripts/app.js b/chapter_13_weather_app/scripts/app.js
@@ -0,0 +1,33 @@
+//DOM manipulation in this document - show things on the page
+
+const cityForm = document.querySelector('form');
+
+const updateCity = async (city) => {
+
+  // console.log(city)
+
+  const cityDetails = await getCity(city);
+  const weather = await getWeather(cityDetails.Key);
+
+  // return {
+  //   cityDetails: cityDetails,
+  //   weather: weather
+  // }
+
+  //object shorthand notation - when we have a property name and a value that are exactly the same name.
+  return { cityDetails, weather }
+}
+
+cityForm.addEventListener('submit', e=>{
+  //prevent default action
+  e.preventDefault();
+
+  //get city value (user input)
+  const city = cityForm.city.value.trim();
+  cityForm.reset();
+
+  //update the ui with new city
+  updateCity(city)
+    .then(data => console.log(data))
+    .catch(err => console.log(err))
+})
diff --git a/chapter_13_weather_app/scripts/forecast.js b/chapter_13_weather_app/scripts/forecast.js
@@ -0,0 +1,41 @@
+//this document contains all of the JavaScript that will be responsible for interacting with the weather API and getting data
+
+// this is the end point to the accuWeather API
+const key = 'RjKdmCGXOVfvKql2HIhD8aEGQkaKB2Bv'; 
+
+//when we're requesting data from the end point to this API, we're going to have to do two different things:
+//1. we need to make a request to a certain end point to get city information(a city code)
+//2. use that city code to make a second request to a weather conditions API end point. We're going to send that city code to it so it can identify where we want to get the weather and it will send us the weather conditions back for that area.
+
+//get weather information
+const getWeather = async (id) => {
+  const base = 'http://dataservice.accuweather.com/currentconditions/v1/';
+  const query = `${id}?apikey=${key}`;
+
+  const response = await fetch(base + query);
+  const data = await response.json();
+
+  // console.log(data)
+  return data;
+}
+
+//get city information
+const getCity = async (city) => {
+  const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
+  const query = `?apikey=${key}&q=${city}`;
+
+  const response = await fetch(base + query);
+  const data = await response.json();
+
+  // console.log(data)
+  return data[1];
+}
+
+//
+getCity('richmond')
+  .then(data => {
+  //we want to take the data and get the Key(city code), and pass it into a get weather request - getWeather(). We return a promise by returning the whole thing, so we can chain these things together.  
+    return getWeather(data.Key)})
+  .then(data => {
+    console.log(data)})
+  .catch(err => console.log(err))
diff --git a/chapter_13_weather_app/styles.css b/chapter_13_weather_app/styles.css
@@ -0,0 +1,8 @@
+body{
+  background: #eeedec;
+  letter-spacing: 0.2em;
+  font-size: 0.8em;
+}
+.container{
+  max-width: 400px;
+}