diff --git a/index.html b/index.html index 68b320b9a..35d746a0b 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -5,8 +6,52 @@ Weather Report + - +
+

Weather Report

+

For the City of Seattle

+
+
+
+

Temperature

+ + + +

+ 60 +

+ + + + +
+
+

Sky

+ + +
+
+

City Name

+
+ + +
+
+
+

Weather Garden

+

πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§

+

🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ

+
+
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..986876bbf 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,141 @@ +"use strict"; + +let state = { + startingTemp : 60, +}; + +const updateTemperature = state => { + const temperatureContainer = document.getElementById("startingTemp"); + temperatureContainer.textContent = state.startingTemp; + }; + + const increaseTemperature = () => { + state.startingTemp += 1; + updateTemperature(state); + updateColor(); + updateLandscape(); + }; + + const decreaseTemperature = () => { + state.startingTemp -= 1; + updateTemperature(state); + updateColor(); + updateLandscape(); +}; + +const updateColor = () => { + + if (state.startingTemp >= 80) { + document.getElementById('startingTemp').style.color = 'red'; + } else if (state.startingTemp >= 70) { + document.getElementById('startingTemp').style.color = 'orange'; + } else if (state.startingTemp >= 60) { + document.getElementById('startingTemp').style.color = 'yellow'; + } else if (state.startingTemp >= 50) { + document.getElementById('startingTemp').style.color = 'green'; + } else if (state.startingTemp < 50) { + document.getElementById('startingTemp').style.color = 'teal'; + } +}; + +const updateLandscape = () => { + + if (state.startingTemp >= 80) { + document.getElementById('landscapeIcons').textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + } else if (state.startingTemp >= 70) { + document.getElementById('landscapeIcons').textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (state.startingTemp >= 60) { + document.getElementById('landscapeIcons').textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + } else if (state.startingTemp < 60) { + document.getElementById('landscapeIcons').textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } +}; + +const updateSky = () => { + + const selectSky = document.getElementById('skyChoice') + + if (selectSky.value === 'rainy') { + document.getElementById('skyIcons').textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§'; + } else if (selectSky.value === 'sunny') { + document.getElementById('skyIcons').textContent = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } else if (selectSky.value === 'cloudy') { + document.getElementById('skyIcons').textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if (selectSky.value === 'snowy') { + document.getElementById('skyIcons').textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + } +}; + +const updateCity = () => { + const inputCityName = document.getElementById("inputCity"); + const cityNameInHeader = document.getElementById("cityNameHeader"); + cityNameInHeader.textContent = inputCityName.value; + +}; + + +const getLongLat = () => { + let latitude, longitude; + axios.get('http://127.0.0.1:5000/location', + { + params: { + q: document.getElementById("cityNameHeader").textContent + } + }) + .then((response) => { + latitude = response.data[0].lat; + longitude = response.data[0].lon; + + getWeather(latitude, longitude); + }) + .catch( (error) => { + console.log("error in finding latitude and longitude"); + }); + } + const getWeather = (latitude, longitude) => { + axios.get('http://127.0.0.1:5000/weather', + { + params: { + lat: latitude, + lon : longitude, + } + }) + .then( (response) => { + const temperature = response.data.main.temp; + const fahrenheit = 1.8*(temperature-273) + 32 + document.getElementById('startingTemp').textContent = Math.round(fahrenheit); + state.startingTemp = Math.round(fahrenheit); + updateColor(); + updateLandscape(); + }) + .catch ((error) => { + console.log('error in finding weather'); + }); + + } + +const registerEventHandlers = () => { + const increaseTemperatureButton = document.getElementById('increaseButton'); + increaseTemperatureButton.addEventListener("click", increaseTemperature); + + const decreaseTemperatureButton = document.getElementById('decreaseButton'); + decreaseTemperatureButton.addEventListener("click", decreaseTemperature); + + const selectElement = document.getElementById('skyChoice'); + selectElement.addEventListener('change',updateSky); + + const userInputCity = document.getElementById('inputCity'); + userInputCity.addEventListener('input', updateCity); + + const getRealTimeTemperature = document.getElementById('getTempButton'); + getRealTimeTemperature.addEventListener('click', getLongLat); + +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + + + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..28afc4a1a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,110 @@ + +body { + font-family: 'Verdana', sans-serif, monospace; + background-color: rgb(122, 172, 218); + margin: 10px; + text-align: center; +} + +button:hover { + background-color: rgb(138, 138, 138); +} + +#websiteContainer { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr ; + margin: 20px; +} + +.container { + width: 300px; + padding: 50px; + margin: 20px; + border-radius: 25px; + text-align: center; + padding-top: 0px; + background-color: white; + border: 15px solid rgb(255, 255, 255); +} + +#cityBox { + grid-column: 1 / 2; + grid-row: 3 / 4; +} + +#weatherContainer { + grid-column: 3 / 4; + grid-row: 2 / 3; + background-color: white; + width: 400px; + padding: 40px; + padding-top: 0px; + position: relative; +} + +#temperatureContainer { + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#skyContainer { + grid-column: 1 / 2; + grid-row: 2 / 3; +} + + +#cityNameHeader { + font-style: italic; + font-size: 24px; +} + +header h2 { + font-size: 20px; +} + +section h2 { + font-size: 30px; +} + +#getTempButton { + background-color: lightpink; + color: white; + padding: 15px 32px; + font-size: 16px; + border: none; + margin: 10px; + border-radius: 15px; +} + +#getTempButton:hover { + background-color: rgb(158, 158, 158); +} + +#increaseButton { + font-size: x-large; +} + +#decreaseButton { + font-size: x-large; + +} + +#startingTemp { + font-size: 50px; + font-weight: bold; + margin: 5px; + color: yellow; +} + +#skyIcons { + font-size: 30px; + position:absolute; + top: 15%; +} + +#landscapeIcons { + font-size: 30px; + position: absolute; + bottom: 0; +}