code-differently · ezotic · Jan 31, 2021 · Jan 31, 2021 · Feb 1, 2021 · Feb 1, 2021
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,10 @@ dist
 
 # TernJS port file
 .tern-port
+
+# API Key
+.apiKey
+
+#VS Code
+.vscode
+
diff --git a/app.js b/app.js
@@ -0,0 +1,68 @@
+const locationDisplay = document.querySelector('#location');
+const weatherDisplay = document.querySelector('#weather');
+const forecastDisplay= document.querySelector('#sevenDay');
+// const userZip = prompt("Enter your Zipcode");
+const userZip = 19720;
+// const userZip = document.querySelector('input').value;
+const userLink = `http://api.zippopotam.us/us/${userZip}`;
+
+console.log(userZip)
+
+
+function convertTemp(weatherLink) {
+    const celsius = weatherLink -273;
+    const fahrenheit = Math.floor(celsius * (9/5) + 32);
+    return fahrenheit;
+}
+
+const client = new XMLHttpRequest();
+    client.open("GET", userLink, true);
+    client.onreadystatechange = function() {
+	if(client.readyState == 4 && client.status === 200) {
+
+        const zipData = JSON.parse(client.responseText);
+        locationDisplay.innerHTML = `
+            ${zipData.places[0]['place name']}, ${zipData.places[0]['state abbreviation']}
+        `;
+
+        userLon = `${zipData.places[0].longitude}`;
+        userLat = `${zipData.places[0].latitude}`;
+
+        const weatherLink = `https://api.openweathermap.org/data/2.5/onecall?lat=${userLat}&lon=${userLon}&exclude=minutely,hourly&appid=${apikey}`;
+
+        const sevenTimer = new XMLHttpRequest();
+        sevenTimer.open("GET", weatherLink, true);
+        sevenTimer.onreadystatechange = () => {
+            if(sevenTimer.readyState == 4 && sevenTimer.status === 200) {
+                const weatherData = JSON.parse(sevenTimer.responseText);
+                const currentTemp = convertTemp(weatherData.current.temp);
+                weatherDisplay.innerHTML = `${currentTemp}\xB0F`;
+            }
+        }
+        sevenTimer.send();
+
+        const sevenDay = new XMLHttpRequest();
+        sevenDay.open("GET", weatherLink, true);
+        sevenDay.onreadystatechange = () => {
+            if(sevenDay.readyState == 4 && sevenDay.status === 200) {
+                const weatherData = JSON.parse(sevenDay.responseText);
+                for(let i = 0; i <= 7; i++){
+                    const sevenDayMin = convertTemp(weatherData.daily[i].temp.min);
+                    const sevenDayMax = convertTemp(weatherData.daily[i].temp.max);
+                    const div = document.createElement('div');
+                    const divInnerHtml = 
+                    `<div class="card">  
+                    <div class="container">
+                    <div class="row">
+                      <h4 class="pName">Low ${sevenDayMin}\xB0F</h4>    
+                      <h4 class="pNum">High ${sevenDayMax}\xB0F</h4>
+                    </div>`
+                    div.innerHTML = divInnerHtml;
+                    forecastDisplay.appendChild(div);
+                    }
+                }
+            }
+        sevenDay.send();
+	}
+};  
+client.send();
diff --git a/index.html b/index.html
@@ -3,9 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src=".apikey/apikey.js"></script>
+    <title>Weather App</title>
 </head>
 <body>
-    <h1>Hola Mundo</h1>
+    <div class="container">
+        <div class="column">
+            <h1>weatherApp</h1>
+        </div>    
+        <div class="column">
+            <h2 id="location"></h2>
+            <h2 id="weather"></h1>
+        </div>
+        <div>
+            <label>Enter ZIP Code: </label>
+            <input type="text" id="zipCode" pattern="[0-9]{5}" title="Five digit zip code" />
+            <button>Select</button>
+        </div>
+        <div class="column">
+
+            <div id="sevenDay" class="container col"></div>
+        </div>
+    </div>
 </body>
+
+<script src="app.js"></script>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,105 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box
+}
+
+.column {
+    margin: 1rem;
+    padding: 2px;
+}
+
+h1 {
+    text-shadow: 0 1px 0 #ccc,
+                 0 2px 0 #c9c9c9,
+                 0 3px 0 #bbb,
+                 0 4px 0 #b9b9b9,
+                 0 5px 0 #aaa,
+                 0 6px 1px rgba(0,0,0,.1),
+                 0 0 5px rgba(0,0,0,.1),
+                 0 1px 3px rgba(0,0,0,.3),
+                 0 3px 5px rgba(0,0,0,.2),
+                 0 5px 10px rgba(0,0,0,.25),
+                 0 10px 10px rgba(0,0,0,.2),
+                 0 20px 20px rgba(0,0,0,.15);
+}
+
+h2 {
+    margin-top: 1rem;
+    margin-left: 2rem;
+}
+
+h2#weather {
+    float: right;
+    position: absolute;
+    top: 20px;
+    right: 40px;
+    text-shadow: 0 1px 0 #ccc,
+                 0 2px 0 #c9c9c9,
+                 0 3px 0 #bbb,
+                 0 4px 0 #b9b9b9,
+                 0 5px 0 #aaa,
+                 0 6px 1px rgba(0,0,0,.1),
+                 0 0 5px rgba(0,0,0,.1),
+                 0 1px 3px rgba(0,0,0,.3),
+                 0 3px 5px rgba(0,0,0,.2),
+                 0 5px 10px rgba(0,0,0,.25),
+                 0 10px 10px rgba(0,0,0,.2),
+                 0 20px 20px rgba(0,0,0,.15);
+}
+
+label {
+    display: block;
+    font: 1rem 'Fira Sans', sans-serif;
+}
+
+input,
+label {
+    margin: .4rem 0;
+}
+
+.container {
+    display: grid;
+    margin:1rem;
+    justify-content: space-evenly;
+    grid-gap: 1.5rem;
+}
+
+.col {
+    grid-template-columns: auto auto auto auto;
+}
+
+
+/* Card Properties */
+.card {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5);
+    padding: 1rem;
+    border-style:solid;
+    border-radius:0%;
+}
+
+h4.pName {
+    display: float;
+    float: left;
+    padding-right: 2rem;
+    font-weight: bold;
+}
+
+h4.pNum {
+    display: float;
+    float: right;
+    padding-left: 2rem;
+    font-weight: bold;  
+}
+
+img {
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 12rem;
+}
+
+/* .line {
+    height: 1.75rem;
+    border-bottom: .1rem inset lightgrey;
+    border-bottom-width: 90%;
+} */