diff --git a/.gitignore b/.gitignore index 31b153a9b..8ad729bbf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +.env \ No newline at end of file diff --git a/images/cloudy.svg b/images/cloudy.svg new file mode 100644 index 000000000..139dd528a --- /dev/null +++ b/images/cloudy.svg @@ -0,0 +1,49 @@ + + + + diff --git a/images/go.png b/images/go.png new file mode 100644 index 000000000..221e97d80 Binary files /dev/null and b/images/go.png differ diff --git a/images/green_mountains.svg b/images/green_mountains.svg new file mode 100644 index 000000000..3d043519b --- /dev/null +++ b/images/green_mountains.svg @@ -0,0 +1,62 @@ + + + + diff --git a/images/hot_mountains.svg b/images/hot_mountains.svg new file mode 100644 index 000000000..7bb27af7c --- /dev/null +++ b/images/hot_mountains.svg @@ -0,0 +1,78 @@ + + + + diff --git a/images/ice_mountains.svg b/images/ice_mountains.svg new file mode 100644 index 000000000..4c79cef2c --- /dev/null +++ b/images/ice_mountains.svg @@ -0,0 +1,67 @@ + + + + diff --git a/images/less_hot_mountains.svg b/images/less_hot_mountains.svg new file mode 100644 index 000000000..34cba06d2 --- /dev/null +++ b/images/less_hot_mountains.svg @@ -0,0 +1,67 @@ + + + + diff --git a/images/reset.png b/images/reset.png new file mode 100644 index 000000000..e52e5d331 Binary files /dev/null and b/images/reset.png differ diff --git a/images/snowy_mountains.svg b/images/snowy_mountains.svg new file mode 100644 index 000000000..9d27a9b32 --- /dev/null +++ b/images/snowy_mountains.svg @@ -0,0 +1,90 @@ + + + + diff --git a/images/spooky.svg b/images/spooky.svg new file mode 100644 index 000000000..e44b8cef7 --- /dev/null +++ b/images/spooky.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + diff --git a/images/starry.svg b/images/starry.svg new file mode 100644 index 000000000..d1794c44f --- /dev/null +++ b/images/starry.svg @@ -0,0 +1,23115 @@ + + + + diff --git a/images/sunny.svg b/images/sunny.svg new file mode 100644 index 000000000..890f3458b --- /dev/null +++ b/images/sunny.svg @@ -0,0 +1,39 @@ + + + + + + + + + + diff --git a/index.html b/index.html index 68b320b9a..87f84daf2 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,50 @@ + + + Weather Report + + - +
+
+
+ +
+ sun + +

+ + snowflake + +
+
+ +

Getting weather for:

+

+
+
+
+ +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/secretindex.html b/secretindex.html new file mode 100644 index 000000000..acb1544d5 --- /dev/null +++ b/secretindex.html @@ -0,0 +1,19 @@ + + + + + + Document + + + + +
+ sun +

75

+ snowflake + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..3a3f118d0 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,134 @@ +'use strict'; + +const state = { + city: 'new milford, ct', + temperature: 0, +}; + +const updateCity = (event) => { + city = document.getElementById('city').value; + + let searchparams = { + q: city, + }; + + axios + .get('http://127.0.0.1:5000/location', { params: searchparams }) + + .then((response) => { + getWeather(response.data[0]['lat'], response.data[0]['lon']); + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +const getWeather = (lattitude, longitude) => { + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: lattitude, + lon: longitude, + }, + }) + + .then((response) => { + console.log('success!', response.data.current.temp); + kelvinToF(response.data.current.temp); + updateTempAndColor(); + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +const raiseTemp = (event) => { + state.temperature += 1; + updateTempAndColor(); +}; + +const lowerTemp = (event) => { + state.temperature -= 1; + updateTempAndColor(); +}; + +const kelvinToF = (tempInK) => { + state.temperature = Math.round(1.8 * (tempInK - 273) + 32); +}; + +const calculateColor = () => { + let colorPercent; + if (state.temperature > 110) { + colorPercent = (110 + 10) / 120; + } else if (state.temperature < -10) { + colorPercent = (-10 + 10) / 120; + } else { + colorPercent = (state.temperature + 10) / 120; + } + let colorRotate = (100 - colorPercent) * 240; + return Math.round(colorRotate); +}; + +const updateLandscape = () => { + let mountains; + if (state.temperature > 110) { + mountains = '/images/hot_mountains.svg'; + } else if (state.temperature > 85) { + mountains = '/images/less_hot_mountains.svg'; + } else if (state.temperature > 32) { + mountains = '/images/green_mountains.svg'; + } else if (state.temperature > -10) { + mountains = '/images/snowy_mountains.svg'; + } else { + mountains = '/images/ice_mountains.svg'; + } + document.querySelector('#mountain').src = mountains; +}; + +const updateTempAndColor = () => { + document.getElementById( + 'weather' + ).style.color = `hsl(${calculateColor()}, 75%, 50%)`; + document.getElementById('weather').textContent = state.temperature; + updateLandscape(); +}; + +const updateCityText = (event) => { + document.getElementById('cityDisplay').textContent = + document.getElementById('city').value; +}; + +const updateSky = (event) => { + let sky = document.querySelector('#skies').value; + let skyBox = document.querySelector('#weatherbox__landscape'); + skyBox.className = sky; + console.log(sky); +}; + +const resetCity = (event) => { + state.city = 'new milford, ct'; + city = document.querySelector('#city'); + city.value = 'new milford, ct'; + updateCity(); +}; + +updateTempAndColor(); + +const registerEventHandlers = (event) => { + const cityField = document.querySelector('#cityButton'); + const warmer = document.querySelector('#warmer'); + const colder = document.querySelector('#colder'); + const cityChange = document.querySelector('#city'); + const skyChange = document.querySelector('#skies'); + const reset = document.querySelector('#reset'); + + reset.addEventListener('click', resetCity); + skyChange.addEventListener('change', updateSky); + cityField.addEventListener('click', updateCity); + cityChange.addEventListener('keyup', updateCityText); + warmer.addEventListener('click', raiseTemp); + colder.addEventListener('click', lowerTemp); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); +document.addEventListener('DOMContentLoaded', updateCity); diff --git a/styles/index.css b/styles/index.css index e69de29bb..d4e39e123 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,73 @@ + +body { + background-color: lightblue; + text-align: center; + height: 100%; + margin: 0; + +} + +.temperature { + color: black; +} + +#weatherbox { + width: 60%; + height: 40%; + background-color: white; + border: 2px solid black; + left: 20%; + top: 30%; + position:absolute; + display: flex; + justify-content: space-between; + padding: 20px; + margin-left: -20px; + margin-top: -20px; +} + +.weatherbox__section { + width: 30%; + height: 100%; + overflow: hidden; + border: 1px solid pink; + overflow: hidden; +} + +.weatherbox__section h1 { + font-size: xx-large; +} + +#weatherbox__landscape { + display: flex; + align-items: end; + background-size: contain; + background-repeat: no-repeat; + width: 30%; + height: 100%; + overflow: hidden; + border: 1px solid pink; +} + +.sunnySky { + background-image: url('/images/sunny.svg'); + background-color: rgb(214, 243, 255); +} +.spookySky { + background-image: url('/images/spooky.svg'); + background-color: rgb(120, 140, 183); +} +.starrySky { + background-image: url('/images/starry.svg'); +} +.cloudySky { + background-image: url('/images/cloudy.svg'); + background-color: gainsboro; +} + +#mountain { + /* height: 70%; */ + width: 150%; + /* margin-left: -50px; + margin-bottom: -5px; */ +} \ No newline at end of file diff --git a/weather-report-proxy-server b/weather-report-proxy-server new file mode 160000 index 000000000..95ab98e6d --- /dev/null +++ b/weather-report-proxy-server @@ -0,0 +1 @@ +Subproject commit 95ab98e6da97d76bcdeb527d5bcb3b4cb6f80c19