diff --git a/index.html b/index.html index 68b320b9a..6a0c9eef2 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,72 @@ Weather Report + - + +
+

Today's Weather

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

Actual Temperature

+
+
+ 65Β° + +
+
+

Desired Sky

+ +
+
+

Sky & Garden

+
+ β˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒž + 🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼🌸🌸🌸🌼 +
+ +
+ + +
+
+

Desired Temperature

+
+
+ ⬆️ + ⬇️ +
+ 70Β° +
+
+ + + +
+

Please Select a City

+ + + + +
+ + + + + + - \ No newline at end of file + + \ 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/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 e69de29bb..33396477a 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,193 @@ +"use strict"; + + +const state = { + temp : 70, + sky : document.getElementById('skySelect'), + location : '', + lon : 0, + lat : 0 +} + +// Elements Selectors +const tempValue = document.getElementById('tempValue'); + +const actualTempValue = document.getElementById('actualValue') + +const increaseTempControl = document.getElementById('increaseTempControl'); + +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') + +const headerCityName = document.getElementById('headerCityName') + +const cityNameInput = document.getElementById('cityNameInput') + +const submitButton = document.getElementById('cityNameSubmit') + +const resetButton = document.getElementById('cityNameReset') + + + +// Functions +// TEMP CHANGES +const increaseTemp = () => { + state.temp ++; + tempValue.innerHTML = state.temp + "Β°" ; +} + +const decreaseTemp = () => { + state.temp --; + tempValue.innerHTML = state.temp + "Β°" ; +} + +// CITY HEADER +const changeCityName = () => { + headerCityName.innerHTML = cityNameInput.value + +} + +// State.Location Update +const locationUpdate = () => { + state.location = cityNameInput.value; + getLocation(); +} + +const resetLocation = () => { + state.location = ''; + cityNameInput.value = state.location; + changeCityName(); +} + +//SKY CHANGES +const skySelector = () => { + if (state.sky.value == "sunny") { + desiredSky.textContent = "β˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒžβ˜€οΈπŸŒž" + } + else if (state.sky.value == "cloudy") { + desiredSky.textContent = "πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯πŸŒ₯" + } + else if (state.sky.value == "rainy") { + desiredSky.textContent = "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧" + } + else if (state.sky.value == "snowy") { + desiredSky.textContent = "πŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈπŸŒ¨" + } +} + +const validateSkyCondition = (skyCondition) => { + 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"; + } +} + +// LANDSCAPE CHANGES +const landscapeChange = () =>{ + if (state.temp >= 80){ + desiredLandscape.textContent = "🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚" + bgColor.style.backgroundColor = '#E24E1B' + } + else if (state.temp >= 70 ){ + desiredLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_🌱_🌻🌷" + bgColor.style.backgroundColor = '#E5B25D' + } + else if (state.temp >= 60 ){ + desiredLandscape.textContent = "🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ" + bgColor.style.backgroundColor = '#D0CFEC' + } + else if (state.temp >= 50 ){ + desiredLandscape.textContent = "πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²" + bgColor.style.backgroundColor = "#875C74" + } + else if (state.temp <= 40 ){ + bgColor.style.backgroundColor = "#1B4079" + } +} + +// API Calls +// Location +const getLocation = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.location + } + }) + .then((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) + }); +} + + +// + + +// 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); + +submitButton.addEventListener("click", locationUpdate); + +resetButton.addEventListener("click", resetLocation) + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..92ff9f1ab 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,159 @@ +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: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 18px; + background-color: #519fa2; + margin: 3rem; + } + + .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(30, 91, 205); + } + + .temperature__section { + grid-row: 2; + } + + .sky__section { + grid-row: 3; + } + + .city-name__section { + grid-row: 3; + } + + .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, #actualValue { + 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 > h1 { + color: rgb(128, 89, 15); + } + + .garden__content { + min-height: 300px; + 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, .city-name__submit-btn{ + border: 0; + background-color: #4e5662; + color: rgb(252, 252, 252); + 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: rgb(64, 80, 86); + } + + .sunny { + background-color: rgb(231, 248, 248); + } + + .rainy { + background-color: rgb(65, 88, 96); + } + + .snowy { + 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 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==