From 1cab4b58b280c981f0b1fb4657b300312611d0e0 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Sun, 31 Jan 2021 17:55:18 -0500 Subject: [PATCH 01/13] Part 1 --- .vscode/settings.json | 3 +++ apiKey/key | 3 +++ css/styles.css | 0 index.html | 17 ++++++++++++++--- js/app.js | 32 ++++++++++++++++++++++++++++++++ 5 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 apiKey/key create mode 100644 css/styles.css create mode 100644 js/app.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/apiKey/key b/apiKey/key new file mode 100644 index 0000000..9894a18 --- /dev/null +++ b/apiKey/key @@ -0,0 +1,3 @@ +let apiKey = "dcf230f9ec9de3db7414b60015a4b1bf"; + +https://api.openweathermap.org/data/2.5/onecall?lat=39.5929&lon=-75.6515&exclude=hourly,daily&appid=dcf230f9ec9de3db7414b60015a4b1bf \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 3233671..4861bd0 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,20 @@ - Document + + Weather App -

Hola Mundo

+
+

+
+ +

+
+
- \ No newline at end of file + + + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..7700e6e --- /dev/null +++ b/js/app.js @@ -0,0 +1,32 @@ +const dom = document.querySelector(".placeName"); +const userZip = prompt("Enter Your Zip Code"); +const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); +const wLoc = 'https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf'; + +let longitude = 0.0; +let latitude = 0.0; + +var client = new XMLHttpRequest(); + +client.open("GET", userLink,); +client.onreadystatechange = function() { + if(client.readyState == 4) { + }; + + if(client.readyState == 4 && client.status === 200) { + let zipData = JSON.parse(client.responseText); + const {places: + [{"place name": placeName, state: state, latitude: lat, longitude: lon}] + } = zipData; + dom.textContent = placeName + ", " + state; + let request = client.open("GET", "wLoc"); + // console.log(request); + } +} + + +// http://www.7timer.info/bin/api.pl?lon=39.5929&lat=-75.6515&product=civil&output=json +// http://www.7timer.info/bin/api.pl?lon=39.5929&lat=-75.6515&product=civillight&output=json +// -75.6515 39.5929 + +client.send(); \ No newline at end of file From a76453ff1480f927a2f2834b6123a5e75c95fea6 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Sun, 31 Jan 2021 17:56:49 -0500 Subject: [PATCH 02/13] gitignore apikey --- .gitignore | 3 +++ apiKey/key | 3 --- 2 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 apiKey/key diff --git a/.gitignore b/.gitignore index 6704566..8799ee1 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,6 @@ dist # TernJS port file .tern-port + +# API Key +.apiKey diff --git a/apiKey/key b/apiKey/key deleted file mode 100644 index 9894a18..0000000 --- a/apiKey/key +++ /dev/null @@ -1,3 +0,0 @@ -let apiKey = "dcf230f9ec9de3db7414b60015a4b1bf"; - -https://api.openweathermap.org/data/2.5/onecall?lat=39.5929&lon=-75.6515&exclude=hourly,daily&appid=dcf230f9ec9de3db7414b60015a4b1bf \ No newline at end of file From fba4a46aeebf7c509cbc5cbaef0b353b31c85466 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Sun, 31 Jan 2021 23:57:38 -0500 Subject: [PATCH 03/13] 27 degrees, working to resolve --- js/app.js | 51 ++++++++++++++++++++++++++++++--------------------- js/app1.js | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+), 21 deletions(-) create mode 100644 js/app1.js diff --git a/js/app.js b/js/app.js index 7700e6e..00d3423 100644 --- a/js/app.js +++ b/js/app.js @@ -1,32 +1,41 @@ -const dom = document.querySelector(".placeName"); -const userZip = prompt("Enter Your Zip Code"); +const locationDisplay = document.getElementById('location'); +const weatherDisplay = document.getElementById('weather'); + +const userZip = prompt("What's your ZIP Code?"); const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); -const wLoc = 'https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf'; +let userLon; +let userLat; +const weatherLink = 'http://www.7timer.info/bin/api.pl?output=json&product=civillight&lon=' + userLon + '&lat=' + userLat; -let longitude = 0.0; -let latitude = 0.0; +// http://www.7timer.info/bin/api.pl?output=json&product=civillight&lon=39.5929&lat=-75.6515 var client = new XMLHttpRequest(); -client.open("GET", userLink,); +client.open("GET", userLink, true); client.onreadystatechange = function() { - if(client.readyState == 4) { - }; - - if(client.readyState == 4 && client.status === 200) { + if(client.readyState == 4 && client.status === 200) { + let zipData = JSON.parse(client.responseText); - const {places: - [{"place name": placeName, state: state, latitude: lat, longitude: lon}] - } = zipData; - dom.textContent = placeName + ", " + state; - let request = client.open("GET", "wLoc"); - // console.log(request); - } -} + locationDisplay.innerHTML += ` +

${zipData.places[0]['place name']}, ${zipData.places[0]['state abbreviation']}

+ `; + userLon = `${zipData.places[0].longitude}`; + userLat = `${zipData.places[0].latitude}`; -// http://www.7timer.info/bin/api.pl?lon=39.5929&lat=-75.6515&product=civil&output=json -// http://www.7timer.info/bin/api.pl?lon=39.5929&lat=-75.6515&product=civillight&output=json -// -75.6515 39.5929 + let sevenTimer = new XMLHttpRequest(); + sevenTimer.open("GET", weatherLink, true); + sevenTimer.onreadystatechange = function() { + if(sevenTimer.readyState == 4 && client.status === 200) { + let weatherData = JSON.parse(sevenTimer.responseText); + console.log(weatherData); + weatherDisplay.innerHTML += ` + ${weatherData.dataseries[0].temp2m.max}° + `; + } + } + sevenTimer.send(); + } +}; client.send(); \ No newline at end of file diff --git a/js/app1.js b/js/app1.js new file mode 100644 index 0000000..7b92b68 --- /dev/null +++ b/js/app1.js @@ -0,0 +1,35 @@ +const dom = document.querySelector(".placeName"); +const curentWeatherDev = document.querySelector('.currentWeather'); +const userZip = prompt("Enter Your Zip Code"); +const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); +const wLoc = 'https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf'; + +var client = new XMLHttpRequest(); + +let longitude = 0.0; +let latitude = 0.0; + +client.open("GET", userLink,); +client.onreadystatechange = function() { + if(client.readyState == 4 && client.status === 200) { + let zipData = JSON.parse(client.responseText); + // let lonData = + const {places: + [{"place name": city, state: state, latitude: lat, longitude: lon}] + } = zipData; + dom.textContent = city + ", " + state; + let request = client.open("GET", "wLoc"); + console.log(lon + " " + lat); + console.log(zipData); + + } +} +client.send(); + + + + + +// https://api.openweathermap.org/data/2.5/onecall?lat=39.5929&lon=-75.6515&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf +// -75.6515 39.5929 + From 755b89b2bc5a935c8b13b6b09ef809d168974c59 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Sun, 31 Jan 2021 23:59:54 -0500 Subject: [PATCH 04/13] 27 degrees issues, working to resolve --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 8799ee1..999f9ee 100644 --- a/.gitignore +++ b/.gitignore @@ -105,3 +105,7 @@ dist # API Key .apiKey + +#VS Code +.vscode + From 16d895d3e1bc9c65511f082c70848e1b5589ca4c Mon Sep 17 00:00:00 2001 From: earlSmith Date: Mon, 1 Feb 2021 00:00:23 -0500 Subject: [PATCH 05/13] Delete .vscode directory --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6f3a291..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file From 160d3061d5e321494d86afa2a82e5550b48a2003 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Tue, 2 Feb 2021 02:30:56 -0500 Subject: [PATCH 06/13] added cel to fah converter --- css/styles.css | 25 +++++++++++++++++++++++++ index.html | 19 +++++++++---------- js/app.js | 25 +++++++++++++++---------- 3 files changed, 49 insertions(+), 20 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29..8625d33 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,25 @@ + + + +#weather { + float: right; + position: absolute; + top: 20px; + right: 40px; + border: 30px; +} + +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); + } \ No newline at end of file diff --git a/index.html b/index.html index 4861bd0..04dd756 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,19 @@ - + Weather App -
-

-
- -

-
+

Weather

+
+

+
+ +
+

- - - + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 00d3423..b3eec91 100644 --- a/js/app.js +++ b/js/app.js @@ -3,13 +3,18 @@ const weatherDisplay = document.getElementById('weather'); const userZip = prompt("What's your ZIP Code?"); const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); + let userLon; let userLat; -const weatherLink = 'http://www.7timer.info/bin/api.pl?output=json&product=civillight&lon=' + userLon + '&lat=' + userLat; -// http://www.7timer.info/bin/api.pl?output=json&product=civillight&lon=39.5929&lat=-75.6515 +// Convert cTof +function convertTemp(weatherLink) { + const celsius = weatherLink -273; + let fahrenheit = Math.floor(celsius * (9/5) + 32); + return fahrenheit; +} -var client = new XMLHttpRequest(); +let client = new XMLHttpRequest(); client.open("GET", userLink, true); client.onreadystatechange = function() { @@ -19,23 +24,23 @@ client.onreadystatechange = function() { 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=dcf230f9ec9de3db7414b60015a4b1bf`; + let sevenTimer = new XMLHttpRequest(); sevenTimer.open("GET", weatherLink, true); sevenTimer.onreadystatechange = function() { - if(sevenTimer.readyState == 4 && client.status === 200) { + + if(sevenTimer.readyState == 4 && sevenTimer.status === 200) { let weatherData = JSON.parse(sevenTimer.responseText); - console.log(weatherData); - weatherDisplay.innerHTML += ` - ${weatherData.dataseries[0].temp2m.max}° - `; + let currentTemp = convertTemp(weatherData.current.temp); + weatherDisplay.innerHTML += `${currentTemp}`+ ' \xB0F'; } } sevenTimer.send(); } }; - client.send(); \ No newline at end of file From 8aaace8dda76efb76d975962da51b95a824d9358 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Tue, 2 Feb 2021 03:14:14 -0500 Subject: [PATCH 07/13] css changes --- css/styles.css | 21 +++++++++++++++++---- index.html | 15 ++++++++------- js/app.js | 10 +++------- js/app1.js | 35 ----------------------------------- 4 files changed, 28 insertions(+), 53 deletions(-) delete mode 100644 js/app1.js diff --git a/css/styles.css b/css/styles.css index 8625d33..a6320f1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1,12 +1,14 @@ - - +* { + margin: 0; + padding: 0; + box-sizing: border-box +} #weather { float: right; position: absolute; top: 20px; right: 40px; - border: 30px; } h1 { @@ -22,4 +24,15 @@ h1 { 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); - } \ No newline at end of file + } + +h3 { + margin-top: 1rem; + margin-left: 2rem; + +} + +.column { + margin: 1rem; + padding: 2px; +} \ No newline at end of file diff --git a/index.html b/index.html index 04dd756..0c9e1d7 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,14 @@ Weather App -

Weather

-
-

-
- -
-

+
+
+

Weather

+
+
+

+

+
diff --git a/js/app.js b/js/app.js index b3eec91..94405df 100644 --- a/js/app.js +++ b/js/app.js @@ -1,13 +1,9 @@ const locationDisplay = document.getElementById('location'); const weatherDisplay = document.getElementById('weather'); -const userZip = prompt("What's your ZIP Code?"); +const userZip = prompt("Enter your Zipcode"); const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); -let userLon; -let userLat; - -// Convert cTof function convertTemp(weatherLink) { const celsius = weatherLink -273; let fahrenheit = Math.floor(celsius * (9/5) + 32); @@ -28,7 +24,7 @@ client.onreadystatechange = function() { 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=dcf230f9ec9de3db7414b60015a4b1bf`; + const weatherLink = `https://api.openweathermap.org/data/2.5/onecall?lat=${userLat}&lon=${userLon}&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf`; let sevenTimer = new XMLHttpRequest(); sevenTimer.open("GET", weatherLink, true); @@ -43,4 +39,4 @@ client.onreadystatechange = function() { sevenTimer.send(); } }; -client.send(); \ No newline at end of file +client.send(); diff --git a/js/app1.js b/js/app1.js deleted file mode 100644 index 7b92b68..0000000 --- a/js/app1.js +++ /dev/null @@ -1,35 +0,0 @@ -const dom = document.querySelector(".placeName"); -const curentWeatherDev = document.querySelector('.currentWeather'); -const userZip = prompt("Enter Your Zip Code"); -const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); -const wLoc = 'https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf'; - -var client = new XMLHttpRequest(); - -let longitude = 0.0; -let latitude = 0.0; - -client.open("GET", userLink,); -client.onreadystatechange = function() { - if(client.readyState == 4 && client.status === 200) { - let zipData = JSON.parse(client.responseText); - // let lonData = - const {places: - [{"place name": city, state: state, latitude: lat, longitude: lon}] - } = zipData; - dom.textContent = city + ", " + state; - let request = client.open("GET", "wLoc"); - console.log(lon + " " + lat); - console.log(zipData); - - } -} -client.send(); - - - - - -// https://api.openweathermap.org/data/2.5/onecall?lat=39.5929&lon=-75.6515&exclude=minutely,hourly&appid=dcf230f9ec9de3db7414b60015a4b1bf -// -75.6515 39.5929 - From a2c34b02a6eaf6799d707a62319ce8be0034bdcd Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Tue, 2 Feb 2021 17:05:33 -0500 Subject: [PATCH 08/13] fixed html --- index.html | 5 ++++- js/app.js | 11 +++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0c9e1d7..4eec32a 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,12 @@

Weather

-

+

+
+

+
diff --git a/js/app.js b/js/app.js index 94405df..e051458 100644 --- a/js/app.js +++ b/js/app.js @@ -1,6 +1,6 @@ const locationDisplay = document.getElementById('location'); const weatherDisplay = document.getElementById('weather'); - +const forecastDisaply= document.getElementById('sevenDay'); const userZip = prompt("Enter your Zipcode"); const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); @@ -11,14 +11,13 @@ function convertTemp(weatherLink) { } let client = new XMLHttpRequest(); - -client.open("GET", userLink, true); -client.onreadystatechange = function() { + client.open("GET", userLink, true); + client.onreadystatechange = function() { if(client.readyState == 4 && client.status === 200) { let zipData = JSON.parse(client.responseText); locationDisplay.innerHTML += ` -

${zipData.places[0]['place name']}, ${zipData.places[0]['state abbreviation']}

+ ${zipData.places[0]['place name']}, ${zipData.places[0]['state abbreviation']} `; userLon = `${zipData.places[0].longitude}`; @@ -39,4 +38,4 @@ client.onreadystatechange = function() { sevenTimer.send(); } }; -client.send(); +client.send(); \ No newline at end of file From 551f2f21478a4bf1cdfa57fdbd14fdaea6011dd3 Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Tue, 2 Feb 2021 17:07:10 -0500 Subject: [PATCH 09/13] css changes --- css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/styles.css b/css/styles.css index a6320f1..d580fe9 100644 --- a/css/styles.css +++ b/css/styles.css @@ -26,7 +26,7 @@ h1 { 0 20px 20px rgba(0,0,0,.15); } -h3 { +h2 { margin-top: 1rem; margin-left: 2rem; From df84659fd50379781e8fc2b456fac0a85871ee1b Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Tue, 2 Feb 2021 17:14:31 -0500 Subject: [PATCH 10/13] css changes --- js/app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index e051458..b6cc1ef 100644 --- a/js/app.js +++ b/js/app.js @@ -27,8 +27,7 @@ let client = new XMLHttpRequest(); let sevenTimer = new XMLHttpRequest(); sevenTimer.open("GET", weatherLink, true); - sevenTimer.onreadystatechange = function() { - + sevenTimer.onreadystatechange = function() {19720 if(sevenTimer.readyState == 4 && sevenTimer.status === 200) { let weatherData = JSON.parse(sevenTimer.responseText); let currentTemp = convertTemp(weatherData.current.temp); From 85c17f9d33f0f2a9ba51474c31f0cfcfe2c44525 Mon Sep 17 00:00:00 2001 From: ezotic Date: Thu, 11 Mar 2021 17:33:42 -0500 Subject: [PATCH 11/13] removed apikey --- js/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/app.js b/js/app.js index b6cc1ef..c3edbec 100644 --- a/js/app.js +++ b/js/app.js @@ -23,7 +23,7 @@ let client = new XMLHttpRequest(); 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=dcf230f9ec9de3db7414b60015a4b1bf`; + const weatherLink = `https://api.openweathermap.org/data/2.5/onecall?lat=${userLat}&lon=${userLon}&exclude=minutely,hourly&appid=${apikey}`; let sevenTimer = new XMLHttpRequest(); sevenTimer.open("GET", weatherLink, true); From d6abc85eb6033e730ac8a5372cfc203f487e3f4d Mon Sep 17 00:00:00 2001 From: "Earl M. Smith" Date: Sun, 27 Feb 2022 21:43:33 -0500 Subject: [PATCH 12/13] added 7 day +1 --- .apikey/apikey.js | 1 + app.js | 68 ++++++++++++++++++++++++++++++ css/styles.css | 38 ----------------- index.html | 17 +++++--- js/app.js | 40 ------------------ styles.css | 105 ++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 186 insertions(+), 83 deletions(-) create mode 100644 .apikey/apikey.js create mode 100644 app.js delete mode 100644 css/styles.css delete mode 100644 js/app.js create mode 100644 styles.css diff --git a/.apikey/apikey.js b/.apikey/apikey.js new file mode 100644 index 0000000..09677c1 --- /dev/null +++ b/.apikey/apikey.js @@ -0,0 +1 @@ +const apikey = "dcf230f9ec9de3db7414b60015a4b1bf" \ No newline at end of file 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/css/styles.css b/css/styles.css deleted file mode 100644 index d580fe9..0000000 --- a/css/styles.css +++ /dev/null @@ -1,38 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box -} - -#weather { - float: right; - position: absolute; - top: 20px; - right: 40px; -} - -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; - -} - -.column { - margin: 1rem; - padding: 2px; -} \ No newline at end of file diff --git a/index.html b/index.html index 4eec32a..7f29df3 100644 --- a/index.html +++ b/index.html @@ -3,23 +3,30 @@ - + + Weather App
-

Weather

+

weatherApp

-

+

+
+
+ + +
-

+ +
- + \ No newline at end of file diff --git a/js/app.js b/js/app.js deleted file mode 100644 index c3edbec..0000000 --- a/js/app.js +++ /dev/null @@ -1,40 +0,0 @@ -const locationDisplay = document.getElementById('location'); -const weatherDisplay = document.getElementById('weather'); -const forecastDisaply= document.getElementById('sevenDay'); -const userZip = prompt("Enter your Zipcode"); -const userLink = 'http://api.zippopotam.us/us/' + parseInt(userZip); - -function convertTemp(weatherLink) { - const celsius = weatherLink -273; - let fahrenheit = Math.floor(celsius * (9/5) + 32); - return fahrenheit; -} - -let client = new XMLHttpRequest(); - client.open("GET", userLink, true); - client.onreadystatechange = function() { - if(client.readyState == 4 && client.status === 200) { - - let 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}`; - - let sevenTimer = new XMLHttpRequest(); - sevenTimer.open("GET", weatherLink, true); - sevenTimer.onreadystatechange = function() {19720 - if(sevenTimer.readyState == 4 && sevenTimer.status === 200) { - let weatherData = JSON.parse(sevenTimer.responseText); - let currentTemp = convertTemp(weatherData.current.temp); - weatherDisplay.innerHTML += `${currentTemp}`+ ' \xB0F'; - } - } - sevenTimer.send(); - } -}; -client.send(); \ 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%; +} */ From dc23aaa1a6008a60710a608dc8bba13c48bba10c Mon Sep 17 00:00:00 2001 From: earlSmith Date: Sun, 27 Feb 2022 21:46:52 -0500 Subject: [PATCH 13/13] Delete apikey.js --- .apikey/apikey.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .apikey/apikey.js diff --git a/.apikey/apikey.js b/.apikey/apikey.js deleted file mode 100644 index 09677c1..0000000 --- a/.apikey/apikey.js +++ /dev/null @@ -1 +0,0 @@ -const apikey = "dcf230f9ec9de3db7414b60015a4b1bf" \ No newline at end of file