learnwithleon · dyarawilliams · Apr 3, 2021 · Apr 3, 2021 · Apr 3, 2021
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,47 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,109 @@
+
+/******************************************
+/* CSS
+/*******************************************/
+/* Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,700;1,400&display=swap');
+
+/* Box Model Hack */
+* {
+  box-sizing: border-box;
+}
+
+/******************************************
+/* LAYOUT
+/*******************************************/
+body {
+  padding-top: 2em;
+  font-family: 'Merriweather Sans', sans-serif;
+  background-color: rgb(232, 240, 254);
+}
+
+h1 {
+  padding-bottom: 1em;
+  text-align: center;
+  font-size: 2.5rem;
+}
+
+input {
+  display: block;
+  margin: 0 auto;
+  width: 60%;
+  border: 0;
+  border-bottom: 2px solid black;
+  outline: 0;
+  font-size: 1.3rem;
+  color: black;
+  padding: 7px 0;
+  background: transparent;
+  text-align: center;
+  font-family: inherit;
+}
+
+#btn-container {
+  padding: 0.5em;
+  text-align: center;
+}
+
+/******************************************
+/* ADDITIONAL STYLES
+/*******************************************/
+button {
+  text-transform: uppercase;
+  background: #B7490F;
+  font-family: inherit;
+  padding: 20px;
+  border-radius: 50px;
+  transition: all 0.4s ease 0s;
+}
+
+button:hover {
+  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
+  box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
+  transition: all 0.4s ease 0s;
+}
+
+#display {
+  height: 400px;
+  max-width: 70%;
+  margin: 1em auto;
+  border: 2px solid black;
+  border-radius: 10px;
+  padding: 3em;
+  text-align: left;
+  font-size: 1.3rem;
+  color: black;
+  letter-spacing: 3px;
+  background-image: linear-gradient(to bottom, #163C52 0%,#4F4F47 30%,#C5752D 60%,#B7490F 80%, #2F1107 100%);
+  background-position: center;
+  background-size: cover;
+}
+
+  /* 
+  RAIN
+  background-image: linear-gradient(to right top, #637c7b, #718e8c, #7ea09e, #8db2b0, #9bc5c3);
+
+  SUNNY
+  background-image: linear-gradient(to right top, #ff4e50, #ff713e, #ff932b, #ffb41d, #f9d423);
+
+  CLOUDY
+  background-image: linear-gradient(to right top, #63747c, #71858e, #7f96a0, #8da8b2, #9bbac5);
+}
+  */
+
+#mainInfo {
+  display: flex;
+  justify-content: space-between;
+  line-height: 30px;
+}
+
+#feelsLike {
+  padding-top: 2em;
+  text-align: center;
+}
+
+#maxmin {
+  display: flex;
+  padding-top: 2em;
+  justify-content: space-evenly;
+}
diff --git a/img/cloud.jpg b/img/cloud.jpg
diff --git a/img/clouds.gif b/img/clouds.gif
diff --git a/img/rain.gif b/img/rain.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!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">
+    <meta name="description" content="This is a example of an weather app using the Weather API">
+    <meta name="keywords" content="weather, app, api">
+    <title>Weather App</title>
+
+    <!-- external CSS link -->
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <h1>Weather App</h1>
+    <form>
+        <input type="text" id="locationInput" placeholder="Ex. City Name,State Code, Country Code ">
+    </form>
+
+    <div id="btn-container">
+        <button id="checkRecent">Check Recent</button>
+        <button id="clear">Clear</button>
+    </div>
+
+    <section id="display">
+        <div id="mainInfo">
+            <div>
+                <h2></h2>
+                <h3></h3>
+            </div>
+            <h4 id="condition"></h3>
+        </div>
+
+        <div id="feelsLike">
+            <h3 id="feel"></h3>
+        </div>
+
+
+        <div id=maxmin>
+            <h4 id="max"></h4>
+            <h4 id="min"></h4>
+        </div>
+    </section>
+
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,62 @@
+// Weather API (openweather.org)
+
+document.querySelector('#checkRecent').addEventListener('click', getFetch);
+document.querySelector('#clear').addEventListener('click', clear);
+
+function getFetch(){
+  let choice = document.querySelector('input').value
+
+  let url = `https://api.openweathermap.org/data/2.5/weather?q=${choice}&units=imperial&appid=1638e09ceeb9d3546d4469226c99a664`;
+
+  fetch(url)
+  .then(res => res.json()) // parse response as JSON
+  .then(data => {
+    console.log(data)
+
+    let loc = data.name
+    let currentTemp = `${data.main.temp}°F`;
+    let feelsLike = `Feels Like: ${data.main.feels_like}°F`
+    let maxTemp = `Max: ${data.main.temp_max}°F`;
+    let minTemp = `Min: ${data.main.temp_min}°F`;
+    let weatherCondition = data.weather[0].main; 
+
+    document.querySelector('h2').innerText = loc;
+    document.querySelector('h3').innerText = currentTemp;
+    document.querySelector('#condition').innerHTML = weatherCondition;
+
+    if(weatherCondition === 'Clear'){
+      document.querySelector('#display').style.backgroundImage = 'linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%)';
+    }
+    if(weatherCondition === 'Rain') {
+      document.querySelector('#display').style.backgroundImage = "url('img/rain.gif')";
+      document.querySelector('#display').style.color = 'white';
+    }
+    if(weatherCondition === 'Mist') {
+      document.querySelector('#display').style.backgroundColor = 'grey';
+    }
+    if(weatherCondition === 'Clouds') {
+      document.querySelector('#display').style.backgroundImage = "url('img/clouds.gif')";
+    }
+
+    document.querySelector('#feel').innerText = feelsLike;
+
+    document.querySelector('#max').innerText = maxTemp;
+    document.querySelector('#min').innerText = minTemp; 
+
+  })
+  .catch(err => {
+    console.log(`error ${err}`)
+  });
+}
+
+function clear(){
+  document.querySelector('form').reset()
+  document.querySelector('#display').style.backgroundImage = 'linear-gradient(to bottom, #163C52 0%,#4F4F47 30%,#C5752D 60%,#B7490F 80%, #2F1107 100%)';
+  document.querySelector('h2').innerText = '';
+  document.querySelector('h3').innerText = '';
+  document.querySelector('#condition').innerText = '';
+  document.querySelector('#feel').innerText = '';
+  document.querySelector('#max').innerText = '';
+  document.querySelector('#min').innerText = '';
+}
+