diff --git a/assets/wireframe b/assets/wireframe new file mode 100644 index 000000000..e69de29bb diff --git a/assets/wireframe-illustration.png b/assets/wireframe-illustration.png new file mode 100644 index 000000000..a1d3d4963 Binary files /dev/null and b/assets/wireframe-illustration.png differ diff --git a/index.html b/index.html index 68b320b9a..2cbb79b2d 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,72 @@ Weather Report + - +
+

Weather for the lovely city of Seattle

+
+
+
+
+
+

Temperature

+
+
+
+ +

+ +
+
+
+

Today's Low:

+

Today's High:

+

Description:

+
+ +
+
+
+
+
+

Sky

+
+ + +
+
+
+

City Name

+
+ + + +
+
+
+
+

+ Weather Garden +

+
+
+

+ ☁️ ☁️ ☁️ ☀️ ☁️ ☁️ +

+

+ 🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃 +

+
+
+
+ + \ No newline at end of file diff --git a/package.json b/package.json index 9cf5ca65b..b32116095 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,4 @@ -{ - "dependencies": { +{ "dependencies": { "axios": "^0.27.2" } } diff --git a/src/index.js b/src/index.js index e69de29bb..aee7c2106 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,144 @@ +const GARDENSKIES = { + sunny: '☁️ ☁️ ☁️ ☀️ ☁️ ☁️', + cloudy: '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️', + rainy: '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧', + snowy: '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨', +}; + +const CONDITIONS = { + hot: { landscape: '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂', text: 'red' }, + warm: { landscape: '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷', text: 'orange' }, + moderate: { landscape: '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃', text: 'yellow' }, + chilly: { landscape: '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲', text: 'green' }, + cold: { landscape: '❄️🌲⛄️🌲❄️🏂⛄️🌲❄️⛷🌲❄️🌲', text: 'teal' }, +}; + +const state = { + tempValue: 60, + cityLow: null, + cityHigh: null, + weatherDescription: null, +}; + +const kelvinToFahrenheit = (temperature) => + (temperature - 273.15) * (9 / 5) + 32; + +const updateTemp = () => { + const tempValue = document.querySelector('#tempValue'); + tempValue.textContent = state.tempValue; + conditionLayout(state.tempValue, tempValue); +}; + +const incrementTemp = () => { + state.tempValue += 1; + updateTemp(); +}; + +const decrementTemp = () => { + state.tempValue -= 1; + updateTemp(); +}; + +const conditionLayout = (temp, el) => { + const landscapeLayout = document.querySelector('#gardenLandscape'); + let currentCondition = null; + if (temp >= 80) { + currentCondition = CONDITIONS.hot; + } else if (temp < 80 && temp >= 70) { + currentCondition = CONDITIONS.warm; + } else if (temp < 70 && temp >= 60) { + currentCondition = CONDITIONS.moderate; + } else if (temp < 60 && temp >= 50) { + currentCondition = CONDITIONS.chilly; + } else if (temp < 50) { + currentCondition = CONDITIONS.cold; + } + el.style.color = currentCondition.text; + landscapeLayout.textContent = currentCondition.landscape; +}; + +const updateTitleCity = () => { + let titleCity = document.querySelector('#titleCity'); + // console.log(cityName.value); + titleCity.textContent = `${cityName.value}`; +}; + +const resetCity = () => { + document.querySelector('#titleCity').textContent = 'Seattle'; + document.querySelector('#cityName').value = ''; + getCityWeather(); +}; + +const updateWeatherGardenSky = () => { + let gardenSky = document.querySelector('#gardenSky'); + console.log(`${weatherSelector.value}`); + gardenSky.textContent = GARDENSKIES[weatherSelector.value]; +}; + +const displayCurrentConditions = () => { + let dailyLow = document.querySelector('#dailyLow'); + let dailyHigh = document.querySelector('#dailyHigh'); + let description = document.querySelector('#dailyDescription'); + dailyLow.innerText = `Today's Low: ${state.cityLow}`; + dailyHigh.innerText = `Today's High: ${state.cityHigh}`; + description.innerText = `Description: ${state.weatherDescription}`; +}; + +const getCityWeather = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { q: `${cityName.value ? cityName.value : 'Seattle'}` }, + }) + .then((response) => { + console.log(response.data); + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: response.data[0]['lat'], + lon: response.data[0]['lon'], + }, + }) + .then((response) => { + console.log(response.data); + state.tempValue = Math.round( + kelvinToFahrenheit(response.data.current.temp) + ); + updateTemp(); + state.cityLow = Math.round( + kelvinToFahrenheit(response.data.daily[0].temp.min) + ); + state.cityHigh = Math.round( + kelvinToFahrenheit(response.data.daily[0].temp.max) + ); + state.weatherDescription = + response.data.daily[0].weather[0].description; + displayCurrentConditions(); + }) + .catch((error) => { + console.log('error', error); + console.log('error response', error.response); + }); + }) + .catch((error) => { + console.log('error', error); + console.log('error response', error.response); + }); +}; + +const registerEventHandlers = () => { + const cityInput = document.querySelector('#cityName'); + cityInput.addEventListener('input', updateTitleCity); + const resetBtn = document.querySelector('#resetBtn'); + resetBtn.addEventListener('click', resetCity); + const weatherSelector = document.querySelector('#weatherSelector'); + weatherSelector.addEventListener('change', updateWeatherGardenSky); + const incrementButton = document.querySelector('#tempUp'); + incrementButton.addEventListener('click', incrementTemp); + const decrementButton = document.querySelector('#tempDown'); + decrementButton.addEventListener('click', decrementTemp); + const getTempButton = document.querySelector('#getTemp'); + getTempButton.addEventListener('click', getCityWeather); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); +document.addEventListener('DOMContentLoaded', getCityWeather); diff --git a/styles/index.css b/styles/index.css index e69de29bb..35762a837 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,83 @@ +button { + background: lightblue; + padding: 10px; + border-radius: 25px; +} + +#weatherFrame { + display: grid; + grid-template-columns: 1fr 1.5fr; + gap: 30px; + padding: 10px; + min-width: max-content; + max-width: 100%; +} +#weatherFrame h2{ + margin-top: 0px; +} + +#clickables{ + display: flexbox; +} + +#clickables > section{ + padding: 25px; + margin: 10px; + background: grey; + border-radius: 25px; +} + +#tempButtonLayout { + display: flex; + flex-direction: row; + justify-content: space-around; + border-style: double; + border-radius: 10px; + padding: 20px; + background-color: rgba(240, 255, 255, 0.225); +} + +#tempValue { + font-size: 50px; + color: yellow; +} + +#cityBlock ::placeholder{ + color:lightgray; +} + +#gardenBlock { + min-width: max-content; + max-width: 75%; +} +#gardenBlock h2{ + text-align: center; +} + +#garden { + display: flex; + flex-direction: column; + gap: 100px; + background: lightblue; + border-radius: 10px; + padding: 5px; + text-align: center; +} + +#dailyRange { + font-size: large; + background-color: rgba(134, 203, 208, 0.384); + padding: 5px; + border-radius: 10px; +} + +#realTimeDisplay { + display: flex; + flex-direction: column; + justify-content: space-around; +} + +#titleCity { + font-style: italic; +} +