From 17d7068cdeef46480139367436ac1f2eb4db4b8d Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Tue, 6 Dec 2022 13:54:58 -0800 Subject: [PATCH 01/37] initial commit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 68b320b9a..b50de5d1e 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,6 @@ Weather Report - + \ No newline at end of file From 25101b3c1a6d0a63c3b6e2ebd6664874266978e5 Mon Sep 17 00:00:00 2001 From: bukunmig Date: Wed, 7 Dec 2022 14:55:17 -0800 Subject: [PATCH 02/37] Update/feat: Connected stylesheets, added ReadME --- README ESBG.md | 123 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 2 files changed, 124 insertions(+) create mode 100644 README ESBG.md diff --git a/README ESBG.md b/README ESBG.md new file mode 100644 index 000000000..8e4b04468 --- /dev/null +++ b/README ESBG.md @@ -0,0 +1,123 @@ +# Weather Report + +## Skills Assessed + +- Following directions and reading comprehension +- Structuring content in HTML +- Applying styles with CSS +- Using variables +- Creating functions +- Manipulating the DOM +- Handling events +- Using Git +- Designing an intentional user experience +- Using Axios to call 3rd party APIs +- Using a proxy server to manage API keys +- Handling asynchronous calls + +## Goal + +"Do I need to bring a jacket?" "Will it snow today?" "How hot will it be?" When we have questions like these, we often pull open a weather app! + +Great weather apps do these two things: + +1. Pull weather data from a data source +1. Display the weather in readable, compelling way + +![DuckDuckGo's weather modal, which features city name, temperature reading, and the weather. Some icons show sunny weather, some icons show rainy weather, and some show cloudy weather.](ada-project-docs/assets/example-duckduckgo.png) +_Fig. DuckDuckGo's weather modal, which features city name, temperature reading, and weather icons._ + +Our goal is to create a fun, small weather app that focuses on displaying the weather. + +Our weather app will set the weather using user interaction and get the weather from a 3rd party API, OpenWeather. + +![Example weather app: The temperature reads 62, in yellow text. The selected dropdown for "Sky" is "Cloudy." There is a depiction of cloudy weather. The city name is "Hoboken." The header reads "Hoboken."](ada-project-docs/assets/cloudy-62.png) +_Fig. Example weather app displaying the weather for Hoboken._ + +![Example weather app: The temperature reads 85, in red text. The selected dropdown for "Sky" is "Sunny." There is a depiction of sunny weather. The city name is "Santo Domingo" The header reads "Santo Domingo."](ada-project-docs/assets/santo-domingo-85.png) +_Fig. Example weather app displaying the weather for Santo Domingo._ + +![Example weather app: The temperature reads 38, in teal text. The selected dropdown for "Sky" is "Snowy." There is a depiction of snowy weather. The city name is "Bozeman." The header reads "Bozeman."](ada-project-docs/assets/snow-38.png) +_Fig. Example weather app displaying the weather for Bozeman._ + +![Example weather app: The temperature reads 49, in teal text. The selected dropdown for "Sky" is "Rainy." There is a depiction of rainy weather. The city name is "Seattle." The header reads "Seattle."](ada-project-docs/assets/rainy-49.png) +_Fig. Example weather app displaying the weather for Seattle._ + +## How to Complete and Submit + +Follow the requirements below and build a small weather app. + +At submission time, no matter where you are, submit the project via Learn. + +## JavaScript Requirements + +You are required to use vanilla JavaScript for all parts of this project, including the optional enhancements. + +## Axios +The only extra JavaScript library we should load is [`Axios`](https://axios-http.com/docs/intro). + +To download the `axios` node module, run `yarn install` + +To include axios in your project, include the following script tag below the script tag linking `index.js`: +- `` + +This should be done during the Wave 1 initial setup of your `index.html` page. + +## Workflow Requirements + +- Create at least five git commits throughout this project +- Use the following files and folders: + - `index.html` + - `src/index.js` + - `styles/index.css` + - `assets` folder, potentially for holding images +- Create and add more folders and files as needed + +## Content Requirements + +For this project, there are no requirements around color schemes, font choices, or layouts. + +Note that applying styles with CSS is one of many learning goals of this project -- it is not the central learning goal. You may enjoy being creative with styles, but we encourage you to not concern yourself with getting the styles perfect. Remember, you can always choose to continue working on styling after you've completed all functional requirements. + +However, _at a minimum_, your project must contain these elements: + +Wave 2: + +1. An element that displays the temperature +1. A clickable element to increase temperature +1. A clickable element to decrease temperature +1. An element that displays a landscape + +Wave 3: + +1. An element that displays the city name +1. An element that contains an `` element, used to rename the city + +Wave 4: + +1. A clickable element to get the current temperature of the displayed city name + +Wave 5: + +1. A ` + +
@@ -38,8 +41,8 @@

Want to see a different city? Input one here:

+
-

Current temperature is:

@@ -49,11 +52,16 @@

What if our city was...

or
-

Want to see a different sky? Select one here:

- +
From 44974e834a4b51c136bd88068600ba4621186e8b Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 13:42:39 -0800 Subject: [PATCH 22/37] more HTML formatting --- index.html | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index a42b3042e..bed27055f 100644 --- a/index.html +++ b/index.html @@ -15,8 +15,8 @@

Interactive Weather Report

By Bukunmi Gesinde & Elsje Slothower

-
+

Currently viewing the weather in:

@@ -31,17 +31,16 @@

Want to see a different city? Input one here:

- -
- -
- + +
+
- - + +

Current temperature is:

@@ -65,9 +64,11 @@

Want to see a different sky? Select one here:

+

Bukunmi Gesinde & Elsje Slothower © 2022

+ From 015dd2ddbe5c25e2c332716ea0516bd44b739675 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 13:48:40 -0800 Subject: [PATCH 23/37] added sky & landscape sections --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index bed27055f..e8f0ff490 100644 --- a/index.html +++ b/index.html @@ -35,9 +35,8 @@

Want to see a different city? Input one here:

- +
+
From 7d283b6ca7ac77ef855969b15c4febf231c4dec0 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 14:11:31 -0800 Subject: [PATCH 24/37] CSS adjustments --- index.html | 4 ++-- styles/index.css | 12 ++++++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index e8f0ff490..1331c7eca 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@

Interactive Weather Report

-

By Bukunmi Gesinde & Elsje Slothower

+

By Bukunmi Gesinde & Elsje Slothower

@@ -65,7 +65,7 @@

Want to see a different sky? Select one here:

-

Bukunmi Gesinde & Elsje Slothower © 2022

+

Bukunmi Gesinde & Elsje Slothower © 2022

diff --git a/styles/index.css b/styles/index.css index f2fcd0fd0..326c3f5be 100644 --- a/styles/index.css +++ b/styles/index.css @@ -6,11 +6,15 @@ } - +header { + text-align: center; + line-height: 1.8; +} /* id selectors */ #displayedTemp { - background-color: var(--primaryColor); + color: var(--primaryColor); + font-weight: bold; } #increaseTemp { @@ -42,4 +46,8 @@ .interactive{ background-color: var(--lightColor); +} + +.credits { + font-size: .8em; } \ No newline at end of file From 01cfe1ee792ffdbcb2f3aeb5bbef1b125cebfb69 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 14:11:43 -0800 Subject: [PATCH 25/37] JS file formatting --- src/index.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.js b/src/index.js index 7bb94ead8..c7c62669c 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,16 @@ const tempChange = () => { console.log("clicked"); } +const increasedTemp = () => { + state.temp += 1; + tempChange(); +} + +const decreasedTemp = () => { + state.temp -= 1; + tempChange(); +} + const loadControls = () => { tempChange(); @@ -23,14 +33,4 @@ const loadControls = () => { console.log("loaded successfully"); } -const increasedTemp = () => { - state.temp += 1; - tempChange(); -} - -const decreasedTemp = () => { - state.temp -= 1; - tempChange(); -} - document.addEventListener("DOMContentLoaded", loadControls); \ No newline at end of file From 0b0aa99d30be80092dc87ce29e13cf277da08b1b Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 14:15:05 -0800 Subject: [PATCH 26/37] changed axios settings for smooth API calls --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 203d3c922..6f083c913 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "dependencies": { - // "axios": "^0.27.2" "axios": "~1.1" } } From f625c7292fcb6860fbdde090fc9b2d07e1372cf6 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sat, 10 Dec 2022 14:40:55 -0800 Subject: [PATCH 27/37] web formatting --- index.html | 6 +++--- styles/index.css | 5 +++++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 1331c7eca..8afb96b3f 100644 --- a/index.html +++ b/index.html @@ -19,8 +19,8 @@

By Bukunmi Gesinde & Elsje Slothower

-

Currently viewing the weather in:

- +

Current weather in:

+ Seattle

To view the precise temp in {city}, click here:

@@ -43,7 +43,7 @@

Want to see a different city? Input one here:

Current temperature is:

- + 72

What if our city was...

diff --git a/styles/index.css b/styles/index.css index 326c3f5be..1cfafa02e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -15,6 +15,7 @@ header { #displayedTemp { color: var(--primaryColor); font-weight: bold; + font-size: 2em; } #increaseTemp { @@ -25,6 +26,10 @@ header { background-color: lightblue; } +#currentCity { + font-size: 2em; +} + /* class selectors */ From 893c8356b242d7d17d1ab7ead924f842855d8276 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 14:28:25 -0800 Subject: [PATCH 28/37] connected JS to HTML successfully --- index.html | 2 +- src/index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 8afb96b3f..2be359925 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,7 @@

Bukunmi Gesinde & Elsje Slothower © 2022

- + \ No newline at end of file diff --git a/src/index.js b/src/index.js index c7c62669c..6e98ccd96 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,4 @@ -import axios from "axios"; +// import axios from "axios"; const state = { temp: 72, @@ -21,7 +21,7 @@ const decreasedTemp = () => { tempChange(); } -const loadControls = () => { +const registerEventHandlers = () => { tempChange(); const increasedTempButton = document.getElementById("increaseTemp"); @@ -33,4 +33,4 @@ const loadControls = () => { console.log("loaded successfully"); } -document.addEventListener("DOMContentLoaded", loadControls); \ No newline at end of file +document.addEventListener('DOMContentLoaded', registerEventHandlers); \ No newline at end of file From fa4ac674b3a4df0da1eb990f1fc32abfcd8b0f09 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 14:43:55 -0800 Subject: [PATCH 29/37] temperature ranges change text color --- src/index.js | 24 ++++++++++++++++++++++-- styles/index.css | 26 ++++++++++++++++++++++++-- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 6e98ccd96..c22b26f8d 100644 --- a/src/index.js +++ b/src/index.js @@ -5,12 +5,32 @@ const state = { } const tempChange = () => { - const temp = document.getElementById("displayedTemp"); + let color = "red"; + let temp = state.temp + if (temp > 80) { + color = "red"; + } else if (temp > 70) { + color = "orange"; + } else if (temp > 60) { + color = "yellow"; + } else if (temp > 50) { + color = "green"; + } else { + color = "blue"; + } + + temp = document.getElementById("displayedTemp"); + temp.className = color; temp.textContent = String(state.temp) - + console.log("clicked"); } +const landscapeChange = () => { + let temp = state.temp; + +} + const increasedTemp = () => { state.temp += 1; tempChange(); diff --git a/styles/index.css b/styles/index.css index 1cfafa02e..1d875c527 100644 --- a/styles/index.css +++ b/styles/index.css @@ -13,7 +13,6 @@ header { /* id selectors */ #displayedTemp { - color: var(--primaryColor); font-weight: bold; font-size: 2em; } @@ -55,4 +54,27 @@ header { .credits { font-size: .8em; -} \ No newline at end of file +} + +/* color options for +temp & landscape background */ + +.red { + color: red; + } + +.orange { + color: orange; + } + +.yellow { + color: yellow; + } + +.green { + color: green; + } + +.blue { + color: blue; + } \ No newline at end of file From 37337f958fcc414cdf5ecb0fb59e889b40cf4186 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 14:54:35 -0800 Subject: [PATCH 30/37] wave 2 complete --- src/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/index.js b/src/index.js index c22b26f8d..4e392ae8d 100644 --- a/src/index.js +++ b/src/index.js @@ -28,21 +28,38 @@ const tempChange = () => { const landscapeChange = () => { let temp = state.temp; + let landscape = "hot!" + if (temp > 80) { + landscape = "hot hot!"; + } else if (temp > 70) { + landscape = "warmm"; + } else if (temp > 60) { + landscape = "nice"; + } else if (temp > 50) { + landscape = "cool"; + } else { + landscape = "**shiver shiver**"; + } + const updatedLandscape = document.getElementById("skyAndLandscape"); + updatedLandscape.textContent = landscape; } const increasedTemp = () => { state.temp += 1; tempChange(); + landscapeChange(); } const decreasedTemp = () => { state.temp -= 1; tempChange(); + landscapeChange(); } const registerEventHandlers = () => { tempChange(); + landscapeChange(); const increasedTempButton = document.getElementById("increaseTemp"); increasedTempButton.addEventListener("click", increasedTemp); From 5a24b7ee864b425b4fb194e382cf8201594cc170 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 15:32:28 -0800 Subject: [PATCH 31/37] wave 03 completed --- index.html | 6 +++--- src/index.js | 22 ++++++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 2be359925..ed3301f64 100644 --- a/index.html +++ b/index.html @@ -28,8 +28,8 @@

To view the precise temp in {city}, click here:

Want to see a different city? Input one here:

- - + +
@@ -49,7 +49,7 @@

Current temperature is:

What if our city was...

or
- +

Want to see a different sky? Select one here:

diff --git a/src/index.js b/src/index.js index 4e392ae8d..bd74f50df 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ const state = { temp: 72, + city: "Seattle", } const tempChange = () => { @@ -57,9 +58,24 @@ const decreasedTemp = () => { landscapeChange(); } +const cityNameChange = () => { + let currentCity = document.getElementById("currentCity"); + let newCity = document.getElementById("newCity").value; + state.city = newCity; + currentCity.textContent = state.city; + console.log("inputted city"); +} + +const resetCity = () => { + let newCityInput = document.getElementById("newCity"); + newCityInput.value = "Seattle"; + cityNameChange(); +} + const registerEventHandlers = () => { tempChange(); landscapeChange(); + cityNameChange(); const increasedTempButton = document.getElementById("increaseTemp"); increasedTempButton.addEventListener("click", increasedTemp); @@ -67,6 +83,12 @@ const registerEventHandlers = () => { const decreasedTempButton = document.getElementById("decreaseTemp"); decreasedTempButton.addEventListener("click", decreasedTemp); + const cityNameChangeInput = document.getElementById("newCity"); + cityNameChangeInput.addEventListener("input", cityNameChange); + + const resetCityButton = document.getElementById("changeCity"); + resetCityButton.addEventListener("click", resetCity); + console.log("loaded successfully"); } From 3391a73ccfbcc14f1176d5090a724dca7fb056ac Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 16:51:29 -0800 Subject: [PATCH 32/37] API Calls --- index.html | 2 +- src/index.js | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index ed3301f64..87780a1fb 100644 --- a/index.html +++ b/index.html @@ -53,7 +53,7 @@

What if our city was...

Want to see a different sky? Select one here:

- diff --git a/src/index.js b/src/index.js index bd74f50df..ee9684876 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,14 @@ -// import axios from "axios"; +"use strict"; const state = { temp: 72, city: "Seattle", + lat: "47.6038321", + lon: "-122.330062", } +// display changes + const tempChange = () => { let color = "red"; let temp = state.temp @@ -70,8 +74,60 @@ const resetCity = () => { let newCityInput = document.getElementById("newCity"); newCityInput.value = "Seattle"; cityNameChange(); + console.log("reset city"); +} + +// API Calls + +const toFahrenheit = (k) => (k - 273.15) * (9 / 5) + 32; + +const getWeather = () => { + axios + .get("http://127.0.0.1:5000/weather", { + params: { + lat: state.lat, + lon: state.lon, + } + }) + .then( (response) => { + const weather = response.data; + const cityTemp = Math.round(toFahrenheit(weather.main.temp)); + state.temp = cityTemp + console.log("success!!", response.status); + tempChange(); + landscapeChange(); + }) + .catch( (error) => { + console.log("weather error", + error.status, error.response); + }) } +const getLatAndLon = () => { + let lat, lon; + axios + .get("http://127.0.0.1:5000/location", { + params: { + q: state.city, + format: "json", + } + }) + .then( (response) => { + lat = response.data[0].lat; + lon = response.data[0].lon; + console.log("success!!", response.status); + state.lat = lat; + state.lon = lon; + getWeather(); + }) + .catch( (error) => { + console.log("location error", + error.status, error.response); + }) +} + +// Event Listeners + const registerEventHandlers = () => { tempChange(); landscapeChange(); @@ -89,6 +145,9 @@ const registerEventHandlers = () => { const resetCityButton = document.getElementById("changeCity"); resetCityButton.addEventListener("click", resetCity); + const realTimeTemp = document.getElementById("tempRequest"); + realTimeTemp.addEventListener("click", getLatAndLon); + console.log("loaded successfully"); } From 70e81210806ff2c5d7ef76df6ad8f0951a5720a6 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 17:37:40 -0800 Subject: [PATCH 33/37] added feature to select a new sky --- index.html | 6 +++--- src/index.js | 33 +++++++++++++++++++++++++++++++- styles/index.css | 50 ++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 79 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 87780a1fb..bdeb21caf 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@

By Bukunmi Gesinde & Elsje Slothower

-
+

Current weather in:

Seattle @@ -34,13 +34,13 @@

Want to see a different city? Input one here:

-
+
-
+

Current temperature is:

72 diff --git a/src/index.js b/src/index.js index ee9684876..5252551db 100644 --- a/src/index.js +++ b/src/index.js @@ -46,10 +46,37 @@ const landscapeChange = () => { landscape = "**shiver shiver**"; } - const updatedLandscape = document.getElementById("skyAndLandscape"); + const updatedLandscape = document.getElementById("landscape"); updatedLandscape.textContent = landscape; } +const skyChange = () => { + let skySelection = document.getElementById("updateSky").value; + const skyEmojis = document.getElementById("sky"); + let sky = ""; + let atmosphere = ""; + if (skySelection == "Sunny") { + sky = "add sun emojis here"; + atmosphere = "sunny"; + } else if (skySelection == "Cloudy") { + sky = "add cloud emojis here"; + atmosphere = "cloudy"; + } else if (skySelection == "Rainy") { + sky = "add rain emojis here"; + atmosphere = "rainy"; + } else if (skySelection == "Snowy") { + sky = "add snow emojis here"; + atmosphere = "snowy"; + } else if (skySelection == "Stormy") { + sky = "add lightning emojis here"; + atmosphere = "stormy"; + } + + skyEmojis.textContent = sky; + const weatherBox = document.getElementById("skyAndLandscape"); + weatherBox.classList = `weatherFlexBox ${atmosphere}`; +} + const increasedTemp = () => { state.temp += 1; tempChange(); @@ -132,6 +159,7 @@ const registerEventHandlers = () => { tempChange(); landscapeChange(); cityNameChange(); + skyChange(); const increasedTempButton = document.getElementById("increaseTemp"); increasedTempButton.addEventListener("click", increasedTemp); @@ -148,6 +176,9 @@ const registerEventHandlers = () => { const realTimeTemp = document.getElementById("tempRequest"); realTimeTemp.addEventListener("click", getLatAndLon); + const updateSky = document.getElementById("updateSky"); + updateSky.addEventListener("change", skyChange); + console.log("loaded successfully"); } diff --git a/styles/index.css b/styles/index.css index 1d875c527..450bdb282 100644 --- a/styles/index.css +++ b/styles/index.css @@ -29,7 +29,6 @@ header { font-size: 2em; } - /* class selectors */ .container{ @@ -44,10 +43,6 @@ header { grid-template-columns: repeat(3,1fr); } -.b { - background-color: var(--primaryColor); -} - .interactive{ background-color: var(--lightColor); } @@ -56,6 +51,27 @@ header { font-size: .8em; } +/* weather flex box formatting */ + +.weatherFlexBox { + background-color: var(--primaryColor); + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#sky { + text-align: center; + line-height: 10; + border: 3px solid darkblue; +} + +#landscape { + text-align: center; + line-height: 10; + border: 3px solid darkgrey; +} + /* color options for temp & landscape background */ @@ -77,4 +93,26 @@ temp & landscape background */ .blue { color: blue; - } \ No newline at end of file + } + +/* color options for atmosphere */ + +.sunny { + background-color: gold; +} + +.cloudy { + background-color: beige; +} + +.rainy { + background-color: lightskyblue; +} + +.snowy { + background-color: oldlace; +} + +.stormy { + background-color: grey; +} \ No newline at end of file From b47cb5ae586e0993b9389aa74993d96ae38fdb18 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 18:06:17 -0800 Subject: [PATCH 34/37] styling changes --- index.html | 3 ++- src/index.js | 22 +++++++++++++--------- styles/index.css | 2 +- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index bdeb21caf..49dbc6b3d 100644 --- a/index.html +++ b/index.html @@ -48,8 +48,9 @@

Current temperature is:

What if our city was...

-
or
+ or + ?

Want to see a different sky? Select one here:

diff --git a/src/index.js b/src/index.js index 5252551db..0f7e8fe1e 100644 --- a/src/index.js +++ b/src/index.js @@ -7,10 +7,10 @@ const state = { lon: "-122.330062", } -// display changes +// Display Changes const tempChange = () => { - let color = "red"; + let color = ""; let temp = state.temp if (temp > 80) { color = "red"; @@ -33,8 +33,10 @@ const tempChange = () => { const landscapeChange = () => { let temp = state.temp; - let landscape = "hot!" - if (temp > 80) { + let landscape = ""; + if (temp > 110) { + landscape = "deadly"; + } else if (temp > 80) { landscape = "hot hot!"; } else if (temp > 70) { landscape = "warmm"; @@ -42,6 +44,8 @@ const landscapeChange = () => { landscape = "nice"; } else if (temp > 50) { landscape = "cool"; + } else if (temp > 0) { + landscape = "coldd"; } else { landscape = "**shiver shiver**"; } @@ -56,19 +60,19 @@ const skyChange = () => { let sky = ""; let atmosphere = ""; if (skySelection == "Sunny") { - sky = "add sun emojis here"; + sky = "β˜€οΈ"; atmosphere = "sunny"; } else if (skySelection == "Cloudy") { - sky = "add cloud emojis here"; + sky = "🌀️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"; atmosphere = "cloudy"; } else if (skySelection == "Rainy") { - sky = "add rain emojis here"; + sky = "🌦️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️"; atmosphere = "rainy"; } else if (skySelection == "Snowy") { - sky = "add snow emojis here"; + sky = "β›…πŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈ"; atmosphere = "snowy"; } else if (skySelection == "Stormy") { - sky = "add lightning emojis here"; + sky = "πŸŒ₯οΈβ›ˆοΈπŸŒ©οΈβ›ˆοΈπŸŒ©οΈβ›ˆοΈπŸŒ©οΈβ›ˆοΈπŸŒ©οΈβ›ˆοΈπŸŒ©οΈβ›ˆοΈ"; atmosphere = "stormy"; } diff --git a/styles/index.css b/styles/index.css index 450bdb282..07e1f65de 100644 --- a/styles/index.css +++ b/styles/index.css @@ -63,7 +63,7 @@ header { #sky { text-align: center; line-height: 10; - border: 3px solid darkblue; + border: 3px solid darkgrey; } #landscape { From 1c53eea9149a9615e86e31c001f4a69eb8e19808 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 18:22:35 -0800 Subject: [PATCH 35/37] more styling changes --- src/index.js | 16 ++++++++-------- styles/index.css | 7 +++---- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/index.js b/src/index.js index 0f7e8fe1e..07d551a17 100644 --- a/src/index.js +++ b/src/index.js @@ -35,19 +35,19 @@ const landscapeChange = () => { let temp = state.temp; let landscape = ""; if (temp > 110) { - landscape = "deadly"; + landscape = "πŸ”₯πŸŒ‹πŸ”₯πŸŒ‹πŸ”₯πŸŒ‹πŸ”₯πŸŒ‹πŸ”₯πŸŒ‹"; } else if (temp > 80) { - landscape = "hot hot!"; + landscape = "πŸŒ΅πŸπŸ¦‚πŸŒ΅πŸ«πŸŒ΅πŸπŸœπŸ¦‚πŸͺ"; } else if (temp > 70) { - landscape = "warmm"; + landscape = "🌸🌿🌼🌷🌻🌿☘️🌱🌻🌷"; } else if (temp > 60) { - landscape = "nice"; + landscape = "πŸŒΎπŸŒΎπŸƒπŸͺ¨πŸ›€πŸŒΎπŸŒΎβ›°οΈπŸŒΎπŸƒ"; } else if (temp > 50) { - landscape = "cool"; + landscape = "πŸŒ²πŸŒ²πŸŒ²πŸ‚πŸŒ²πŸπŸŒ²πŸŒ²πŸ‚πŸŒ²"; } else if (temp > 0) { - landscape = "coldd"; + landscape = "πŸ§Šβ„οΈβ›„πŸ§Šβ„οΈβ›„πŸ”οΈπŸ§Šβ„οΈβ›„"; } else { - landscape = "**shiver shiver**"; + landscape = "🧊🧊🐧🧊🧊🧊🐧🧊🧊🧊"; } const updatedLandscape = document.getElementById("landscape"); @@ -66,7 +66,7 @@ const skyChange = () => { sky = "🌀️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️"; atmosphere = "cloudy"; } else if (skySelection == "Rainy") { - sky = "🌦️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️"; + sky = "🌦️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️🌧️"; atmosphere = "rainy"; } else if (skySelection == "Snowy") { sky = "β›…πŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈπŸŒ¨οΈ"; diff --git a/styles/index.css b/styles/index.css index 07e1f65de..4edc0714e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -62,13 +62,12 @@ header { #sky { text-align: center; - line-height: 10; - border: 3px solid darkgrey; + font-size: 2em; } #landscape { text-align: center; - line-height: 10; + font-size: 2em; border: 3px solid darkgrey; } @@ -110,7 +109,7 @@ temp & landscape background */ } .snowy { - background-color: oldlace; + background-color: snow; } .stormy { From db895cca606a05c2086d841fc29a9136aefd864e Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 18:23:31 -0800 Subject: [PATCH 36/37] sc --- styles/index.css | 1 - 1 file changed, 1 deletion(-) diff --git a/styles/index.css b/styles/index.css index 4edc0714e..5d0848b09 100644 --- a/styles/index.css +++ b/styles/index.css @@ -68,7 +68,6 @@ header { #landscape { text-align: center; font-size: 2em; - border: 3px solid darkgrey; } /* color options for From 1fbf5cbbff6a79a142b4d305385fdf704a988138 Mon Sep 17 00:00:00 2001 From: Elsje Slothower Date: Sun, 11 Dec 2022 18:25:07 -0800 Subject: [PATCH 37/37] removed debugging console.logs --- src/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/index.js b/src/index.js index 07d551a17..16f473cd9 100644 --- a/src/index.js +++ b/src/index.js @@ -27,8 +27,6 @@ const tempChange = () => { temp = document.getElementById("displayedTemp"); temp.className = color; temp.textContent = String(state.temp) - - console.log("clicked"); } const landscapeChange = () => { @@ -98,14 +96,12 @@ const cityNameChange = () => { let newCity = document.getElementById("newCity").value; state.city = newCity; currentCity.textContent = state.city; - console.log("inputted city"); } const resetCity = () => { let newCityInput = document.getElementById("newCity"); newCityInput.value = "Seattle"; cityNameChange(); - console.log("reset city"); } // API Calls