From c3edf66da3eaa17bdc4f91384d1bfadb9d6adeec Mon Sep 17 00:00:00 2001 From: Cristal Date: Wed, 7 Dec 2022 20:45:51 -0800 Subject: [PATCH 01/36] working on wave 02 --- index.html | 33 +++++++++++++++++++++++++++++++-- src/index.js | 1 + 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..5852b89fc 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,37 @@ Weather Report + - + src="./node_modules/axios/dist/axios.min.js" +
+
+

Temperature

+ πŸ”Ό + number + πŸ”½ + +
+
+
+
+

Sky

+ + + + + +
+
+ +
+
+

City

+ + +
+
- \ No newline at end of file + + diff --git a/src/index.js b/src/index.js index e69de29bb..ad9a93a7c 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +'use strict'; From 7ccba43772741e11b48739d4bf3ab6c0394c6d87 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Thu, 8 Dec 2022 13:38:54 -0500 Subject: [PATCH 02/36] finished html index --- index.html | 16 ++++++++++++++-- styles/index.css | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 5852b89fc..526b0a730 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,10 @@ Weather Report + - src="./node_modules/axios/dist/axios.min.js" +

Temperature

@@ -21,21 +22,32 @@

Temperature

Sky

+
+

City

- +
+ +
+

Weather Visual

+
+
🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚
+ +
+ diff --git a/styles/index.css b/styles/index.css index e69de29bb..5f626f3a7 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,40 @@ +body { + background-color: #cad0bd +} + + + +#temp{ + color: red, + color: orange + color: yellow + color: green + color: teal +} + + + +/* - the temperature number changes color +- the background of the temperature changes color */ + +/* +Depending on what temperature it is, a different landscape should appear on the page. + +These landscapes can be anything, as long as they are visual and noticeable to any instructors. For example, the landscapes can be: + +- A single image that appears +- ASCII art +- Text + +Changing landscapes should _replace_ the existing landscape. There should only be one visible landscape at a time. + +There must be at least four landscapes. + +Our solution uses the following ranges, which you may use if desired: + +| Temperature (F) | Landscape | +| --------------- | --------------------------------- | +| 80+ | `"🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚"` | +| 70-79 | `"🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"` | +| 60-69 | `"🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ"` | +| 59 or below | `"πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²"` | */ \ No newline at end of file From 6a5b7f55832e237edae52dc0a1a07764005e2d33 Mon Sep 17 00:00:00 2001 From: Cristal Date: Thu, 8 Dec 2022 13:07:10 -0800 Subject: [PATCH 03/36] added some js and css --- .gitignore | 3 +- index.html | 10 +++---- src/index.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/index.css | 13 ++++---- 4 files changed, 91 insertions(+), 12 deletions(-) diff --git a/.gitignore b/.gitignore index 31b153a9b..8ad729bbf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +.env \ No newline at end of file diff --git a/index.html b/index.html index 526b0a730..ee4b98863 100644 --- a/index.html +++ b/index.html @@ -12,10 +12,10 @@
-

Temperature

- πŸ”Ό - number - πŸ”½ +

Temperature

+ + 0 +
@@ -44,7 +44,7 @@

City

Weather Visual

-
🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚
+
🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_πŸ¦‚
diff --git a/src/index.js b/src/index.js index ad9a93a7c..d87d246fe 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,78 @@ 'use strict'; + +const { default: axios } = require("axios"); + +// State, city, temp, sky + +const state = { + city: 'Seattle', + lat: + long: + temp: +}; + + +const findLatAndLong = () => { +axios + .get('', + params: { + q: state.lat + }) + .then((response) => { + console.log(response.data); + state.lat = response.data[0].lat; + state.long = response.data[0].lon; + + +}; +const findWeather = () => { + axios + .get('https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&appid={WEATHER_API_KEY}',{ + params: { + lat: state.lat, + lon: state.long + }) + }; + + +// Increase/Decrease temperature +const increaseTemp = () => { + let count = 0; + count++; + const upButton = document.getElementById('up'); + const downButton = document.getElementById('down'); + let display = document.getElementById('tempNum'); + + upButton.addEventListener('click', function () { + count++; + display.textContent = count; + }); + downButton.addEventListener('click', function () { + count--; + display.textContent = count; + }); + // increaseTemp.addEventListener("click", incrementCount); +}; + +// const decreaseTemp = () => { +// i--; +// document.getElementById('down').value = i; +// } +// Temperature number and background changes depending on number + +// const tempColorChange = () => { + +// } + +// // Depending on what temperature it is, a different landscape should appear on the page. + +// const + +// // Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time. + +// // There must be at least four landscapes. + +// // Reset city button +// const resetCity = () => { +// formElement.reset() +// } diff --git a/styles/index.css b/styles/index.css index 5f626f3a7..8268f875e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -4,12 +4,13 @@ body { -#temp{ - color: red, - color: orange - color: yellow - color: green - color: teal +#temp { + background-color: rgb(205, 202, 104) ; + color: red; + color: orange; + color: yellow; + color: green; + color: teal; } From cdc18db3384bad8c1621e523988ac21cfde8b0f4 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 12:34:32 -0500 Subject: [PATCH 04/36] updated 4 boxes still need to float on 2 x 2 matrix --- index.html | 11 ++++--- src/index.js | 82 +++++++++++++++++++++++++++++++++--------------- styles/index.css | 57 +++++++++++++++++---------------- 3 files changed, 92 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index ee4b98863..2a67a074f 100644 --- a/index.html +++ b/index.html @@ -9,19 +9,22 @@ +

WEATHER CHANNEL

+

🌳 Weather for the City of Seattle πŸƒ

-

Temperature

+

Temperature

0
+
-

Sky

+

Sky

@@ -49,5 +52,5 @@

Weather Visual

- + diff --git a/src/index.js b/src/index.js index d87d246fe..0c65598bb 100644 --- a/src/index.js +++ b/src/index.js @@ -6,25 +6,27 @@ const { default: axios } = require("axios"); const state = { city: 'Seattle', - lat: - long: - temp: + lat: 47.6038321, + long: -122.3300624, + temp: 50 }; const findLatAndLong = () => { axios - .get('', - params: { - q: state.lat + .get('', + params: { + key: process.env['LOCATION_API_KEY'], + q: state.lat, + format: 'json', }) .then((response) => { console.log(response.data); state.lat = response.data[0].lat; state.long = response.data[0].lon; - - + } }; + const findWeather = () => { axios .get('https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&appid={WEATHER_API_KEY}',{ @@ -34,25 +36,55 @@ const findWeather = () => { }) }; + const increaseTemp = () => { + state.temp += 1; + formatTempAndGarden(); + }; // Increase/Decrease temperature -const increaseTemp = () => { - let count = 0; - count++; - const upButton = document.getElementById('up'); - const downButton = document.getElementById('down'); - let display = document.getElementById('tempNum'); - - upButton.addEventListener('click', function () { - count++; - display.textContent = count; - }); - downButton.addEventListener('click', function () { - count--; - display.textContent = count; - }); - // increaseTemp.addEventListener("click", incrementCount); -}; +// const increaseTemp = () => { +// let count = 0; +// count++; +// const upButton = document.getElementById('up'); +// const downButton = document.getElementById('down'); +// let display = document.getElementById('tempNum'); + +// upButton.addEventListener('click', function () { +// count++; +// display.textContent = count; +// }); +// downButton.addEventListener('click', function () { +// count--; +// display.textContent = count; +// }); +// // increaseTemp.addEventListener("click", incrementCount); +// }; + + +const updateSky = () => { + const inputSky = document.getElementById('skyOptions').value; + const skyContainer = document.getElementById('sky-weather'); + let sky = ''; + let skyColor = ''; + if (inputSky === 'Clouds') { + sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + skyColor = 'cloud'; + } else if (inputSky === 'Sunshine') { + sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + skyColor = 'sunn'; + } else if (inputSky === 'Rain') { + sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + skyColor = 'rain'; + } else if (inputSky === 'Snow') { + sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + skyColor = 'snow'; + } else if (inputSky === 'Wind') { + sky = ''; + skyColor = 'wind'; + } +} + + // const decreaseTemp = () => { // i--; diff --git a/styles/index.css b/styles/index.css index 8268f875e..d0876695a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,41 +1,40 @@ -body { - background-color: #cad0bd -} - - -#temp { - background-color: rgb(205, 202, 104) ; - color: red; - color: orange; - color: yellow; - color: green; - color: teal; +* { + box-sizing: border-box; } +body { + /* margin: 0; */ + display: flex; + flex-wrap: wrap; + background-color: #cad0bd; +} -/* - the temperature number changes color -- the background of the temperature changes color */ -/* -Depending on what temperature it is, a different landscape should appear on the page. -These landscapes can be anything, as long as they are visual and noticeable to any instructors. For example, the landscapes can be: +.block { + width: 50%; + float: left; + height: 0; + padding-bottom: 50%; +} -- A single image that appears -- ASCII art -- Text +.temp-section { + background: yellow; + width: 50%; + padding-bottom: 50%; +} -Changing landscapes should _replace_ the existing landscape. There should only be one visible landscape at a time. +.sky-section{ + background: lightblue; +} -There must be at least four landscapes. +.city_section{ + background: orange; +} -Our solution uses the following ranges, which you may use if desired: +.emojis { + background: rgb(0, 255, 204); +} -| Temperature (F) | Landscape | -| --------------- | --------------------------------- | -| 80+ | `"🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚"` | -| 70-79 | `"🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"` | -| 60-69 | `"🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ"` | -| 59 or below | `"πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²"` | */ \ No newline at end of file From cda938f6a93605dc81b3aae0bc155b9b686b58fc Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 12:55:27 -0500 Subject: [PATCH 05/36] fix 4 boxes to be complete --- styles/index.css | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/styles/index.css b/styles/index.css index d0876695a..c2c963e2d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -12,29 +12,36 @@ body { - +/* .block { width: 50%; float: left; height: 0; padding-bottom: 50%; -} +} */ .temp-section { background: yellow; + float: left; width: 50%; - padding-bottom: 50%; + /* padding-bottom: 50%; */ } .sky-section{ background: lightblue; + float: right; + width: 50%; } .city_section{ background: orange; + float: right; + width: 50%; } .emojis { background: rgb(0, 255, 204); + float: left; + width: 50%; } From e29ff660d18b1441aba920631ab186a8368009a7 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 13:03:11 -0500 Subject: [PATCH 06/36] center text --- styles/index.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/styles/index.css b/styles/index.css index c2c963e2d..c31aa633b 100644 --- a/styles/index.css +++ b/styles/index.css @@ -24,6 +24,7 @@ body { background: yellow; float: left; width: 50%; + height: 400px; /* padding-bottom: 50%; */ } @@ -31,6 +32,7 @@ body { background: lightblue; float: right; width: 50%; + height: 400px; } .city_section{ @@ -43,5 +45,6 @@ body { background: rgb(0, 255, 204); float: left; width: 50%; + height: 400px; } From 3a1c81b488eb685aa25b32ff23f8e9ae4c682480 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 15:57:36 -0500 Subject: [PATCH 07/36] do we change center --- src/index.js | 27 +++++++++++++++++++++++---- styles/index.css | 4 ++++ 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 0c65598bb..1fab78d45 100644 --- a/src/index.js +++ b/src/index.js @@ -36,10 +36,26 @@ const findWeather = () => { }) }; - const increaseTemp = () => { - state.temp += 1; - formatTempAndGarden(); - }; + +// Increase/Decrease temperature +const increaseTemp = () => { + let count = 0; + count++; + + const upButton = document.getElementById('up'); + const downButton = document.getElementById('down'); + + + increment.addEventListener('click',() => { + count +=1 + display.textContent = count; +} + + + // const increaseTemp = () => { + // state.temp += 1; + // formatTempAndGarden(); + // }; // Increase/Decrease temperature // const increaseTemp = () => { @@ -61,6 +77,9 @@ const findWeather = () => { // }; + + + const updateSky = () => { const inputSky = document.getElementById('skyOptions').value; const skyContainer = document.getElementById('sky-weather'); diff --git a/styles/index.css b/styles/index.css index c31aa633b..9ddfcad05 100644 --- a/styles/index.css +++ b/styles/index.css @@ -25,6 +25,7 @@ body { float: left; width: 50%; height: 400px; + text-align: center; /* padding-bottom: 50%; */ } @@ -33,12 +34,14 @@ body { float: right; width: 50%; height: 400px; + text-align: center; } .city_section{ background: orange; float: right; width: 50%; + text-align: center; } .emojis { @@ -46,5 +49,6 @@ body { float: left; width: 50%; height: 400px; + text-align: center; } From 0451f4af8db59b945220e03c6abd9278adbae816 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 16:05:13 -0500 Subject: [PATCH 08/36] reset button function --- src/index.js | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index 1fab78d45..1607e2532 100644 --- a/src/index.js +++ b/src/index.js @@ -37,20 +37,13 @@ const findWeather = () => { }; -// Increase/Decrease temperature -const increaseTemp = () => { - let count = 0; - count++; - - const upButton = document.getElementById('up'); - const downButton = document.getElementById('down'); - - - increment.addEventListener('click',() => { - count +=1 - display.textContent = count; -} - +function resetText { + let resetText = document.getElementById('reset') + resetButton.addEventListener('click', function() { + // Reset the text box + textBox.reset(); + } +}; // const increaseTemp = () => { // state.temp += 1; @@ -80,7 +73,7 @@ const increaseTemp = () => { -const updateSky = () => { +function updateSky() { const inputSky = document.getElementById('skyOptions').value; const skyContainer = document.getElementById('sky-weather'); let sky = ''; From 7bff157925a7da5ef1da2bd25b3c6ef2b7cad367 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 16:39:45 -0500 Subject: [PATCH 09/36] reset button function --- src/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 1607e2532..4eeabce98 100644 --- a/src/index.js +++ b/src/index.js @@ -38,11 +38,16 @@ const findWeather = () => { function resetText { - let resetText = document.getElementById('reset') + let City = document.getElementById('city'); + // Get the button + let resetButton = document.getElementById('reset'); + + // Add a click event listener to the button resetButton.addEventListener('click', function() { // Reset the text box - textBox.reset(); - } + City.reset(); +}); + }; // const increaseTemp = () => { From d5cb193a5695d0ba87dc2703221cd81e584543ff Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Fri, 9 Dec 2022 16:47:04 -0500 Subject: [PATCH 10/36] reset button function --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 4eeabce98..acd101d5b 100644 --- a/src/index.js +++ b/src/index.js @@ -37,7 +37,7 @@ const findWeather = () => { }; -function resetText { +function resetText() { let City = document.getElementById('city'); // Get the button let resetButton = document.getElementById('reset'); @@ -46,9 +46,9 @@ function resetText { resetButton.addEventListener('click', function() { // Reset the text box City.reset(); -}); +} +); -}; // const increaseTemp = () => { // state.temp += 1; From 8dd36d0ce04cffd714933c4e644bec8f55304913 Mon Sep 17 00:00:00 2001 From: Cristal Date: Fri, 9 Dec 2022 21:05:41 -0800 Subject: [PATCH 11/36] temp color added --- src/index.js | 93 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 59 insertions(+), 34 deletions(-) diff --git a/src/index.js b/src/index.js index acd101d5b..f8db744f2 100644 --- a/src/index.js +++ b/src/index.js @@ -12,22 +12,22 @@ const state = { }; -const findLatAndLong = () => { +function findLatAndLong() { axios - .get('', - params: { - key: process.env['LOCATION_API_KEY'], - q: state.lat, - format: 'json', + .get("https://us1.locationiq.com/v1/search.php", + params= { + "q": loc_query, + "key": location_key, + "format": "json" }) .then((response) => { console.log(response.data); state.lat = response.data[0].lat; state.long = response.data[0].lon; } -}; +)}; -const findWeather = () => { +function findWeather(lat, long) { axios .get('https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&appid={WEATHER_API_KEY}',{ params: { @@ -43,11 +43,60 @@ function resetText() { let resetButton = document.getElementById('reset'); // Add a click event listener to the button - resetButton.addEventListener('click', function() { + resetButton.addEventListener('click', function()); { // Reset the text box City.reset(); +}}; +; + +function tempColorChange() { + const tempContainer = document.getElementById('temperature'); + + if (tempContainer <= 32) { + document.body.style.backgroundColor = 'blue'; + document.body.style.color = 'white'; + document.write("❄️__❄️__❄️__❄️") +} else if (tempContainer > 32 && temperature <= 50) { + document.body.style.backgroundColor = 'green'; + document.body.style.color = 'white'; +} else if (tempContainer > 50 && temperature <= 68) { + document.body.style.backgroundColor = 'yellow'; + document.body.style.color = 'black'; +} else if (tempContainer > 68 && temperature <= 86) { + document.body.style.backgroundColor = 'orange'; + document.body.style.color = 'black'; +} else { + document.body.style.backgroundColor = 'red'; + document.body.style.color = 'white'; + } +} + + + + +function updateSky() { + const inputSky = document.getElementById('skyOptions').value; + const skyContainer = document.getElementById('sky-weather'); + let sky = ''; + let skyColor = ''; + if (inputSky === 'Clouds') { + sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + skyColor = 'cloud'; + } else if (inputSky === 'Sunshine') { + sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + skyColor = 'sunn'; + } else if (inputSky === 'Rain') { + sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + skyColor = 'rain'; + } else if (inputSky === 'Snow') { + sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + skyColor = 'snow'; + } else if (inputSky === 'Wind') { + sky = ''; + skyColor = 'wind'; + } } -); + // const increaseTemp = () => { @@ -78,30 +127,6 @@ function resetText() { -function updateSky() { - const inputSky = document.getElementById('skyOptions').value; - const skyContainer = document.getElementById('sky-weather'); - let sky = ''; - let skyColor = ''; - if (inputSky === 'Clouds') { - sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; - skyColor = 'cloud'; - } else if (inputSky === 'Sunshine') { - sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - skyColor = 'sunn'; - } else if (inputSky === 'Rain') { - sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; - skyColor = 'rain'; - } else if (inputSky === 'Snow') { - sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; - skyColor = 'snow'; - } else if (inputSky === 'Wind') { - sky = ''; - skyColor = 'wind'; - } -} - - // const decreaseTemp = () => { // i--; From b82c635d31c88bae343b2e1dfd7b9721fc223c32 Mon Sep 17 00:00:00 2001 From: Cristal Date: Fri, 9 Dec 2022 22:05:15 -0800 Subject: [PATCH 12/36] added links to get --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index f8db744f2..a556297f7 100644 --- a/src/index.js +++ b/src/index.js @@ -29,7 +29,7 @@ axios function findWeather(lat, long) { axios - .get('https://api.openweathermap.org/data/2.5/onecall?lat={lat}&lon={lon}&appid={WEATHER_API_KEY}',{ + .get('https://api.openweathermap.org/data/2.5/weather',{ params: { lat: state.lat, lon: state.long From 9064a096d9bbc27def86a1a87ac4e47122c63805 Mon Sep 17 00:00:00 2001 From: Cristal Date: Sat, 10 Dec 2022 10:08:30 -0800 Subject: [PATCH 13/36] added links from proxy to requests --- index.html | 2 +- src/index.js | 49 ++++++++++++++++++++++++++++++------------------- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 2a67a074f..ccfce1071 100644 --- a/index.html +++ b/index.html @@ -52,5 +52,5 @@

Weather Visual

- + diff --git a/src/index.js b/src/index.js index a556297f7..91eb943ac 100644 --- a/src/index.js +++ b/src/index.js @@ -4,36 +4,52 @@ const { default: axios } = require("axios"); // State, city, temp, sky +// "https://us1.locationiq.com/v1/search.php" +// "https://api.openweathermap.org/data/2.5/weather" + const state = { city: 'Seattle', lat: 47.6038321, long: -122.3300624, - temp: 50 + temp: 48 }; -function findLatAndLong() { +// increase temp +const increaseTemp = () => { + state.temp ++; +}; + +const decreaseTemp = () => { + state.temp --; +} + +const findLatAndLong = () => { axios - .get("https://us1.locationiq.com/v1/search.php", + .get("http://127.0.0.1:5000/weather", params= { - "q": loc_query, - "key": location_key, - "format": "json" + "q": state.city, }) .then((response) => { console.log(response.data); state.lat = response.data[0].lat; state.long = response.data[0].lon; - } -)}; + getWeather(); + }) +}; function findWeather(lat, long) { axios - .get('https://api.openweathermap.org/data/2.5/weather',{ + .get("http://127.0.0.1:5000/location",{ params: { lat: state.lat, lon: state.long - }) + }, + }) + .then((response) => { + const weather = response.data; + state.temp = Math.round((weather.current.temp)); + }) }; @@ -47,15 +63,15 @@ function resetText() { // Reset the text box City.reset(); }}; -; -function tempColorChange() { + +const tempColorChange = () => { const tempContainer = document.getElementById('temperature'); if (tempContainer <= 32) { document.body.style.backgroundColor = 'blue'; document.body.style.color = 'white'; - document.write("❄️__❄️__❄️__❄️") + document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨') } else if (tempContainer > 32 && temperature <= 50) { document.body.style.backgroundColor = 'green'; document.body.style.color = 'white'; @@ -74,7 +90,7 @@ function tempColorChange() { -function updateSky() { +const updateSky = () => { const inputSky = document.getElementById('skyOptions').value; const skyContainer = document.getElementById('sky-weather'); let sky = ''; @@ -99,11 +115,6 @@ function updateSky() { - // const increaseTemp = () => { - // state.temp += 1; - // formatTempAndGarden(); - // }; - // Increase/Decrease temperature // const increaseTemp = () => { // let count = 0; From 0b3ae55f4d8759ea9a498e59bc56e565a9deaacf Mon Sep 17 00:00:00 2001 From: Cristal Date: Sat, 10 Dec 2022 10:43:15 -0800 Subject: [PATCH 14/36] findweather --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 91eb943ac..7e8391003 100644 --- a/src/index.js +++ b/src/index.js @@ -38,7 +38,7 @@ axios }) }; -function findWeather(lat, long) { +const findWeather = (lat, long) => { axios .get("http://127.0.0.1:5000/location",{ params: { From f97d09046d8a6a2eca29872cee6c05e250e6d40f Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sat, 10 Dec 2022 13:43:44 -0500 Subject: [PATCH 15/36] changed if statement --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 91eb943ac..6bb07d022 100644 --- a/src/index.js +++ b/src/index.js @@ -72,13 +72,13 @@ const tempColorChange = () => { document.body.style.backgroundColor = 'blue'; document.body.style.color = 'white'; document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨') -} else if (tempContainer > 32 && temperature <= 50) { +} else if (tempContainer > 32 && tempContainer <= 50) { document.body.style.backgroundColor = 'green'; document.body.style.color = 'white'; -} else if (tempContainer > 50 && temperature <= 68) { +} else if (tempContainer > 50 && tempContainer <= 68) { document.body.style.backgroundColor = 'yellow'; document.body.style.color = 'black'; -} else if (tempContainer > 68 && temperature <= 86) { +} else if (tempContainer > 68 && tempContainer <= 86) { document.body.style.backgroundColor = 'orange'; document.body.style.color = 'black'; } else { From dfee627a02c4bab66433a5f067c75596527ca132 Mon Sep 17 00:00:00 2001 From: Cristal Date: Sat, 10 Dec 2022 11:01:02 -0800 Subject: [PATCH 16/36] increase decrease working --- src/index.js | 128 ++++++++++++++++++++++++++------------------------- 1 file changed, 66 insertions(+), 62 deletions(-) diff --git a/src/index.js b/src/index.js index 419b5e9fd..916ec0f4e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ 'use strict'; -const { default: axios } = require("axios"); +// const { default: axios } = 'axios'; // State, city, temp, sky @@ -11,47 +11,62 @@ const state = { city: 'Seattle', lat: 47.6038321, long: -122.3300624, - temp: 48 + temp: 48, }; - // increase temp const increaseTemp = () => { - state.temp ++; + state.temp++; + console.log(increaseTemp); + console.log(state.temp); }; const decreaseTemp = () => { - state.temp --; -} + state.temp--; +}; + +const upButton = document.getElementById('up'); +const downButton = document.getElementById('down'); +let display = document.getElementById('tempNum'); + +upButton.addEventListener('click', function increaseTemp() { + state.temp++; + display.textContent = state.temp; +}); +downButton.addEventListener('click', function () { + state.temp--; + display.textContent = state.temp; +}); const findLatAndLong = () => { -axios - .get("http://127.0.0.1:5000/weather", - params= { - "q": state.city, - }) - .then((response) => { - console.log(response.data); - state.lat = response.data[0].lat; - state.long = response.data[0].lon; - getWeather(); - }) + axios + .get( + 'http://127.0.0.1:5000/weather', + (params = { + q: state.city, + }) + ) + .then((response) => { + console.log(response.data); + state.lat = response.data[0].lat; + state.long = response.data[0].lon; + getWeather(); + }); }; const findWeather = (lat, long) => { axios - .get("http://127.0.0.1:5000/location",{ - params: { - lat: state.lat, - lon: state.long - }, - }) - .then((response) => { - const weather = response.data; - state.temp = Math.round((weather.current.temp)); - }) - }; - + .get('http://127.0.0.1:5000/location', { + params: { + lat: state.lat, + lon: state.long, + }, + }) + .then((response) => { + const weather = response.data; + state.temp = Math.round(weather.current.temp); + }); +}; function resetText() { let City = document.getElementById('city'); @@ -59,36 +74,33 @@ function resetText() { let resetButton = document.getElementById('reset'); // Add a click event listener to the button - resetButton.addEventListener('click', function()); { - // Reset the text box - City.reset(); -}}; - + resetButton.addEventListener('click', function resetText() { + // Reset the text box + City.reset(); + }); +} const tempColorChange = () => { const tempContainer = document.getElementById('temperature'); - + if (tempContainer <= 32) { document.body.style.backgroundColor = 'blue'; document.body.style.color = 'white'; - document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨') -} else if (tempContainer > 32 && tempContainer <= 50) { + document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'); + } else if (tempContainer > 32 && tempContainer <= 50) { document.body.style.backgroundColor = 'green'; document.body.style.color = 'white'; -} else if (tempContainer > 50 && tempContainer <= 68) { + } else if (tempContainer > 50 && tempContainer <= 68) { document.body.style.backgroundColor = 'yellow'; document.body.style.color = 'black'; -} else if (tempContainer > 68 && tempContainer <= 86) { + } else if (tempContainer > 68 && tempContainer <= 86) { document.body.style.backgroundColor = 'orange'; document.body.style.color = 'black'; -} else { + } else { document.body.style.backgroundColor = 'red'; document.body.style.color = 'white'; } -} - - - +}; const updateSky = () => { const inputSky = document.getElementById('skyOptions').value; @@ -111,9 +123,7 @@ const updateSky = () => { sky = ''; skyColor = 'wind'; } -} - - +}; // Increase/Decrease temperature // const increaseTemp = () => { @@ -123,21 +133,15 @@ const updateSky = () => { // const downButton = document.getElementById('down'); // let display = document.getElementById('tempNum'); -// upButton.addEventListener('click', function () { -// count++; -// display.textContent = count; -// }); -// downButton.addEventListener('click', function () { -// count--; -// display.textContent = count; -// }); -// // increaseTemp.addEventListener("click", incrementCount); -// }; - - - - - +// upButton.addEventListener('click', increaseTemp () { +// state.temp++; +// display.textContent = state.temp; +// }); +// downButton.addEventListener('click', function () { +// state.temp--; +// display.textContent = state.temp; +// }); +// increaseTemp.addEventListener("click", incrementCount); // const decreaseTemp = () => { // i--; From b4c82604eeae81ac63bf9833cf2f7e9101943037 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sat, 10 Dec 2022 14:40:53 -0500 Subject: [PATCH 17/36] changed reset --- src/index.js | 34 +++++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/src/index.js b/src/index.js index 916ec0f4e..29f74b13b 100644 --- a/src/index.js +++ b/src/index.js @@ -54,6 +54,9 @@ const findLatAndLong = () => { }); }; +const currentWeather = document.getElementById('currentWeather'); +currentWeather.addEventListener(click, findLatAndLong); + const findWeather = (lat, long) => { axios .get('http://127.0.0.1:5000/location', { @@ -66,19 +69,28 @@ const findWeather = (lat, long) => { const weather = response.data; state.temp = Math.round(weather.current.temp); }); + console.log(findWeather); +}; + +const updateCity = () => { + const newCity = document.getElementById('newCity'); + newCity.addEventListener('input', updateCity); }; -function resetText() { - let City = document.getElementById('city'); - // Get the button - let resetButton = document.getElementById('reset'); - - // Add a click event listener to the button - resetButton.addEventListener('click', function resetText() { - // Reset the text box - City.reset(); - }); -} +const resetText = () => { + // let City = document.getElementById('city'); + const newCity = document.getElementById('newCity'); + newCity.value = 'Seattle'; + updateCity(); + console.log(resetText); + console.log(state.city); +}; +// Get the button +// let resetButton = document.getElementById('reset'); +// Add a click event listener to the button +// resetButton.addEventListener('click', function resetText() { +// Reset the text box +// City.reset(); const tempColorChange = () => { const tempContainer = document.getElementById('temperature'); From 00bba11bd545719e363f01fe16024ef3d1e8cd63 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sat, 10 Dec 2022 14:51:15 -0500 Subject: [PATCH 18/36] change for realtime city --- index.html | 2 +- src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ccfce1071..158c66531 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

WEATHER CHANNEL

🌳 Weather for the City of Seattle πŸƒ

- +

Temperature

diff --git a/src/index.js b/src/index.js index 29f74b13b..513793811 100644 --- a/src/index.js +++ b/src/index.js @@ -55,7 +55,7 @@ const findLatAndLong = () => { }; const currentWeather = document.getElementById('currentWeather'); -currentWeather.addEventListener(click, findLatAndLong); +currentWeather.addEventListener('click', findLatAndLong); const findWeather = (lat, long) => { axios From e4c4be4ad7de1f397f39f8da1d3ac5d220d02d35 Mon Sep 17 00:00:00 2001 From: Cristal Date: Sat, 10 Dec 2022 12:09:35 -0800 Subject: [PATCH 19/36] got current weather --- src/index.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 513793811..d363c0390 100644 --- a/src/index.js +++ b/src/index.js @@ -17,8 +17,8 @@ const state = { // increase temp const increaseTemp = () => { state.temp++; - console.log(increaseTemp); - console.log(state.temp); + // console.log(increaseTemp); + // console.log(state.temp); }; const decreaseTemp = () => { @@ -40,17 +40,15 @@ downButton.addEventListener('click', function () { const findLatAndLong = () => { axios - .get( - 'http://127.0.0.1:5000/weather', - (params = { + .get('http://127.0.0.1:5000/location', { + params: { q: state.city, - }) - ) + }, + }) .then((response) => { - console.log(response.data); state.lat = response.data[0].lat; state.long = response.data[0].lon; - getWeather(); + findWeather(); }); }; @@ -59,7 +57,7 @@ currentWeather.addEventListener('click', findLatAndLong); const findWeather = (lat, long) => { axios - .get('http://127.0.0.1:5000/location', { + .get('http://127.0.0.1:5000/weather', { params: { lat: state.lat, lon: state.long, @@ -67,9 +65,11 @@ const findWeather = (lat, long) => { }) .then((response) => { const weather = response.data; - state.temp = Math.round(weather.current.temp); + console.log(weather); + state.temp = Math.round(weather.main.temp); + // console.log(weather); }); - console.log(findWeather); + // console.log(findWeather); }; const updateCity = () => { From 365df73d4099c0c7222bb7f02e73b2864ae3a2ee Mon Sep 17 00:00:00 2001 From: Cristal Date: Sat, 10 Dec 2022 12:22:47 -0800 Subject: [PATCH 20/36] got reset button to work --- index.html | 2 +- src/index.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 158c66531..cc7c9ad3d 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

Sky

City

- +
diff --git a/src/index.js b/src/index.js index d363c0390..4354c9797 100644 --- a/src/index.js +++ b/src/index.js @@ -74,21 +74,21 @@ const findWeather = (lat, long) => { const updateCity = () => { const newCity = document.getElementById('newCity'); - newCity.addEventListener('input', updateCity); + state.city = newCity.value; }; +const newCity = document.getElementById('newCity'); +newCity.addEventListener('input', updateCity); const resetText = () => { // let City = document.getElementById('city'); const newCity = document.getElementById('newCity'); newCity.value = 'Seattle'; updateCity(); - console.log(resetText); - console.log(state.city); }; // Get the button -// let resetButton = document.getElementById('reset'); +let resetButton = document.getElementById('reset'); // Add a click event listener to the button -// resetButton.addEventListener('click', function resetText() { +resetButton.addEventListener('click', resetText); // Reset the text box // City.reset(); From 6a0c71672fa5d2b6681274f7aaa7d2715834b09f Mon Sep 17 00:00:00 2001 From: Cristal Date: Sun, 11 Dec 2022 14:38:59 -0800 Subject: [PATCH 21/36] number color changes --- index.html | 4 +- src/index.js | 99 ++++++++++++++++++++++++++++++++---------------- styles/index.css | 32 ++++++++++++++++ 3 files changed, 100 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index cc7c9ad3d..61e59e1da 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

WEATHER CHANNEL

-

🌳 Weather for the City of Seattle πŸƒ

+

🌳 Weather for the City of πŸƒ

@@ -47,7 +47,7 @@

City

Weather Visual

-
🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_πŸ¦‚
+
🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_πŸ¦‚
diff --git a/src/index.js b/src/index.js index 4354c9797..5b6de1d08 100644 --- a/src/index.js +++ b/src/index.js @@ -14,15 +14,21 @@ const state = { temp: 48, }; +const convertKtoF = (temp) => { + return (temp - 273.15) * (9 / 5) + 32; +}; + // increase temp const increaseTemp = () => { state.temp++; + displayEmojis(); // console.log(increaseTemp); // console.log(state.temp); }; const decreaseTemp = () => { state.temp--; + displayEmojis(); }; const upButton = document.getElementById('up'); @@ -33,7 +39,7 @@ upButton.addEventListener('click', function increaseTemp() { state.temp++; display.textContent = state.temp; }); -downButton.addEventListener('click', function () { +downButton.addEventListener('click', function decreaseTemp() { state.temp--; display.textContent = state.temp; }); @@ -61,17 +67,21 @@ const findWeather = (lat, long) => { params: { lat: state.lat, lon: state.long, + // units: imperial, }, }) .then((response) => { const weather = response.data; console.log(weather); - state.temp = Math.round(weather.main.temp); + state.temp = Math.round(convertKtoF(weather.main.temp)); + displayEmojis(); // console.log(weather); }); // console.log(findWeather); }; +currentWeather.addEventListener('click', findWeather); + const updateCity = () => { const newCity = document.getElementById('newCity'); state.city = newCity.value; @@ -80,7 +90,6 @@ const updateCity = () => { const newCity = document.getElementById('newCity'); newCity.addEventListener('input', updateCity); const resetText = () => { - // let City = document.getElementById('city'); const newCity = document.getElementById('newCity'); newCity.value = 'Seattle'; updateCity(); @@ -89,54 +98,78 @@ const resetText = () => { let resetButton = document.getElementById('reset'); // Add a click event listener to the button resetButton.addEventListener('click', resetText); -// Reset the text box -// City.reset(); - -const tempColorChange = () => { - const tempContainer = document.getElementById('temperature'); - - if (tempContainer <= 32) { - document.body.style.backgroundColor = 'blue'; - document.body.style.color = 'white'; - document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'); - } else if (tempContainer > 32 && tempContainer <= 50) { - document.body.style.backgroundColor = 'green'; - document.body.style.color = 'white'; - } else if (tempContainer > 50 && tempContainer <= 68) { - document.body.style.backgroundColor = 'yellow'; - document.body.style.color = 'black'; - } else if (tempContainer > 68 && tempContainer <= 86) { - document.body.style.backgroundColor = 'orange'; - document.body.style.color = 'black'; + +const displayEmojis = () => { + let numColor = 'red'; + let emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + if (state.temp > 80) { + emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + numColor = 'red'; + } else if (state.temp > 70) { + emojisBelow = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + numColor = 'orange'; + } else if (state.temp > 60) { + emojisBelow = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + numColor = 'green'; + } else if (state.temp > 50) { + emojisBelow = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + numColor = 'purple'; } else { - document.body.style.backgroundColor = 'red'; - document.body.style.color = 'white'; + emojisBelow = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + numColor = 'grey'; } + const newEmojis = document.getElementById('emojis-below'); + newEmojis.textContent = emojisBelow; + const temperature = document.getElementById('tempNum'); + temperature.className = numColor; + temperature.textContent = String(state.temp); }; +// const tempColorChange = () => { +// const tempContainer = document.getElementById('temperature'); +// tempColorChange.addEventListener('click', findWeather); +// if (tempContainer <= 32) { +// document.body.style.backgroundColor = 'blue'; + +// document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'); +// } else if (tempContainer > 32 && tempContainer <= 50) { +// } else if (tempContainer > 50 && tempContainer <= 68) { +// } else if (tempContainer > 68 && tempContainer <= 86) { +// } else { +// } +// }; + const updateSky = () => { - const inputSky = document.getElementById('skyOptions').value; - const skyContainer = document.getElementById('sky-weather'); let sky = ''; let skyColor = ''; - if (inputSky === 'Clouds') { + if (inputSky === 'clouds') { sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; skyColor = 'cloud'; - } else if (inputSky === 'Sunshine') { + } else if (inputSky === 'sunshine') { sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - skyColor = 'sunn'; - } else if (inputSky === 'Rain') { + skyColor = 'sunny'; + } else if (inputSky === 'rain') { sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; skyColor = 'rain'; - } else if (inputSky === 'Snow') { + } else if (inputSky === 'snow') { sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; skyColor = 'snow'; - } else if (inputSky === 'Wind') { - sky = ''; + } else if (inputSky === 'wind') { + sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; skyColor = 'wind'; } + + const inputSky = document.getElementById('skyOptions').value; + inputSky.textContent = inputSky; + const skyContainer = document.getElementById('sky-weather'); + skyContainer.className = skySection; + skyContainer.textContent = String(state.temp); + // skyContainer.textContent = sky; + // skyOptions.addEventListener('change', updateSky); }; +console.log(updateSky); + // Increase/Decrease temperature // const increaseTemp = () => { // let count = 0; diff --git a/styles/index.css b/styles/index.css index 9ddfcad05..136414d44 100644 --- a/styles/index.css +++ b/styles/index.css @@ -52,3 +52,35 @@ body { text-align: center; } +/* #tempNum { + color: ; +} */ + + +#tempNum { + font-size: 3rem; + +} + + + + +.red { + color: red; + } + + .orange { + color: orange; + } + + .yellow { + color: gold; + } + + .yellow-green { + color: yellowgreen; + } + + .green { + color: green; + } \ No newline at end of file From 4dafa9f935f57da0c6a4741af78d8a6d489c0d6a Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 17:43:15 -0500 Subject: [PATCH 22/36] changes --- index.html | 4 +++- src/index.js | 43 +------------------------------------------ styles/index.css | 26 ++++++++++++++++---------- 3 files changed, 20 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index cc7c9ad3d..536c4e113 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,9 @@

WEATHER CHANNEL

-

🌳 Weather for the City of Seattle πŸƒ

+

+

+
diff --git a/src/index.js b/src/index.js index 4354c9797..c8b9bd748 100644 --- a/src/index.js +++ b/src/index.js @@ -94,7 +94,7 @@ resetButton.addEventListener('click', resetText); const tempColorChange = () => { const tempContainer = document.getElementById('temperature'); - + tempContainer.addEventListener('click'); if (tempContainer <= 32) { document.body.style.backgroundColor = 'blue'; document.body.style.color = 'white'; @@ -136,44 +136,3 @@ const updateSky = () => { skyColor = 'wind'; } }; - -// Increase/Decrease temperature -// const increaseTemp = () => { -// let count = 0; -// count++; -// const upButton = document.getElementById('up'); -// const downButton = document.getElementById('down'); -// let display = document.getElementById('tempNum'); - -// upButton.addEventListener('click', increaseTemp () { -// state.temp++; -// display.textContent = state.temp; -// }); -// downButton.addEventListener('click', function () { -// state.temp--; -// display.textContent = state.temp; -// }); -// increaseTemp.addEventListener("click", incrementCount); - -// const decreaseTemp = () => { -// i--; -// document.getElementById('down').value = i; -// } -// Temperature number and background changes depending on number - -// const tempColorChange = () => { - -// } - -// // Depending on what temperature it is, a different landscape should appear on the page. - -// const - -// // Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time. - -// // There must be at least four landscapes. - -// // Reset city button -// const resetCity = () => { -// formElement.reset() -// } diff --git a/styles/index.css b/styles/index.css index 9ddfcad05..b1785e47d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -11,15 +11,6 @@ body { } - -/* -.block { - width: 50%; - float: left; - height: 0; - padding-bottom: 50%; -} */ - .temp-section { background: yellow; float: left; @@ -50,5 +41,20 @@ body { width: 50%; height: 400px; text-align: center; -} +} + + + + + + + + + + + + + + + From e0f3320561c9252495fd8d4a0f6573795133c895 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 17:47:38 -0500 Subject: [PATCH 23/36] Resolve conflicts --- index.html | 6 ------ src/index.js | 41 ----------------------------------------- 2 files changed, 47 deletions(-) diff --git a/index.html b/index.html index c2a10a2da..61e59e1da 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,7 @@

WEATHER CHANNEL

-<<<<<<< HEAD -

-

- -=======

🌳 Weather for the City of πŸƒ

->>>>>>> 6a0c71672fa5d2b6681274f7aaa7d2715834b09f
diff --git a/src/index.js b/src/index.js index 5b6de1d08..0db511b40 100644 --- a/src/index.js +++ b/src/index.js @@ -169,44 +169,3 @@ const updateSky = () => { }; console.log(updateSky); - -// Increase/Decrease temperature -// const increaseTemp = () => { -// let count = 0; -// count++; -// const upButton = document.getElementById('up'); -// const downButton = document.getElementById('down'); -// let display = document.getElementById('tempNum'); - -// upButton.addEventListener('click', increaseTemp () { -// state.temp++; -// display.textContent = state.temp; -// }); -// downButton.addEventListener('click', function () { -// state.temp--; -// display.textContent = state.temp; -// }); -// increaseTemp.addEventListener("click", incrementCount); - -// const decreaseTemp = () => { -// i--; -// document.getElementById('down').value = i; -// } -// Temperature number and background changes depending on number - -// const tempColorChange = () => { - -// } - -// // Depending on what temperature it is, a different landscape should appear on the page. - -// const - -// // Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time. - -// // There must be at least four landscapes. - -// // Reset city button -// const resetCity = () => { -// formElement.reset() -// } From 42a80884b2dd8cca10f232abef5e4216e53f47b9 Mon Sep 17 00:00:00 2001 From: Cristal Date: Sun, 11 Dec 2022 15:09:22 -0800 Subject: [PATCH 24/36] able to display city name --- index.html | 2 +- src/index.js | 81 ++++++------------------------------------------ styles/index.css | 8 ++--- 3 files changed, 15 insertions(+), 76 deletions(-) diff --git a/index.html b/index.html index 61e59e1da..7e12e51bb 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@

WEATHER CHANNEL

-

🌳 Weather for the City of πŸƒ

+

🌳 Weather for the City of Seattle πŸƒ

diff --git a/src/index.js b/src/index.js index 5b6de1d08..8fdaca185 100644 --- a/src/index.js +++ b/src/index.js @@ -18,19 +18,6 @@ const convertKtoF = (temp) => { return (temp - 273.15) * (9 / 5) + 32; }; -// increase temp -const increaseTemp = () => { - state.temp++; - displayEmojis(); - // console.log(increaseTemp); - // console.log(state.temp); -}; - -const decreaseTemp = () => { - state.temp--; - displayEmojis(); -}; - const upButton = document.getElementById('up'); const downButton = document.getElementById('down'); let display = document.getElementById('tempNum'); @@ -38,10 +25,12 @@ let display = document.getElementById('tempNum'); upButton.addEventListener('click', function increaseTemp() { state.temp++; display.textContent = state.temp; + displayEmojis(); }); downButton.addEventListener('click', function decreaseTemp() { state.temp--; display.textContent = state.temp; + displayEmojis(); }); const findLatAndLong = () => { @@ -82,9 +71,10 @@ const findWeather = (lat, long) => { currentWeather.addEventListener('click', findWeather); -const updateCity = () => { - const newCity = document.getElementById('newCity'); - state.city = newCity.value; +const updateCity = (event) => { + const newCity = event.target.value; + state.city = newCity; + displayCity(); }; const newCity = document.getElementById('newCity'); @@ -99,6 +89,10 @@ let resetButton = document.getElementById('reset'); // Add a click event listener to the button resetButton.addEventListener('click', resetText); +const displayCity = () => { + document.getElementById('cityInput').textContent = state.city; +}; + const displayEmojis = () => { let numColor = 'red'; let emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; @@ -125,20 +119,6 @@ const displayEmojis = () => { temperature.textContent = String(state.temp); }; -// const tempColorChange = () => { -// const tempContainer = document.getElementById('temperature'); -// tempColorChange.addEventListener('click', findWeather); -// if (tempContainer <= 32) { -// document.body.style.backgroundColor = 'blue'; - -// document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'); -// } else if (tempContainer > 32 && tempContainer <= 50) { -// } else if (tempContainer > 50 && tempContainer <= 68) { -// } else if (tempContainer > 68 && tempContainer <= 86) { -// } else { -// } -// }; - const updateSky = () => { let sky = ''; let skyColor = ''; @@ -169,44 +149,3 @@ const updateSky = () => { }; console.log(updateSky); - -// Increase/Decrease temperature -// const increaseTemp = () => { -// let count = 0; -// count++; -// const upButton = document.getElementById('up'); -// const downButton = document.getElementById('down'); -// let display = document.getElementById('tempNum'); - -// upButton.addEventListener('click', increaseTemp () { -// state.temp++; -// display.textContent = state.temp; -// }); -// downButton.addEventListener('click', function () { -// state.temp--; -// display.textContent = state.temp; -// }); -// increaseTemp.addEventListener("click", incrementCount); - -// const decreaseTemp = () => { -// i--; -// document.getElementById('down').value = i; -// } -// Temperature number and background changes depending on number - -// const tempColorChange = () => { - -// } - -// // Depending on what temperature it is, a different landscape should appear on the page. - -// const - -// // Changing landscapes should replace the existing landscape. There should only be one visible landscape at a time. - -// // There must be at least four landscapes. - -// // Reset city button -// const resetCity = () => { -// formElement.reset() -// } diff --git a/styles/index.css b/styles/index.css index 136414d44..a7635a844 100644 --- a/styles/index.css +++ b/styles/index.css @@ -69,18 +69,18 @@ body { color: red; } - .orange { +.orange { color: orange; } - .yellow { +.yellow { color: gold; } - .yellow-green { +.yellow-green { color: yellowgreen; } - .green { +.green { color: green; } \ No newline at end of file From 0f3fb3384d5f3188f19f835a89aa2337cd69bcfa Mon Sep 17 00:00:00 2001 From: Cristal Date: Sun, 11 Dec 2022 15:21:36 -0800 Subject: [PATCH 25/36] added colors --- styles/index.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/styles/index.css b/styles/index.css index 2a4f9cbe1..cc9b7ca23 100644 --- a/styles/index.css +++ b/styles/index.css @@ -61,10 +61,14 @@ body { color: gold; } -.yellow-green { - color: yellowgreen; -} - .green { color: green; } + +.purple { + color: purple +} + +.grey { + color: grey; +} From 1fd22dd587ae3ad25a30813c168fe07a1cc9ac6e Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 18:22:06 -0500 Subject: [PATCH 26/36] Resolve conflicts --- src/index.js | 16 ---------------- styles/index.css | 2 +- 2 files changed, 1 insertion(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 0db511b40..d59ab1ce3 100644 --- a/src/index.js +++ b/src/index.js @@ -75,9 +75,7 @@ const findWeather = (lat, long) => { console.log(weather); state.temp = Math.round(convertKtoF(weather.main.temp)); displayEmojis(); - // console.log(weather); }); - // console.log(findWeather); }; currentWeather.addEventListener('click', findWeather); @@ -125,20 +123,6 @@ const displayEmojis = () => { temperature.textContent = String(state.temp); }; -// const tempColorChange = () => { -// const tempContainer = document.getElementById('temperature'); -// tempColorChange.addEventListener('click', findWeather); -// if (tempContainer <= 32) { -// document.body.style.backgroundColor = 'blue'; - -// document.write('πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'); -// } else if (tempContainer > 32 && tempContainer <= 50) { -// } else if (tempContainer > 50 && tempContainer <= 68) { -// } else if (tempContainer > 68 && tempContainer <= 86) { -// } else { -// } -// }; - const updateSky = () => { let sky = ''; let skyColor = ''; diff --git a/styles/index.css b/styles/index.css index 9a9139d0e..30179635e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -52,7 +52,7 @@ body { .red { color: red; } - + .orange { color: orange; } From d2320fb479bc6ca5c21a19d9bbe68682b22749e0 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 18:25:39 -0500 Subject: [PATCH 27/36] changes to js --- index.html | 10 ++-------- src/index.js | 2 +- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index fda49e6b6..b0ed207a2 100644 --- a/index.html +++ b/index.html @@ -9,14 +9,8 @@ -

WEATHER CHANNEL

-<<<<<<< HEAD -

🌳 Weather for the City of πŸƒ

-======= - -

🌳 Weather for the City of Seattle πŸƒ

- ->>>>>>> 0f3fb3384d5f3188f19f835a89aa2337cd69bcfa +

WEATHER CHANNEL

+

🌳 Weather for the City of Seattle πŸƒ

diff --git a/src/index.js b/src/index.js index 8fdaca185..0c59c561e 100644 --- a/src/index.js +++ b/src/index.js @@ -127,7 +127,7 @@ const updateSky = () => { skyColor = 'cloud'; } else if (inputSky === 'sunshine') { sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - skyColor = 'sunny'; + skyColor = 'sunshine'; } else if (inputSky === 'rain') { sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; skyColor = 'rain'; From a3b3ca2632a5dfcbabae1e976cad604c7e1cde6f Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 18:55:42 -0500 Subject: [PATCH 28/36] updated sky code --- index.html | 9 ++++++--- src/index.js | 21 ++++++++++++--------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index b0ed207a2..c9baff0aa 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -9,8 +10,10 @@ -

WEATHER CHANNEL

-

🌳 Weather for the City of Seattle πŸƒ

+

WEATHER CHANNEL

+ +

🌳 Weather for the City of Seattle πŸƒ

+
@@ -53,4 +56,4 @@

Weather Visual

- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 0c59c561e..62904913e 100644 --- a/src/index.js +++ b/src/index.js @@ -114,11 +114,22 @@ const displayEmojis = () => { } const newEmojis = document.getElementById('emojis-below'); newEmojis.textContent = emojisBelow; + const temperature = document.getElementById('tempNum'); temperature.className = numColor; temperature.textContent = String(state.temp); + // SKY EMOJIS + const inputSky = document.getElementById('skyOptions').value; + inputSky.textContent = inputSky; + + const skyContainer = document.getElementById('sky-weather'); + skyContainer.className = skySection; + skyContainer.textContent = String(state.temp); }; +skyContainer.textContent = sky; +skyOptions.addEventListener('change', updateSky); + const updateSky = () => { let sky = ''; let skyColor = ''; @@ -127,7 +138,7 @@ const updateSky = () => { skyColor = 'cloud'; } else if (inputSky === 'sunshine') { sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - skyColor = 'sunshine'; + skyColor = 'sunny'; } else if (inputSky === 'rain') { sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; skyColor = 'rain'; @@ -138,14 +149,6 @@ const updateSky = () => { sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; skyColor = 'wind'; } - - const inputSky = document.getElementById('skyOptions').value; - inputSky.textContent = inputSky; - const skyContainer = document.getElementById('sky-weather'); - skyContainer.className = skySection; - skyContainer.textContent = String(state.temp); - // skyContainer.textContent = sky; - // skyOptions.addEventListener('change', updateSky); }; console.log(updateSky); From 3ba686ffcc435c6aa12a2279b3401ca17f1424b1 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 18:56:26 -0500 Subject: [PATCH 29/36] updated sky code --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index 62904913e..ddaad9843 100644 --- a/src/index.js +++ b/src/index.js @@ -131,6 +131,8 @@ skyContainer.textContent = sky; skyOptions.addEventListener('change', updateSky); const updateSky = () => { + const inputSky = document.getElementById('skyOptions').value; + inputSky.textContent = inputSky; let sky = ''; let skyColor = ''; if (inputSky === 'clouds') { From 71efe0ef3150f913e661cf9ead3fd5b7d14a0563 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 18:57:06 -0500 Subject: [PATCH 30/36] updated sky code --- src/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.js b/src/index.js index ddaad9843..964fdb1a3 100644 --- a/src/index.js +++ b/src/index.js @@ -151,6 +151,10 @@ const updateSky = () => { sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; skyColor = 'wind'; } + skyContainer.textContent = sky; + const changeSky = document.getElementById('weatherEmojis'); + weatherEmojis.classList = `${skyColor}`; + // skyOptions.addEventListener('change', updateSky); }; console.log(updateSky); From f19f9c644475fbdbe8ddb56fce5338f291c01ac5 Mon Sep 17 00:00:00 2001 From: Diana Soriano Date: Sun, 11 Dec 2022 19:05:57 -0500 Subject: [PATCH 31/36] updated sky code --- src/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 964fdb1a3..ee2e5e101 100644 --- a/src/index.js +++ b/src/index.js @@ -128,7 +128,8 @@ const displayEmojis = () => { }; skyContainer.textContent = sky; -skyOptions.addEventListener('change', updateSky); + +// skyOptions.addEventListener('change', updateSky); const updateSky = () => { const inputSky = document.getElementById('skyOptions').value; @@ -152,9 +153,12 @@ const updateSky = () => { skyColor = 'wind'; } skyContainer.textContent = sky; - const changeSky = document.getElementById('weatherEmojis'); weatherEmojis.classList = `${skyColor}`; + updateSky(); // skyOptions.addEventListener('change', updateSky); }; +updateSky(); +const chooseSky = document.getElementById('weatherEmojis'); +chooseSky.addEventListener('change', updateSky); console.log(updateSky); From 219ae056ea6ff6e77e08c8a14072365c2edeac62 Mon Sep 17 00:00:00 2001 From: Cristal Date: Mon, 12 Dec 2022 07:40:09 -0800 Subject: [PATCH 32/36] updateSky working --- src/index.js | 27 ++++++++------------------- styles/index.css | 18 +++++++++++++++++- 2 files changed, 25 insertions(+), 20 deletions(-) diff --git a/src/index.js b/src/index.js index ee2e5e101..ee9cf788a 100644 --- a/src/index.js +++ b/src/index.js @@ -18,6 +18,7 @@ const convertKtoF = (temp) => { return (temp - 273.15) * (9 / 5) + 32; }; +// increase/decrease const upButton = document.getElementById('up'); const downButton = document.getElementById('down'); let display = document.getElementById('tempNum'); @@ -118,30 +119,19 @@ const displayEmojis = () => { const temperature = document.getElementById('tempNum'); temperature.className = numColor; temperature.textContent = String(state.temp); - // SKY EMOJIS - const inputSky = document.getElementById('skyOptions').value; - inputSky.textContent = inputSky; - - const skyContainer = document.getElementById('sky-weather'); - skyContainer.className = skySection; - skyContainer.textContent = String(state.temp); }; -skyContainer.textContent = sky; - -// skyOptions.addEventListener('change', updateSky); - const updateSky = () => { - const inputSky = document.getElementById('skyOptions').value; - inputSky.textContent = inputSky; + const inputSky = document.getElementById('climate').value; + // inputSky.textContent = inputSky; let sky = ''; let skyColor = ''; if (inputSky === 'clouds') { sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; skyColor = 'cloud'; } else if (inputSky === 'sunshine') { - sky = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; - skyColor = 'sunny'; + sky = '☁️☁️☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️☁️☁️'; + skyColor = 'sunnshine'; } else if (inputSky === 'rain') { sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; skyColor = 'rain'; @@ -152,13 +142,12 @@ const updateSky = () => { sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; skyColor = 'wind'; } + + const skyContainer = document.getElementById('weather-emojis'); skyContainer.textContent = sky; - weatherEmojis.classList = `${skyColor}`; - updateSky(); - // skyOptions.addEventListener('change', updateSky); }; updateSky(); -const chooseSky = document.getElementById('weatherEmojis'); +const chooseSky = document.getElementById('climate'); chooseSky.addEventListener('change', updateSky); console.log(updateSky); diff --git a/styles/index.css b/styles/index.css index d99cfbb19..9d4cd928c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -36,7 +36,7 @@ body { } .emojis { - background: rgb(0, 255, 204); + background: rgb(121, 194, 121); float: left; width: 50%; height: 400px; @@ -72,3 +72,19 @@ body { .grey { color: grey; } + +.clouds { + color: grey +} +.rain { + color: cadetblue +} +.sunshine { + color: orangered +} +.wind { + color: darkgray +} +.snow { + color:aliceblue +} \ No newline at end of file From c4dfabd384d9c12ce27f2cea2ecfdd14e7f12764 Mon Sep 17 00:00:00 2001 From: Cristal Date: Mon, 12 Dec 2022 07:48:42 -0800 Subject: [PATCH 33/36] comments --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index ee9cf788a..85b53bc76 100644 --- a/src/index.js +++ b/src/index.js @@ -123,7 +123,6 @@ const displayEmojis = () => { const updateSky = () => { const inputSky = document.getElementById('climate').value; - // inputSky.textContent = inputSky; let sky = ''; let skyColor = ''; if (inputSky === 'clouds') { From 41fcea15547d4e450fdfc033749020de551e9e37 Mon Sep 17 00:00:00 2001 From: Cristal Date: Mon, 12 Dec 2022 08:11:49 -0800 Subject: [PATCH 34/36] updated emojis --- src/index.js | 17 ++++++----------- styles/index.css | 4 ++-- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/index.js b/src/index.js index 85b53bc76..f003ffb77 100644 --- a/src/index.js +++ b/src/index.js @@ -96,18 +96,18 @@ const displayCity = () => { const displayEmojis = () => { let numColor = 'red'; - let emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + let emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌴__🐍_🏜_πŸ¦‚'; if (state.temp > 80) { - emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + emojisBelow = '🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_🌴'; numColor = 'red'; } else if (state.temp > 70) { - emojisBelow = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + emojisBelow = '🌸🌿🌼__πŸŒ·πŸŒ»πŸ¦‹_☘️🌱_πŸ¦‹πŸŒ·'; numColor = 'orange'; } else if (state.temp > 60) { - emojisBelow = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + emojisBelow = 'πŸ₯ΎπŸžοΈπŸ•πŸ§—πŸš΅β›°_πŸͺ¨πŸ₯ΎπŸžοΈπŸ•πŸ§—πŸš΅β›°'; numColor = 'green'; } else if (state.temp > 50) { - emojisBelow = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + emojisBelow = 'πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅'; numColor = 'purple'; } else { emojisBelow = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; @@ -124,27 +124,22 @@ const displayEmojis = () => { const updateSky = () => { const inputSky = document.getElementById('climate').value; let sky = ''; - let skyColor = ''; if (inputSky === 'clouds') { sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; - skyColor = 'cloud'; } else if (inputSky === 'sunshine') { sky = '☁️☁️☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️☁️☁️'; - skyColor = 'sunnshine'; } else if (inputSky === 'rain') { sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; - skyColor = 'rain'; } else if (inputSky === 'snow') { sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; - skyColor = 'snow'; } else if (inputSky === 'wind') { sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; - skyColor = 'wind'; } const skyContainer = document.getElementById('weather-emojis'); skyContainer.textContent = sky; }; + updateSky(); const chooseSky = document.getElementById('climate'); chooseSky.addEventListener('change', updateSky); diff --git a/styles/index.css b/styles/index.css index 9d4cd928c..009659827 100644 --- a/styles/index.css +++ b/styles/index.css @@ -80,11 +80,11 @@ body { color: cadetblue } .sunshine { - color: orangered + color: rgb(232, 155, 39) } .wind { color: darkgray } .snow { - color:aliceblue + color:rgb(165, 192, 216) } \ No newline at end of file From 68b656879396ed595f8dc7b3e03669bc3a6a3001 Mon Sep 17 00:00:00 2001 From: Cristal Date: Mon, 12 Dec 2022 08:13:41 -0800 Subject: [PATCH 35/36] removed comments --- src/index.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/index.js b/src/index.js index f003ffb77..23d465d9b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,5 @@ 'use strict'; -// const { default: axios } = 'axios'; - -// State, city, temp, sky - -// "https://us1.locationiq.com/v1/search.php" -// "https://api.openweathermap.org/data/2.5/weather" - const state = { city: 'Seattle', lat: 47.6038321, From ec787d9af1d12a3041c865b3cf0c6e3b28c62eab Mon Sep 17 00:00:00 2001 From: Cristal Date: Mon, 12 Dec 2022 08:14:30 -0800 Subject: [PATCH 36/36] final --- styles/index.css | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/styles/index.css b/styles/index.css index 009659827..dfc5fc387 100644 --- a/styles/index.css +++ b/styles/index.css @@ -73,18 +73,3 @@ body { color: grey; } -.clouds { - color: grey -} -.rain { - color: cadetblue -} -.sunshine { - color: rgb(232, 155, 39) -} -.wind { - color: darkgray -} -.snow { - color:rgb(165, 192, 216) -} \ No newline at end of file