From 572f887e420d78845451d2cd54e4b4ad4f4b5901 Mon Sep 17 00:00:00 2001 From: Kallie Gannon Date: Sat, 10 Dec 2022 11:27:07 -0500 Subject: [PATCH 1/5] linking-complete --- index.html | 9 ++++++++- package.json | 2 +- src/index.js | 1 + yarn.lock | 24 +++++++++++++++--------- 4 files changed, 25 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 68b320b9a..6abadcb1d 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,15 @@ Weather Report + + + - \ No newline at end of file + + + \ No newline at end of file diff --git a/package.json b/package.json index 9cf5ca65b..1cfcba810 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "axios": "^0.27.2" + "axios": "^1.2.1" } } diff --git a/src/index.js b/src/index.js index e69de29bb..ba0377c63 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1 @@ +const axios = require('axios'); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 37fbaed29..26630f422 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,13 +7,14 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== -axios@^0.27.2: - version "0.27.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" - integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== +axios@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a" + integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A== dependencies: - follow-redirects "^1.14.9" + follow-redirects "^1.15.0" form-data "^4.0.0" + proxy-from-env "^1.1.0" combined-stream@^1.0.8: version "1.0.8" @@ -27,10 +28,10 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -follow-redirects@^1.14.9: - version "1.15.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" - integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== +follow-redirects@^1.15.0: + version "1.15.2" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== form-data@^4.0.0: version "4.0.0" @@ -52,3 +53,8 @@ mime-types@^2.1.12: integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== dependencies: mime-db "1.52.0" + +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== From 1e95ae11a2b0241e232f6205a011c2c8edffeb11 Mon Sep 17 00:00:00 2001 From: Kallie Gannon Date: Mon, 12 Dec 2022 08:57:24 -0500 Subject: [PATCH 2/5] title-temp-click --- index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++--- src/index.js | 4 ++- styles/index.css | 34 +++++++++++++++++++++++ 3 files changed, 104 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 6abadcb1d..6d5d69da8 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,40 @@ + + + + + Weather Report + + + + + + + +

Weather Guide

+
+ +
+
+ +
+ +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file +// - `index.js` +// - `./node_modules/axios/dist/axios.min.js` --> + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index ba0377c63..fe24038bf 100644 --- a/src/index.js +++ b/src/index.js @@ -1 +1,3 @@ -const axios = require('axios'); \ No newline at end of file +const axios = require('axios'); + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..43559ee86 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,34 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: linear-gradient(rgb(237, 243, 243), rgb(2, 223, 252)); + font-size: 2rem; + font-family:'Courier New', Courier, monospace +} +.container { + height: 25rem; + width: 40rem; + background-color: rgb(63, 190, 254); + text-align: center; + padding-top: 34px; + border-radius: 16px; + border: 2px solid rgb(14, 43, 1); +} +#temperature { + width: 20rem; + height: 5rem; + font-family: Arial, Helvetica, sans-serif; + font-size: 4rem; + + + +} \ No newline at end of file From a4437e9be1d2bc3634214b99b60917c4aed390d3 Mon Sep 17 00:00:00 2001 From: Kallie Gannon Date: Wed, 21 Dec 2022 21:34:57 -0500 Subject: [PATCH 3/5] completeish --- index.html | 123 +++++++++++++++-------------------- src/index.js | 166 ++++++++++++++++++++++++++++++++++++++++++++++- styles/index.css | 147 ++++++++++++++++++++++++++++++++--------- 3 files changed, 332 insertions(+), 104 deletions(-) diff --git a/index.html b/index.html index 6d5d69da8..18d7da69e 100644 --- a/index.html +++ b/index.html @@ -1,83 +1,64 @@ - - - - - Weather Report - - - - - - - -

Weather Guide

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

Magic Weather ReportπŸͺ„

+ + +
+
+ Magic Weather in: + + +
+
+
+
+
- + +
+
+

Temperature

+
+
+

Make a weather wish

+ πŸ”₯hotter + ❄️colder +
+ +
+
+
+

Pick Sky

+ +
- - \ No newline at end of file + \ No newline at end of file diff --git a/src/index.js b/src/index.js index fe24038bf..51041c769 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,167 @@ -const axios = require('axios'); +const state = { + city: 'Ann Arbor', + lat: 42.279594, + long: -83.732124, + temp: 25, + displayName: 'Ann Arbor, MI', +}; +const convertKtoF = (temp) => { + return (temp - 273.15) * (9 / 5) + 32; +}; +const getLatLon = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + console.log(response.data[0]); + state.lat = response.data[0].lat; + state.long = response.data[0].lon; + state.displayName = response.data[0].display_name; + getWeather(); + }) + .catch((error) => { + console.log('Error finding the latitude and longitude:', error.response); + }); +}; + +const getWeather = () => { + axios.get('http://127.0.0.1:5000/weather', { + params: { + lat: state.lat, + lon: state.long, + displayName: state.displayName, + }, + }) + .then((response) => { + console.log(response.data) + const weather = response.data; + state.temp = Math.round(convertKtoF(weather.main.temp)); + formatTempAndGarden(); + }) + .catch((error) => { + console.log('Error getting the weather:', error); + }); +}; + +const updateSky = () => { + const inputSky = document.getElementById('skySelect').value; + const skyContainer = document.getElementById('sky'); + let sky = ''; + let skyColor = ''; + if (inputSky === 'Cloudy') { + sky = 'β˜οΈπŸ‘½β˜οΈ ☁️ β˜οΈπŸ‘½β˜οΈ ☁️ 🌀 ☁️ β˜οΈπŸ‘½β˜οΈ'; + skyColor = 'cloudy'; + } else if (inputSky === 'Sunny') { + sky = '☁️ πŸ€– ☁️ πŸ€– ☁️ β˜€οΈ ☁️ πŸ€– ☁️'; + skyColor = 'sunny'; + } else if (inputSky === 'Rainy') { + sky = 'πŸ§Ÿβ€β™€οΈπŸŒˆβ›ˆπŸŒ§πŸ§Ÿβ€β™€οΈπŸ’§β›ˆπŸŒ§πŸŒ¦πŸ§Ÿβ€β™€οΈπŸ’§πŸŒ§πŸ§Ÿβ€β™€οΈ'; + skyColor = 'rainy'; + } else if (inputSky === 'Snowy') { + sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + skyColor = 'snowy'; + } + skyContainer.textContent = sky; + const gardenContent = document.getElementById('gardenContent'); + gardenContent.classList = `garden__content ${skyColor}`; +}; + + const updateCityName = () => { + const inputName = document.getElementById('cityNameInput').value; + const headerCityName = document.getElementById('headerCityName'); + state.city = inputName; + headerCityName.textContent = state.city; +}; + +const resetCityName = () => { + const cityNameInput = document.getElementById('cityNameInput'); + cityNameInput.value = 'Ann Arbor'; + updateCityName(); +}; +const updateDisplayName = () => { + let displayName = document.getElementById('weatherDisplayName'); + displayName.textContent = state.displayName; +}; + +const resetDisplay = () => { + const cityNameInput = document.getElementById('weatherDisplayName'); + cityNameInput.textContent = 'Ann Arbor, MI'; + updateDisplayName(); +}; + + +const formatTempAndGarden = () => { + let temp = state.temp; + let color = 'red'; + let landscape = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + if (temp > 80) { + color = 'red'; + landscape = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + } else if (temp > 70) { + color = 'orange'; + landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (temp > 60) { + color = 'yellow'; + landscape = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + } else if (temp > 50) { + color = 'green'; + landscape = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } else { + color = 'teal'; + landscape = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } + + const newLandscape = document.getElementById('landscape'); + newLandscape.textContent = landscape; + const temperature = document.getElementById('tempValue'); + temperature.className = color; + temperature.textContent = String(state.temp); +}; + +const increaseTemp = () => { + state.temp += 1; + formatTempAndGarden(); +}; + +const decreaseTemp = () => { + state.temp -= 1; + formatTempAndGarden(); +}; + +const registerEventHandlers = () => { + formatTempAndGarden(); + + const currentTempButton = document.getElementById('currentTempButton'); + currentTempButton.addEventListener('click', getLatLon); + + const increaseTempControl = document.getElementById('increaseTempControl'); + increaseTempControl.addEventListener('click', increaseTemp); + + const decreaseTempControl = document.getElementById('decreaseTempControl'); + decreaseTempControl.addEventListener('click', decreaseTemp); + + updateCityName(); + const cityNameInput = document.getElementById('cityNameInput'); + cityNameInput.addEventListener('input', updateCityName); + + const cityNameResetBtn = document.getElementById('cityNameReset'); + cityNameResetBtn.addEventListener('click', resetCityName); + + updateDisplayName(); + const cityDisplayName = document.getElementById('currentTempButton'); + cityDisplayName.addEventListener('click', updateDisplayName); + + const cityDisplayNameReset = document.getElementById('cityNameReset'); + cityDisplayNameReset.addEventListener('click', resetDisplay); + + updateSky(); + const skySelect = document.getElementById('skySelect'); + skySelect.addEventListener('change', updateSky); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index 43559ee86..47f4a30e0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,34 +1,117 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} + body { - height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: linear-gradient(rgb(237, 243, 243), rgb(2, 223, 252)); - font-size: 2rem; - font-family:'Courier New', Courier, monospace -} -.container { - height: 25rem; - width: 40rem; - background-color: rgb(63, 190, 254); - text-align: center; - padding-top: 34px; - border-radius: 16px; - border: 2px solid rgb(14, 43, 1); -} -#temperature { - width: 20rem; - height: 5rem; - font-family: Arial, Helvetica, sans-serif; - font-size: 4rem; - - - -} \ No newline at end of file +font-family:Georgia, 'Times New Roman', Times, serif; +font-size: 22px; +background-color: #e88feb; +margin: 3rem; +} + +.header__header { +color: rgb(41, 6, 41); +grid-column: span 3; +display: flex; +align-items: center; +margin: 2rem auto 3rem 0; +} + +.header__header > h1 { +margin-right: 10rem; +font-size: 3em; +} + +.header__city-name { +font-style: oblique; +font-size: 2rem; +} + +.header__city-name::before, +.header__city-name::after { +content: "✨"; +} + +.temperature__section, +.sky__section, +.city-name__section { +border-radius: 8px; +padding: 2rem; +background-color: rgb(249, 237, 247); +padding:initial +} + +.sky__section { +grid-row: 3; +} + +.city-name__section { +grid-row: 1; +} + +.garden__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + +.temperature__content { +display: flex; +flex-direction: row; +justify-content: center; +justify-content: center; +} + +#tempValue { +font-size: 4rem; +margin-left: 1.5rem; +padding-right: 1rem; +margin-right: 1.5rem; +} + +.temperature__controls { +display: flex; +color: #8f5e91; +flex-direction: column; +align-items: center; +} + + +.garden__content { +min-height: 200px; +max-width: fit-content; +margin: auto; +padding: 2rem; + +display: flex; +flex-direction: column; +justify-content: space-between; + +border-radius: 8px; +font-size: 2.4em; +} + +.cloudy { +background-color: rgb(107, 106, 106); +} + +.sunny { +background-color: rgb(247, 239, 122); +} + +.rainy { +background-color: rgb(42, 170, 213); +} + +.snowy { +background-color: rgb(250, 252, 253); +} + +.sky__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + + + From 384cef1f3309f4aa24776668b8f8bc97c6dfadb6 Mon Sep 17 00:00:00 2001 From: Kallie Gannon Date: Sun, 22 Jan 2023 13:06:45 -0500 Subject: [PATCH 4/5] title change --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 18d7da69e..2189412b9 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,12 @@
-

Magic Weather ReportπŸͺ„

+

Spooky Weather ReportπŸ‘»

- Magic Weather in: + Spooky Weather in:
@@ -31,8 +31,8 @@

Temperature

Make a weather wish

- πŸ”₯hotter - ❄️colder + πŸ”₯hotter + ❄️colder
@@ -50,8 +50,8 @@

Pick Sky

City Name

- Reset - Get Weather + Reset + Get Weather

From fc65b624932392222d0176715a11cfe7afa45576 Mon Sep 17 00:00:00 2001 From: Kallie Gannon Date: Sun, 22 Jan 2023 13:09:21 -0500 Subject: [PATCH 5/5] city placeholder change --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 2189412b9..45f988af5 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@

Pick Sky

City Name

- + Reset Get Weather