diff --git a/.gitignore b/.gitignore index 6704566..999f9ee 100644 --- 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 new file mode 100644 index 0000000..7c8f2b6 --- /dev/null +++ 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 = + `
+
+
+

Low ${sevenDayMin}\xB0F

+

High ${sevenDayMax}\xB0F

+
` + div.innerHTML = divInnerHtml; + forecastDisplay.appendChild(div); + } + } + } + sevenDay.send(); + } +}; +client.send(); diff --git a/index.html b/index.html index 3233671..7f29df3 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,30 @@ - Document + + + Weather App -

Hola Mundo

+
+
+

weatherApp

+
+
+

+

+
+
+ + + +
+
+ +
+
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1360c1b --- /dev/null +++ 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%; +} */