diff --git a/assets/beach.jpeg b/assets/beach.jpeg new file mode 100644 index 000000000..6456860fd Binary files /dev/null and b/assets/beach.jpeg differ diff --git a/assets/cold.jpeg b/assets/cold.jpeg new file mode 100644 index 000000000..c17447247 Binary files /dev/null and b/assets/cold.jpeg differ diff --git a/assets/cool.jpeg b/assets/cool.jpeg new file mode 100644 index 000000000..463c04567 Binary files /dev/null and b/assets/cool.jpeg differ diff --git a/assets/hot.jpeg b/assets/hot.jpeg new file mode 100644 index 000000000..76c920aef Binary files /dev/null and b/assets/hot.jpeg differ diff --git a/assets/hot1.jpeg b/assets/hot1.jpeg new file mode 100644 index 000000000..df9ec39b5 Binary files /dev/null and b/assets/hot1.jpeg differ diff --git a/assets/warm.jpeg b/assets/warm.jpeg new file mode 100644 index 000000000..c49c95788 Binary files /dev/null and b/assets/warm.jpeg differ diff --git a/index.html b/index.html index 68b320b9a..392ae35bb 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,47 @@ Weather Report + +
+ + +

The temperature in : +

is

+ + +

+ +

+

+ +

+
+ +
+ +
+ +
+ +
+ +
+ + + + \ 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..26232aea1 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,128 @@ +// import axios from 'axios'; +'use strict'; + +const state = { + temp: 32, +}; + +const plusClickCount = () => { + const plusContainer = document.getElementById('Temperature'); + state.temp += 1; + plusContainer.textContent = state.temp; + changeColor(); +}; + +const minusClickCount = () => { + const minusContainer = document.getElementById('Temperature'); + state.temp -= 1; + minusContainer.textContent = state.temp; + changeColor(); +}; +//making text color different +const changeColor = () => { + const tempColor = document.querySelector('#Temperature'); + const newLS = document.getElementById('newLandscape'); + + if (state.temp < 49) { + tempColor.style.color = 'teal'; + newLS.src = `assets/cold.jpeg`; + } else if (state.temp >= 50 && state.temp < 59) { + tempColor.style.color = 'green'; + newLS.src = `assets/cool.jpeg`; + } else if (state.temp >= 60 && state.temp < 69) { + tempColor.style.color = 'yellow'; + newLS.src = `assets/warm.jpeg`; + } else if (state.temp >= 70 && state.temp < 79) { + tempColor.style.color = 'orange'; + newLS.src = `assets/beach.jpeg`; + } else if (state.temp >= 80) { + tempColor.style.color = 'red'; + newLS.src = `assets/hot1.jpeg`; + } +}; + +//wave 4 axios call +const realTimeClick = () => { + let query = input.value; + // displayTemp(); + findLocationWeather(query); +}; + +const displayTemp = () => { + let tempContainer = document.getElementById('Temperature'); + tempContainer.textContent = state.temp; +}; + +const findLocationWeather = (query) => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + format: 'json', + q: query, + }, + }) + .then((response) => { + let latitude = response.data[0].lat; + let longitude = response.data[0].lon; + axios + .get('http://127.0.0.1:5000/weather', { + params: { + format: 'json', + lat: latitude, + lon: longitude, + }, + }) + .then((response) => { + console.log('success in findWeather!', response.data); + const currentTemp = Math.floor( + (Number(response.data.main.temp) - 273.15) * 1.8 + 32 + ); + state.temp = currentTemp; + changeColor(); + displayTemp(); + }) + .catch((error) => { + console.log('error in findweather!', error); + }); + }) + .catch((error) => { + console.log('error!', error); + }); +}; + +//wave 5 + +const selectSky = document.querySelector('.sky'); + +selectSky.addEventListener('change', (event) => { + const result = document.querySelector('.result'); + result.textContent = `The sky is ${event.target.value}`; +}); + +//wave 3 update text +const input = document.querySelector('input'); +const log = document.getElementById('values'); + +input.addEventListener('input', updateValue); + +function updateValue(e) { + log.textContent = e.target.value; +} +//wave 6 +const resetCity = () => { + input.value = ''; + log.textContent = ''; +}; + +const registerEventHandlers = () => { + const hotterButton = document.getElementById('plusButton'); + hotterButton.addEventListener('click', plusClickCount); + const coolerButton = document.getElementById('minusButton'); + coolerButton.addEventListener('click', minusClickCount); + let realTimeButton = document.getElementById('realTimeButton'); + realTimeButton.addEventListener('click', realTimeClick); + const reset = document.getElementById('resetButton'); + reset.addEventListener('click', resetCity); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..1809100da 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,44 @@ +body { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto ; + grid-gap: 1rem; + font-family: "Rubik", sans-serif; + font-size: 18px; + background-color: #a2b8df; + margin: 5rem; + } + +.temp_section,.button_section { + background-color: hwb(102 67% 17%); + border: none; + color: green; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px; + grid-column: 1; + grid-row:1 + } + .sky_section { + background-color: hwb(102 67% 17%); + border: none; + color: green; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + border-radius: 10px; + grid-column: 1; + grid-row:2 + } + img{ + width: 500px; + } +.landscape{ + grid-column: 2; + grid-row:1/span 2 +} \ 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==