From f76e275417b675961c54ac44aa3541a4cf29e64b Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Sun, 11 Dec 2022 16:42:16 -0500 Subject: [PATCH 1/7] Added API for location and weather --- index.html | 111 +++++++++++++++++++++++++++++++++- package.json | 3 +- src/index.js | 58 ++++++++++++++++++ styles/index.css | 153 +++++++++++++++++++++++++++++++++++++++++++++++ yarn-error.log | 93 ++++++++++++++++++++++++++++ yarn.lock | 29 ++++++--- 6 files changed, 436 insertions(+), 11 deletions(-) create mode 100644 yarn-error.log diff --git a/index.html b/index.html index 68b320b9a..4a7a19ae1 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,117 @@ Weather Report + +
+

Weather Report

+ Weather for the city of + Indianapolis + + + +
+
+

Temperature

+
+
+ ⬆️ + ⬇️ +
+ 65 +
+
+
+

Sky

+ +
+

City Name

+ + +
+
+

Weather Garden

+
+
☁️ ☁️ ☁️ ☀️ ☁️ ☁️
+
🌸🌸🌸🌸🌸🌸🌸🌸🌼🌸🌸🌸🌸🌼
+
+
+
+ + + - \ No newline at end of file + + + + + + + + + + + + + + Weather Report + + + + + + + +
+

Desired Temperature

+
+
+ ⬆️ + ⬇️ +
+ 70 +
+
+
+

Sky

+ +
+ +
+

City Name

+ + +
+ + + + + + --> \ No newline at end of file diff --git a/package.json b/package.json index 9cf5ca65b..aee2e1e1c 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { - "axios": "^0.27.2" + "axios": "^1.2.1", + "dotenv": "^16.0.3" } } diff --git a/src/index.js b/src/index.js index e69de29bb..dd9be9a2d 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,58 @@ +"use strict"; + +import axios from "axios" + +// let tempValue = 71; + +// API Calls + +const getLocation = () =>{ + axios + .get ('http://127.0.0.1:5000/locations'), { + params:{ + params: { + q: loc_query, + key: 'pk.54a2fbb7573000245e547f11b670d167', + format: 'json' + } + } + .then (function(response){ + let lat = response.data[0]['lat'] + let lon = response.data[0]['lon'] + }) + .catch (function(error) + console.error(error); + }) +} + +const getWeather = (lat, lon) =>{ + axios + .get ('http://127.0.0.1:5000/weather'), { + params: { + appid: '4f0138081ad5bd26b6a03604fa3b5b15', + lat: lat, + lon: lon + } +} +.then (function(response){ + let kelvinTemp = response.data["main"]["temp"]; + let farhTemp = kelvinTemp - 273.15 * 1.8 + 32; +// conversion from Kelvin to Fahrenheit +// variable.innerText = farhTemp + +}) + + +// Element Selectors + +const resetInput = () => { + cityName.innerHTML = "Indianapolis, IN"; + userInput.value=''; + sky.Select.value="sunny"; + + // helper function needed + makeItSunny(); + actualTempNumber.innerText=''; +} + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..e7858d08c 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,153 @@ +h2 { + margin: 0 auto 2rem auto; + } + + body { + display: grid; + grid-template-columns: 2fr 4fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; + + font-family: "Rubik", sans-serif; + font-size: 18px; + background-color: #519fa2; + margin: 2rem; + } + + .header__header { + color: white; + grid-column: span 3; + display: flex; + align-items: center; + margin: 2rem auto 3rem 0; + } + + .header__header > h1 { + margin-right: 2rem; + 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(85, 104, 139); + } + + .temperature__section { + grid-row: 2; + } + + .sky__section { + grid-row: 3; + } + + .city-name__section { + grid-row: 4; + } + + .garden__section { + grid-row: 2 / span 2; + grid-column: 2; + text-align: center; + align-self: center; + } + + .temperature__content { + display: flex; + flex-direction: row; + /* justify-content: space-around; */ + /* justify-content: center; */ + } + + #tempValue { + font-size: 3rem; + margin-left: 1.5rem; + /* padding-right: 1rem; */ + /* margin-right: 1.5rem; */ + } + + .temperature__controls { + display: flex; + flex-direction: column; + align-items: center; + } + + .garden__section > h2 { + color: rgb(226, 150, 8); + } + + .garden__content { + min-height: 200px; + max-width: fit-content; + margin: auto; + padding: 2rem; + + display: flex; + flex-direction: column; + justify-content: space-between; + + border-radius: 15px; + font-size: 2em; + } + + .city-name__reset-btn { + border: 0; + background-color: #7c889b; + color: rgb(30, 31, 17); + border-radius: 8px; + padding: 1rem; + font-family: "Rubik", sans-serif; + } + + .red { + color: red; + } + + .orange { + color: orange; + } + + .yellow { + color: gold; + } + + .yellow-green { + color: yellowgreen; + } + + .green { + color: green; + } + + .teal { + color: teal; + } + + .cloudy { + background-color: lightgrey; + } + + .sunny { + background-color: rgb(221, 255, 255); + } + + .rainy { + background-color: lightblue; + } + + .snowy { + background-color: lightsteelblue; + } + \ No newline at end of file diff --git a/yarn-error.log b/yarn-error.log new file mode 100644 index 000000000..ca01bd551 --- /dev/null +++ b/yarn-error.log @@ -0,0 +1,93 @@ +Arguments: + /usr/local/Cellar/node/18.11.0/bin/node /usr/local/Cellar/yarn/1.22.19/libexec/bin/yarn.js add axious + +PATH: + /Library/Frameworks/Python.framework/Versions/3.10/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Python.framework/Versions/3.10/bin + +Yarn version: + 1.22.19 + +Node version: + 18.11.0 + +Platform: + darwin x64 + +Trace: + Error: https://registry.yarnpkg.com/axious: Not found + at params.callback [as _callback] (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:66145:18) + at self.callback (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:140890:22) + at Request.emit (node:events:513:28) + at Request. (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:141862:10) + at Request.emit (node:events:513:28) + at IncomingMessage. (/usr/local/Cellar/yarn/1.22.19/libexec/lib/cli.js:141784:12) + at Object.onceWrapper (node:events:627:28) + at IncomingMessage.emit (node:events:525:35) + at endReadableNT (node:internal/streams/readable:1359:12) + at process.processTicksAndRejections (node:internal/process/task_queues:82:21) + +npm manifest: + { + "dependencies": { + "axios": "^0.27.2" + } + } + +yarn manifest: + No manifest + +Lockfile: + # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. + # yarn lockfile v1 + + + asynckit@^0.4.0: + version "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== + dependencies: + follow-redirects "^1.14.9" + form-data "^4.0.0" + + combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + + delayed-stream@~1.0.0: + version "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== + + form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + + mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + + mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" diff --git a/yarn.lock b/yarn.lock index 37fbaed29..ec1047823 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,15 @@ 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== +dotenv@^16.0.3: + version "16.0.3" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07" + integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ== + +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 +58,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 0c7a2f2a065b8179017aa5afb504d3e325f4f2e9 Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Wed, 14 Dec 2022 20:11:50 -0500 Subject: [PATCH 2/7] added elements to drop down --- index.html | 101 +++++++++++++---------------------------------- src/Extras | 42 ++++++++++++++++++++ src/index.js | 87 ++++++++++++++++++++-------------------- styles/index.css | 34 +++++++++------- 4 files changed, 133 insertions(+), 131 deletions(-) create mode 100644 src/Extras diff --git a/index.html b/index.html index 4a7a19ae1..7527f137a 100644 --- a/index.html +++ b/index.html @@ -9,79 +9,41 @@
-

Weather Report

- Weather for the city of - Indianapolis - +

Today's Weather

+ Today in the city of + "insert city" + +
-

Temperature

+

Actual Temperature

-
- ⬆️ - ⬇️
- 65 + 65°
-

Sky

+

Desired Sky

-
-

City Name

- -
-

Weather Garden

+

Weather Garden

-
☁️ ☁️ ☁️ ☀️ ☁️ ☁️
-
🌸🌸🌸🌸🌸🌸🌸🌸🌼🌸🌸🌸🌸🌼
+
☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞
+
🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼
+
- - - - - - - - - - - - - - - - - Weather Report - - - - - - - +

Desired Temperature

@@ -89,33 +51,24 @@

Desired Temperature

⬆️ ⬇️
- 70 + 70° +
-
-

Sky

- +
-

City Name

+

Please Select a City

- - + + + + + - --> \ No newline at end of file + \ No newline at end of file diff --git a/src/Extras b/src/Extras new file mode 100644 index 000000000..340cde17c --- /dev/null +++ b/src/Extras @@ -0,0 +1,42 @@ +// API Calls + +const locationToWeather = (cityName) =>{ + const getLocation = () => { + axios + .get ('http://127.0.0.1:5000/locations'), { + params:{ + q: loc_query, + key: 'pk.54a2fbb7573000245e547f11b670d167', + format: 'json' + } + } + .then (function(response) { + let lat = response.data[0]['lat'] + let lon = response.data[0]['lon'] + getWeather(lat, lon); + }) + .catch (function(error) { + console.error(error); + }) + } + const getWeather = (lat, lon) => { + axios + .get ('http://127.0.0.1:5000/weather'), { + params: { + appid: '4f0138081ad5bd26b6a03604fa3b5b15', + lat: lat, + lon: lon + } + } + .then (function(response){ + let kelvinTemp = response.data["main"]["temp"]; + let farhTemp = Math.floor((kelvinTemp - 273.15) * 1.8) + 32; + // conversion from Kelvin to Fahrenheit + // variable.innerText = farhTemp + }) + .catch (function(error) { + console.error(error); + }) + } +} + diff --git a/src/index.js b/src/index.js index dd9be9a2d..ea6e4e3b1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,58 +1,59 @@ "use strict"; -import axios from "axios" + +const state = { + temp : 75, + sky : "sunny" +} // let tempValue = 71; +// Elements Selectors +const tempValue = document.getElementById('tempValue'); + +const increaseTempControl = document.getElementById('increaseTempControl'); + +const decreaseTempControl = document.getElementById('decreaseTempControl'); + +const skySelect = document.getElementById('skySelect'); + +// Functions +const increaseTemp = () => { + state.temp ++; + tempValue.innerHTML = state.temp; +} -// API Calls - -const getLocation = () =>{ - axios - .get ('http://127.0.0.1:5000/locations'), { - params:{ - params: { - q: loc_query, - key: 'pk.54a2fbb7573000245e547f11b670d167', - format: 'json' - } - } - .then (function(response){ - let lat = response.data[0]['lat'] - let lon = response.data[0]['lon'] - }) - .catch (function(error) - console.error(error); - }) +const decreaseTemp = () => { + state.temp --; + tempValue.innerHTML = state.temp; } -const getWeather = (lat, lon) =>{ - axios - .get ('http://127.0.0.1:5000/weather'), { - params: { - appid: '4f0138081ad5bd26b6a03604fa3b5b15', - lat: lat, - lon: lon - } +const skySelector = () => { + state.sky ; + skySelect.innerHTML = state.sky + if (state.sky == "sunny") + state. } -.then (function(response){ - let kelvinTemp = response.data["main"]["temp"]; - let farhTemp = kelvinTemp - 273.15 * 1.8 + 32; -// conversion from Kelvin to Fahrenheit -// variable.innerText = farhTemp -}) +// Listeners +increaseTempControl.addEventListener("click", increaseTemp); -// Element Selectors +decreaseTempControl.addEventListener("click", decreaseTemp); -const resetInput = () => { - cityName.innerHTML = "Indianapolis, IN"; - userInput.value=''; - sky.Select.value="sunny"; +// skySelect.addEventListener("select", ) - // helper function needed - makeItSunny(); - actualTempNumber.innerText=''; -} + + + // Element Selectors + + // const resetInput = () => { + // cityName.innerHTML = "Indianapolis, IN"; + // userInput.value=''; + // sky.Select.value="sunny"; + + // // helper function needed + // makeItSunny(); + // actualTempNumber.innerText=''; + // } diff --git a/styles/index.css b/styles/index.css index e7858d08c..dfe07df21 100644 --- a/styles/index.css +++ b/styles/index.css @@ -8,10 +8,10 @@ h2 { grid-template-rows: auto auto auto auto; grid-gap: 1rem; - font-family: "Rubik", sans-serif; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-size: 18px; background-color: #519fa2; - margin: 2rem; + margin: 3rem; } .header__header { @@ -42,7 +42,7 @@ h2 { .city-name__section { border-radius: 8px; padding: 2rem; - background-color: rgb(85, 104, 139); + background-color: rgb(30, 91, 205); } .temperature__section { @@ -54,7 +54,7 @@ h2 { } .city-name__section { - grid-row: 4; + grid-row: 3; } .garden__section { @@ -84,12 +84,12 @@ h2 { align-items: center; } - .garden__section > h2 { - color: rgb(226, 150, 8); + .garden__section > h1 { + color: rgb(128, 89, 15); } .garden__content { - min-height: 200px; + min-height: 300px; max-width: fit-content; margin: auto; padding: 2rem; @@ -104,7 +104,7 @@ h2 { .city-name__reset-btn { border: 0; - background-color: #7c889b; + background-color: #4e5662; color: rgb(30, 31, 17); border-radius: 8px; padding: 1rem; @@ -136,18 +136,24 @@ h2 { } .cloudy { - background-color: lightgrey; + background-color: rgb(64, 80, 86); } .sunny { - background-color: rgb(221, 255, 255); + background-color: rgb(231, 248, 248); } .rainy { - background-color: lightblue; + background-color: rgb(65, 88, 96); } .snowy { - background-color: lightsteelblue; - } - \ No newline at end of file + background-color: rgb(21, 36, 204); + } + | Temperature (F) | Color | +| --------------- | ------ | +| 80+ | Red | +| 70-79 | Orange | +| 60-69 | Yellow | +| 50-59 | Green | +| 49 or below | Teal | \ No newline at end of file From a7be14afdc9c00f74693488c2785625f41774a87 Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Sun, 18 Dec 2022 01:43:29 -0500 Subject: [PATCH 3/7] Added buttons, event listeners and city input --- index.html | 20 +++---- src/index.js | 136 ++++++++++++++++++++++++++++++++++++++++++++--- styles/index.css | 6 +-- 3 files changed, 142 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 7527f137a..6a0c9eef2 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,12 @@ Weather Report - +

Today's Weather

Today in the city of - "insert city" - + + "insert city" @@ -21,7 +21,7 @@

Today's Weather

Actual Temperature

- 65° + 65°
@@ -34,10 +34,10 @@

Desired Sky

-

Weather Garden

+

Sky & Garden

-
☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞
-
🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼
+ ☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞 + 🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼
@@ -60,8 +60,10 @@

Desired Temperature

Please Select a City

- - + + + +
diff --git a/src/index.js b/src/index.js index ea6e4e3b1..8b19f66ca 100644 --- a/src/index.js +++ b/src/index.js @@ -3,10 +3,13 @@ const state = { - temp : 75, - sky : "sunny" + temp : 70, + sky : document.getElementById('skySelect'), + location : '', + lon : 0, + lat : 0 } -// let tempValue = 71; + // Elements Selectors const tempValue = document.getElementById('tempValue'); @@ -16,7 +19,22 @@ const decreaseTempControl = document.getElementById('decreaseTempControl'); const skySelect = document.getElementById('skySelect'); +const desiredSky = document.getElementById('desiredSky') + +const desiredLandscape = document.getElementById('landscape') + +const bgColor = document.getElementById('backgroundColor') + +// access to the id=headerCityName +const headerCityName = document.getElementById('headerCityName') +// access to id=cityNameInput +const cityNameInput = document.getElementById('cityNameInput') + +const submitButton = document.getElementById('cityNameSubmit') + + // Functions +// TEMP CHANGES const increaseTemp = () => { state.temp ++; tempValue.innerHTML = state.temp; @@ -26,21 +44,123 @@ const decreaseTemp = () => { state.temp --; tempValue.innerHTML = state.temp; } +// CITY HEADER +const changeCityName = () => { + // set headerCityName = cityNameInput + headerCityName.innerHTML = cityNameInput.value + +} + +// State.Location Update +const locationUpdate = () => { + state.location = cityNameInput.value + console.log(state.location) +} + +// CITY SELECT + + // const resetInput = () => { + // cityName.innerHTML = "Indianapolis, IN"; + // userInput.value=''; + // sky.Select.value="sunny"; + // // helper function needed + // makeItSunny(); + // actualTempNumber.innerText=''; + // } + + + + +//SKY CHANGES const skySelector = () => { - state.sky ; - skySelect.innerHTML = state.sky - if (state.sky == "sunny") - state. + // state.sky ; + // skySelect.innerHTML = state.sky + if (state.sky.value == "sunny") { + desiredSky.textContent = "☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞" + console.log("sunny") + } + else if (state.sky.value == "cloudy") { + desiredSky.textContent = "🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥" + console.log("cloudy") + } + else if (state.sky.value == "rainy") { + desiredSky.textContent = "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧" + console.log("rainy") + } + else if (state.sky.value == "snowy") { + desiredSky.textContent = "🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨" + console.log("snowy") + } } +// LANDSCAPE CHANGES +const landscapeChange = () =>{ + if (state.temp >= 80){ + desiredLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂" + bgColor.style.backgroundColor = '#E24E1B' + console.log("80") + } + else if (state.temp >= 70 ){ + desiredLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_🌱_🌻🌷" + bgColor.style.backgroundColor = '#E5B25D' + console.log("70-79") + } + else if (state.temp >= 60 ){ + desiredLandscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" + bgColor.style.backgroundColor = '#D0CFEC' + console.log("60-69") + } + else if (state.temp >= 50 ){ + desiredLandscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" + bgColor.style.backgroundColor = "#875C74" + console.log("50") + } + else if (state.temp <= 40 ){ + bgColor.style.backgroundColor = "#1B4079" + console.log("40") + } +} + +// API Calls +// Location +const getLocation = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.location + } + }) + .then((response) => { + console.log(response) + }) + .catch((error) => { + console.log(error) + }); +} + + +// + + // Listeners increaseTempControl.addEventListener("click", increaseTemp); +increaseTempControl.addEventListener("click", landscapeChange); decreaseTempControl.addEventListener("click", decreaseTemp); +decreaseTempControl.addEventListener("click", landscapeChange); + +skySelect.addEventListener("change", skySelector); + +cityNameInput.addEventListener("keyup", changeCityName); + +submitButton.addEventListener("click", locationUpdate); + + + + -// skySelect.addEventListener("select", ) diff --git a/styles/index.css b/styles/index.css index dfe07df21..92ff9f1ab 100644 --- a/styles/index.css +++ b/styles/index.css @@ -71,7 +71,7 @@ h2 { /* justify-content: center; */ } - #tempValue { + #tempValue, #actualValue { font-size: 3rem; margin-left: 1.5rem; /* padding-right: 1rem; */ @@ -102,10 +102,10 @@ h2 { font-size: 2em; } - .city-name__reset-btn { + .city-name__reset-btn, .city-name__submit-btn{ border: 0; background-color: #4e5662; - color: rgb(30, 31, 17); + color: rgb(252, 252, 252); border-radius: 8px; padding: 1rem; font-family: "Rubik", sans-serif; From c1e980cc29568c729a3e15e13339c9666221fe4a Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Sun, 18 Dec 2022 02:08:08 -0500 Subject: [PATCH 4/7] Lon and Lat responses add. --- src/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 8b19f66ca..7bd1aba64 100644 --- a/src/index.js +++ b/src/index.js @@ -53,8 +53,9 @@ const changeCityName = () => { // State.Location Update const locationUpdate = () => { - state.location = cityNameInput.value + state.location = cityNameInput.value; console.log(state.location) + getLocation(); } // CITY SELECT @@ -133,6 +134,8 @@ const getLocation = () => { }) .then((response) => { console.log(response) + state.lon = response.data[0].lon + state.lat = response.data[0].lat }) .catch((error) => { console.log(error) From d3c9deab1378a9e542bd78b4e5c74ccbeb419891 Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Mon, 19 Dec 2022 20:39:02 -0500 Subject: [PATCH 5/7] All waves complete --- src/index.js | 80 +++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 63 insertions(+), 17 deletions(-) diff --git a/src/index.js b/src/index.js index 7bd1aba64..dc81ab3f7 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,9 @@ + const state = { - temp : 70, + temp : 70, sky : document.getElementById('skySelect'), location : '', lon : 0, @@ -13,6 +14,8 @@ const state = { // Elements Selectors const tempValue = document.getElementById('tempValue'); +const actualTempValue = document.getElementById('actualValue') + const increaseTempControl = document.getElementById('increaseTempControl'); const decreaseTempControl = document.getElementById('decreaseTempControl'); @@ -44,6 +47,12 @@ const decreaseTemp = () => { state.temp --; tempValue.innerHTML = state.temp; } + +// ACTUAL TEMP +const actualTempChange = () => { + actualTempValue.innerHTML = state.actualTemp +} + // CITY HEADER const changeCityName = () => { // set headerCityName = cityNameInput @@ -58,21 +67,6 @@ const locationUpdate = () => { getLocation(); } -// CITY SELECT - - // const resetInput = () => { - // cityName.innerHTML = "Indianapolis, IN"; - // userInput.value=''; - // sky.Select.value="sunny"; - - // // helper function needed - // makeItSunny(); - // actualTempNumber.innerText=''; - // } - - - - //SKY CHANGES const skySelector = () => { // state.sky ; @@ -95,6 +89,26 @@ const skySelector = () => { } } +const validateSkyCondition = (skyCondition) => { + console.log("BEFORE") + if (skyCondition == "Thunderstorm" || skyCondition == "Drizzle" || skyCondition == "Rain" ) { + state.sky.value = "rainy"; + } + else if (skyCondition == "Clouds") { + state.sky.value = "cloudy"; + } + else if (skyCondition == "Snow") { + state.sky.value = "snowy"; + } + else { + state.sky.value = "sunny"; + } + + + skySelector() + console.log("AFTER") +} + // LANDSCAPE CHANGES const landscapeChange = () =>{ if (state.temp >= 80){ @@ -133,14 +147,43 @@ const getLocation = () => { } }) .then((response) => { - console.log(response) state.lon = response.data[0].lon state.lat = response.data[0].lat }) + .then(()=> { + getWeather(); + }) .catch((error) => { console.log(error) }); } +// Weather +const getWeather = () => { + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: state.lat, + lon: state.lon + } + }) + .then((response) => { + const kelvinTemp = response.data.main.temp + const skyCondition = response.data.weather[0].main + // // k to f + state.temp = Math.floor(1.8*(kelvinTemp-273) + 32) + tempValue.innerHTML = state.temp; + actualTempValue.innerHTML = state.temp; + validateSkyCondition(skyCondition) + + }) + .then(() => { + landscapeChange() + + }) + .catch((error) => { + console.log(error) + }); +} // @@ -160,6 +203,9 @@ cityNameInput.addEventListener("keyup", changeCityName); submitButton.addEventListener("click", locationUpdate); +submitButton.addEventListener("click", locationUpdate); + + From 60a8661bbef0421c0f2555c34a9c299132631a76 Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Mon, 19 Dec 2022 22:48:01 -0500 Subject: [PATCH 6/7] Reset button added and working --- src/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/index.js b/src/index.js index dc81ab3f7..62a91bc13 100644 --- a/src/index.js +++ b/src/index.js @@ -35,6 +35,9 @@ const cityNameInput = document.getElementById('cityNameInput') const submitButton = document.getElementById('cityNameSubmit') +const resetButton = document.getElementById('cityNameReset') + + // Functions // TEMP CHANGES @@ -67,6 +70,13 @@ const locationUpdate = () => { getLocation(); } +const resetLocation = () => { + console.log("RESET") + state.location = ''; + cityNameInput.value = state.location; + changeCityName(); +} + //SKY CHANGES const skySelector = () => { // state.sky ; @@ -205,6 +215,8 @@ submitButton.addEventListener("click", locationUpdate); submitButton.addEventListener("click", locationUpdate); +resetButton.addEventListener("click", resetLocation) + From 2aeb18a6b5fe050549e6b238be432feb07f409ed Mon Sep 17 00:00:00 2001 From: Ryan Thomas Date: Mon, 19 Dec 2022 23:12:09 -0500 Subject: [PATCH 7/7] Refactored code --- src/index.js | 59 ++++++---------------------------------------------- 1 file changed, 6 insertions(+), 53 deletions(-) diff --git a/src/index.js b/src/index.js index 62a91bc13..33396477a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,6 @@ "use strict"; - - const state = { temp : 70, sky : document.getElementById('skySelect'), @@ -28,9 +26,8 @@ const desiredLandscape = document.getElementById('landscape') const bgColor = document.getElementById('backgroundColor') -// access to the id=headerCityName const headerCityName = document.getElementById('headerCityName') -// access to id=cityNameInput + const cityNameInput = document.getElementById('cityNameInput') const submitButton = document.getElementById('cityNameSubmit') @@ -43,35 +40,27 @@ const resetButton = document.getElementById('cityNameReset') // TEMP CHANGES const increaseTemp = () => { state.temp ++; - tempValue.innerHTML = state.temp; + tempValue.innerHTML = state.temp + "°" ; } const decreaseTemp = () => { state.temp --; - tempValue.innerHTML = state.temp; -} - -// ACTUAL TEMP -const actualTempChange = () => { - actualTempValue.innerHTML = state.actualTemp + tempValue.innerHTML = state.temp + "°" ; } // CITY HEADER const changeCityName = () => { - // set headerCityName = cityNameInput - headerCityName.innerHTML = cityNameInput.value + headerCityName.innerHTML = cityNameInput.value } // State.Location Update const locationUpdate = () => { state.location = cityNameInput.value; - console.log(state.location) getLocation(); } const resetLocation = () => { - console.log("RESET") state.location = ''; cityNameInput.value = state.location; changeCityName(); @@ -79,28 +68,21 @@ const resetLocation = () => { //SKY CHANGES const skySelector = () => { - // state.sky ; - // skySelect.innerHTML = state.sky if (state.sky.value == "sunny") { desiredSky.textContent = "☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞☀️🌞" - console.log("sunny") } else if (state.sky.value == "cloudy") { desiredSky.textContent = "🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥🌥" - console.log("cloudy") } else if (state.sky.value == "rainy") { desiredSky.textContent = "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧" - console.log("rainy") } else if (state.sky.value == "snowy") { desiredSky.textContent = "🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨❄️🌨" - console.log("snowy") } } const validateSkyCondition = (skyCondition) => { - console.log("BEFORE") if (skyCondition == "Thunderstorm" || skyCondition == "Drizzle" || skyCondition == "Rain" ) { state.sky.value = "rainy"; } @@ -113,10 +95,6 @@ const validateSkyCondition = (skyCondition) => { else { state.sky.value = "sunny"; } - - - skySelector() - console.log("AFTER") } // LANDSCAPE CHANGES @@ -124,26 +102,21 @@ const landscapeChange = () =>{ if (state.temp >= 80){ desiredLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂" bgColor.style.backgroundColor = '#E24E1B' - console.log("80") } else if (state.temp >= 70 ){ desiredLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_🌱_🌻🌷" bgColor.style.backgroundColor = '#E5B25D' - console.log("70-79") } else if (state.temp >= 60 ){ desiredLandscape.textContent = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃" bgColor.style.backgroundColor = '#D0CFEC' - console.log("60-69") } else if (state.temp >= 50 ){ desiredLandscape.textContent = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲" bgColor.style.backgroundColor = "#875C74" - console.log("50") } else if (state.temp <= 40 ){ bgColor.style.backgroundColor = "#1B4079" - console.log("40") } } @@ -181,8 +154,8 @@ const getWeather = () => { const skyCondition = response.data.weather[0].main // // k to f state.temp = Math.floor(1.8*(kelvinTemp-273) + 32) - tempValue.innerHTML = state.temp; - actualTempValue.innerHTML = state.temp; + tempValue.innerHTML = state.temp + "°" ; + actualTempValue.innerHTML = state.temp + "°" ; validateSkyCondition(skyCondition) }) @@ -218,23 +191,3 @@ submitButton.addEventListener("click", locationUpdate); resetButton.addEventListener("click", resetLocation) - - - - - - - - - - // Element Selectors - - // const resetInput = () => { - // cityName.innerHTML = "Indianapolis, IN"; - // userInput.value=''; - // sky.Select.value="sunny"; - - // // helper function needed - // makeItSunny(); - // actualTempNumber.innerText=''; - // }