diff --git a/assets/beachLand.jpg b/assets/beachLand.jpg new file mode 100644 index 000000000..cf4fa1de8 Binary files /dev/null and b/assets/beachLand.jpg differ diff --git a/assets/clearMiddle.jpg b/assets/clearMiddle.jpg new file mode 100644 index 000000000..7315814a8 Binary files /dev/null and b/assets/clearMiddle.jpg differ diff --git a/assets/cloudyMiddle.jpg b/assets/cloudyMiddle.jpg new file mode 100644 index 000000000..a3899f141 Binary files /dev/null and b/assets/cloudyMiddle.jpg differ diff --git a/assets/cloudySky.jpg b/assets/cloudySky.jpg new file mode 100644 index 000000000..49852461a Binary files /dev/null and b/assets/cloudySky.jpg differ diff --git a/assets/coldLand.jpg b/assets/coldLand.jpg new file mode 100644 index 000000000..f8aa9565a Binary files /dev/null and b/assets/coldLand.jpg differ diff --git a/assets/desertLand.jpg b/assets/desertLand.jpg new file mode 100644 index 000000000..62073265e Binary files /dev/null and b/assets/desertLand.jpg differ diff --git a/assets/desertLand3.jpg b/assets/desertLand3.jpg new file mode 100644 index 000000000..39af483e4 Binary files /dev/null and b/assets/desertLand3.jpg differ diff --git a/assets/rainyMiddle.jpg b/assets/rainyMiddle.jpg new file mode 100644 index 000000000..dbe4d0200 Binary files /dev/null and b/assets/rainyMiddle.jpg differ diff --git a/assets/snowLand.jpg b/assets/snowLand.jpg new file mode 100644 index 000000000..21606b289 Binary files /dev/null and b/assets/snowLand.jpg differ diff --git a/assets/snowyMiddle.jpg b/assets/snowyMiddle.jpg new file mode 100644 index 000000000..63e4fb6ae Binary files /dev/null and b/assets/snowyMiddle.jpg differ diff --git a/assets/sunnySky.jpg b/assets/sunnySky.jpg new file mode 100644 index 000000000..155a98b92 Binary files /dev/null and b/assets/sunnySky.jpg differ diff --git a/assets/warmLand.jpg b/assets/warmLand.jpg new file mode 100644 index 000000000..aa3577bcf Binary files /dev/null and b/assets/warmLand.jpg differ diff --git a/index.html b/index.html index 68b320b9a..c1eb8268f 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,44 @@ + + + + + + + Weather Report + +
+
+ + +
+
+
+
+

Brooklyn

+

65

+
Click on the icons to change the temperature
+ + +
Pick an option to change the sky
+ +
+
+ +
+ +
+ \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..e49b702b9 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,136 @@ +"use strict"; + +// current state of the page. All functions update this state and pull needed data from the state +let state = { + city: 'Chicago', + lat: '', + lon: '', + temp: 65, + color: 'red', + sky: "url('../assets/cloudySky.jpg')", + middle: "url('../assets/snowyMiddle.jpg')", + land: "url('../assets/snowLand.jpg')", +}; + +// functionality to change city and update weather +// 1. change selected city +const searchBox = document.getElementById('searchbox'); +const cityDisplay = document.getElementById('city-display'); + +const changeCity = () => { + state.city = searchBox.value; + cityDisplay.innerHTML = state.city + getCoordinates(); +}; + +// 2. fetch city coordinates +const getCoordinates = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + state.lat = response.data[0].lat; + state.lon = response.data[0].lon; + getWeather(); + }) + .catch((error) => { + console.log("Couldn't find coordinates for this city."); + }); +}; + +// 3. fetch current city weather +const getWeather = () => { + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: state.lat, + lon: state.lon, + }, + }) + .then((response) => { + const kelvin = response.data['main']['temp']; + state.temp = Math.round(((kelvin - 273.15) * 9) / 5 + 32); + setColorAndLand(); + }) + .catch((error) => { + console.log("Couldn't get the temperature for this city."); + }); +}; + +// functionality to change elements on the screen +// increase temp +const increaseTemp = () => { + state.temp++; + setColorAndLand(); +}; + +// decrease temp +const decreaseTemp = () => { + state.temp--; + setColorAndLand(); +}; + +// change temp display, color and land +const setColorAndLand = () => { + const tempDisplay = document.getElementById('temp-display'); + const land = document.getElementById('land'); + + if (state.temp >= 90) { + state.color = 'red'; + state.land = "url('../assets/desertLand.jpg')" + } else if (state.temp >= 70) { + state.color = 'orange'; + state.land = "url('../assets/beachLand.jpg')" + } else if (state.temp >= 55) { + state.color = 'yellow'; + state.land = "url('../assets/warmLand.jpg')" + } else if (state.temp >= 40) { + state.color = 'green'; + state.land = "url('../assets/coldLand.jpg')" + } else { + state.color = 'teal'; + state.land = "url('../assets/snowLand.jpg')" + }; + + tempDisplay.innerHTML = state.temp; + tempDisplay.style.color = state.color; + land.style.backgroundImage = state.land; +}; + +// change sky and middle +const setSkyAndMiddle = () => { + const skyDropdown = document.getElementById('sky-dropdown'); + const sky = document.getElementById('sky'); + const middle = document.getElementById('middle'); + + if (skyDropdown.value === 'Sunny') { + state.sky = "url('../assets/sunnySky.jpg')" + state.middle = "url('../assets/clearMiddle.jpg')" + } else if (skyDropdown.value === 'Cloudy') { + state.sky = "url('../assets/cloudySky.jpg')" + state.middle = "url('../assets/cloudyMiddle.jpg')" + } else if (skyDropdown.value === 'Rainy') { + state.sky = "url('../assets/cloudySky.jpg')" + state.middle = "url('../assets/rainyMiddle.jpg')" + } else { + state.sky = "url('../assets/cloudySky.jpg')" + state.middle = "url('../assets/snowyMiddle.jpg')" + }; + + sky.style.backgroundImage = state.sky; + middle.style.backgroundImage = state.middle; +}; + +// event listeners and triggers +const registerEventHandlers = () => { + document.getElementById('search-btn').addEventListener("click", changeCity); + document.getElementById('increase-temp').addEventListener("click", increaseTemp); + document.getElementById('decrease-temp').addEventListener("click", decreaseTemp); + document.getElementById('sky-dropdown').addEventListener("change", setSkyAndMiddle); + document.getElementById('get-realtime-temp').addEventListener("click", getWeather); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..a06ca0cb2 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,75 @@ +body { + color: rgb(32, 32, 32); + text-align: center; + font-family: "Lucida Console", "Courier New", monospace; + font-size: 1.2em; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + } + +section { + background-size: contain; +} + +#sky { + background-image: url("../assets/sunnySky.jpg"); + flex-basis: 25vh; +} + +#middle { + background-image: url("../assets/snowyMiddle.jpg"); + flex-basis: 45vh; +} + +#land { + background-image: url("../assets/desertLand.jpg"); + flex-basis: 30vh; +} + +#searchbox { + border-radius: 5px; + height: 25px; + width: 250px; + margin-top: 100px; +} + +#city-display { + font-size: 2.5em; +} + +#temp-display { + font-size: 3em; + color: teal; +} + +.middle { + display: contents; +} + +button { + border-radius: 5px; + background-color: rgb(248, 206, 129); + border: 1px solid rgb(32, 32, 32); + padding-right: 10px; + padding-left: 10px; + padding: 5px; + font-weight: 500; + font-size:15px; +} + +button:hover { + border: 1.5px solid rgb(32, 32, 32); +} + +i { + padding: 10px; +} + +.fa-snowflake:hover { + color: blue; +} +.fa-sun:hover { + color: rgb(255, 115, 0); +} \ No newline at end of file