diff --git a/index.html b/index.html index 68b320b9a..ebc703773 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,41 @@ Weather Report + +
+

The Weather Station

+
+ +
+ +
+ + +
+
+ + +
+ +
+ +

Temperature

+ +
+ +
+ + + + - \ No newline at end of file + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..9af427a0b 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,121 @@ +const state = { + Temperature: 0, + city: 'Seattle', + sky: 'sunny', + latitude: 0, + longitude: 0, +}; + +const increaseTemp = (event) => { + const tempContainer = document.querySelector('#Temperature'); + console.log('increaseTemp clicked'); + state.Temperature = Math.round(state.Temperature + 1); + tempContainer.textContent = `${state.Temperature}`; + tempRange(); +}; +// hello this is a new branch!! + +const decreaseTemp = (event) => { + const tempContainer = document.querySelector('#Temperature'); + state.Temperature = Math.round(state.Temperature - 1); + tempContainer.textContent = `${state.Temperature}`; + tempRange(); +}; + +const tempRange = () => { + const tempContainer = document.querySelector('#Temperature'); + const landscapeContainer = document.querySelector('#landscape'); + if (state.Temperature >= 80) { + tempContainer.style.color = 'red'; + landscapeContainer.textContent = '🌡__🐍_πŸ¦‚_🌡🌡__🐍_🏜_πŸ¦‚'; + } else if (state.Temperature <= 79 && state.Temperature >= 70) { + tempContainer.style.color = 'orange'; + landscapeContainer.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (state.Temperature <= 69 && state.Temperature >= 60) { + tempContainer.style.color = 'yellow'; + landscapeContainer.textContent = '🌾🌾_πŸƒ_πŸͺ¨__πŸ›€_🌾🌾🌾_πŸƒ'; + } else if (state.Temperature <= 59 && state.Temperature >= 50) { + tempContainer.style.color = 'green'; + landscapeContainer.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } else if (state.Temperature <= 49) { + tempContainer.style.color = 'teal'; + landscapeContainer.textContent = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + } +}; + +const updateSky = (event) => { + const skyContainer = document.querySelector('#skySelect'); + const skyBannerContainer = document.querySelector('#skyBanner'); + state.sky = skyContainer.value; + if (state.sky === 'sunny') { + skyBannerContainer.textContent = '☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️'; + } else if (state.sky === 'cloudy') { + skyBannerContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if (state.sky === 'rainy') { + skyBannerContainer.textContent = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + } else if (state.sky === 'snowy') { + skyBannerContainer.textContent = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + } +}; + +const chooseCityName = (event) => { + const cityName = document.querySelector('#cityName'); + const inputContainer = document.querySelector('#inputCityName'); + state.city = inputContainer.value; + cityName.textContent = state.city; +}; + +const resetCityName = (event) => { + const cityName = document.querySelector('#cityName'); + const inputContainer = document.querySelector('#inputCityName'); + state.city = 'Seattle'; + inputContainer.value = ''; + cityName.textContent = state.city; +}; + +const updateTemperature = (event) => { + const tempContainer = document.querySelector('#Temperature'); + axios + .get(`http://localhost:5000/location?q=${state.city}`) + .then((response) => { + state.latitude = response.data[0].lat; + state.longitude = response.data[0].lon; + console.log(response.data); + axios + .get( + `http://localhost:5000/weather?lat=${state.latitude}&lon=${state.longitude}` + ) + .then((response) => { + const temperatureKelvin = response.data.main.temp; + state.Temperature = ((temperatureKelvin - 273.15) * 9) / 5 + 32; + tempContainer.textContent = `${Math.round(state.Temperature)}`; + tempRange(); + console.log(response.data); + }) + .catch((error) => { + console.log('OpenWeather GET request error'); + }); + }) + .catch((error) => { + console.log('LocationIQ GET request error'); + }); +}; + +const registerEventHandlers = (event) => { + const increaseTempButton = document.querySelector('#increaseTempButton'); + increaseTempButton.addEventListener('click', increaseTemp); + // increaseTempButton.addEventListener('click', tempRange); + const decreaseTempButton = document.querySelector('#decreaseTempButton'); + decreaseTempButton.addEventListener('click', decreaseTemp); + // decreaseTempButton.addEventListener('click', tempRange); + const inputCityName = document.querySelector('#inputCityName'); + inputCityName.addEventListener('input', chooseCityName); + const resetCityNameButton = document.querySelector('#resetCityName'); + resetCityNameButton.addEventListener('click', resetCityName); + const updateTempButton = document.querySelector('#updateTempButton'); + updateTempButton.addEventListener('click', updateTemperature); + const skySelect = document.querySelector('#skySelect'); + skySelect.addEventListener('change', updateSky); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..7acc7db41 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,98 @@ +body { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto auto auto; + grid-gap: 1rem; + background-color: rgb(147, 227, 247); + margin: 1rem; +} + +/* Flexbox Page Layout */ +.titleBlock { + grid-row: 1; + grid-column: span 3; + display: grid; + align-self: center; +} + +.cityNameBlock, +.skyConditionBlock, +.temperatureBlock { + border-radius: 8px; + padding: 2rem; + background-color: white; +} + +.cityNameBlock { + grid-row: 3; + text-align: center; +} + +.skyConditionBlock { + grid-row: 4; + text-align: center; +} + +.temperatureBlock { + grid-row: 3 / span 3; + grid-column: 2; + text-align: center; + align-self: center; +} + +/* Specific Elements */ +.banner { + grid-column: span 3; + text-align: center; +} + +#skyBanner { + grid-row: 2; +} + +#siteTitle { + font-size: larger; + text-align: left; +} + +#cityName { + text-align: left; +} + +#resetCityName { + border-radius: 3em; +} + +#skySelect { + background-color:rgb(230, 191, 243); + border-radius: 3em; +} + +#cityName { + font-size: larger; +} + +#increaseTempButton { + background-color: bisque; + border-radius: 3em; + +} + +#Temperature { + font-size: 30px; +} + +#decreaseTempButton { + background-color: bisque; + border-radius: 3em; +} + +#updateTempButton { + background-color: bisque; + border-radius: 3em; +} + +#cityName { + font-size: larger; +} +