diff --git a/index.html b/index.html index 68b320b9a..2a211fa63 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,62 @@ Weather Report + + + + + + + + - + +
+

Weather App

+
+ + +
+
+
+ +
+ +

Temperature in

+ +
+

Dallas

+ +
+ +
+

70°

+ +
+ + +
+
°F°C
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/src/images/cloudySky.jpeg b/src/images/cloudySky.jpeg new file mode 100644 index 000000000..9d336d267 Binary files /dev/null and b/src/images/cloudySky.jpeg differ diff --git a/src/images/cool.png b/src/images/cool.png new file mode 100644 index 000000000..e29a9a216 Binary files /dev/null and b/src/images/cool.png differ diff --git a/src/images/rainSky.jpg b/src/images/rainSky.jpg new file mode 100644 index 000000000..ba555e394 Binary files /dev/null and b/src/images/rainSky.jpg differ diff --git a/src/images/snow.png b/src/images/snow.png new file mode 100644 index 000000000..bb750b787 Binary files /dev/null and b/src/images/snow.png differ diff --git a/src/images/snowySky.jpeg b/src/images/snowySky.jpeg new file mode 100644 index 000000000..660d3c58c Binary files /dev/null and b/src/images/snowySky.jpeg differ diff --git a/src/images/spring.png b/src/images/spring.png new file mode 100644 index 000000000..0632f1c0d Binary files /dev/null and b/src/images/spring.png differ diff --git a/src/images/sunny.png b/src/images/sunny.png new file mode 100644 index 000000000..b5603e65e Binary files /dev/null and b/src/images/sunny.png differ diff --git a/src/images/sunnySky.jpeg b/src/images/sunnySky.jpeg new file mode 100644 index 000000000..7ee253bc0 Binary files /dev/null and b/src/images/sunnySky.jpeg differ diff --git a/src/index.js b/src/index.js index e69de29bb..482e36d25 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,240 @@ +'use strict'; + +const state = { + temp: 80, + tempColor: 'red', + tempBackground: 'url(../src/images/sunny.png)', + cityName: 'Dallas', + lat: 32.7762719, + lon: -96.7968559, + isF: true, + skyBackground: 'url(../src/images/sunnySky.jpeg)', +}; + +//Default Values +const temp = document.getElementById('temp'); +temp.textContent = state.temp + '°'; +temp.style.color = state.tempColor; +temp.style.color = state.cityName; + +const backColor = document.getElementsByTagName('main')[0]; +backColor.style.backgroundImage = state.tempBackground; + +// Change the color of the temp +const changetempColor = () => { + if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) { + state.tempColor = 'red'; + temp.style.color = state.tempColor; + } else if ( + (state.isF && state.temp < 80 && state.temp > 69) || + (!state.isF && state.temp < 27 && state.temp > 20) + ) { + state.tempColor = 'orange'; + temp.style.color = state.tempColor; + } else if ( + (state.isF && state.temp < 70 && state.temp > 59) || + (!state.isF && state.temp < 20 && state.temp > 15) + ) { + state.tempColor = 'yellow'; + temp.style.color = state.tempColor; + } else if ( + (state.isF && state.temp < 60 && state.temp > 49) || + (!state.isF && state.temp < 15 && state.temp > 10) + ) { + state.tempColor = 'green'; + temp.style.color = state.tempColor; + } else if ( + (state.isF && state.temp < 50) || + (!state.isF && state.temp < 10) + ) { + state.tempColor = 'teal'; + temp.style.color = state.tempColor; + } +}; + +// Change the background image by temp +const changeBackImg = () => { + if ((state.isF && state.temp >= 80) || (!state.isF && state.temp >= 27)) { + state.tempBackground = 'url(../src/images/sunny.png)'; + backColor.style.backgroundImage = state.tempBackground; + backColor.style.color = 'black'; + } else if ( + (state.isF && state.temp < 80 && state.temp > 69) || + (!state.isF && state.temp < 27 && state.temp > 20) + ) { + state.tempBackground = 'url(../src/images/spring.png)'; + backColor.style.backgroundImage = state.tempBackground; + backColor.style.color = 'white'; + } else if ( + (state.isF && state.temp < 70 && state.temp > 59) || + (!state.isF && state.temp < 20 && state.temp > 15) + ) { + state.tempBackground = 'url(../src/images/cool.png)'; + backColor.style.backgroundImage = state.tempBackground; + backColor.style.color = 'white'; + } else if ( + (state.isF && state.temp < 60) || + (!state.isF && state.temp < 15) + ) { + state.tempBackground = 'url(../src/images/snow.png)'; + backColor.style.color = 'white'; + backColor.style.backgroundImage = state.tempBackground; + } +}; + +// Increase & Decrease the temp +const increaseTemp = () => { + state.temp++; + temp.textContent = `${state.temp}°`; + changetempColor(); + changeBackImg(); +}; + +const decreaseTemp = () => { + state.temp--; + temp.textContent = `${state.temp}°`; + changetempColor(); + changeBackImg(); +}; + +// Change city name by input box +const changeCity = (e) => { + // const searchCity = document.getElementById('search-box'); + const cityState = document.getElementById('city-state'); + state.cityName = e.target.value; + cityState.textContent = state.cityName; +}; + +// Get lat lon of city. +const getLatLon = () => { + const url = 'http://127.0.0.1:5000/'; + axios + .get(url + 'location', { + params: { + q: state.cityName, + }, + }) + .then((response) => { + const data = response.data[0]; + state.lat = data.lat; + state.lon = data.lon; + getWeather(); + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +// get weather data and update colors and background image +const getWeather = () => { + const url = 'http://127.0.0.1:5000/'; + axios + .get(url + 'weather', { + params: { + lat: state.lat, + lon: state.lon, + }, + }) + .then((response) => { + const ktemp = response.data.current.temp; + state.temp = kToF(ktemp); + temp.textContent = `${state.temp}°`; + changetempColor(); + changeBackImg(); + }) + .catch((error) => { + console.log('error!', error.response.data); + }); +}; + +// kelvin to F or C +const kToF = (k) => { + if (state.isF) { + const conversion = (k - 273.15) * (9 / 5) + 32; + return Math.round(conversion); + } else if (!state.isF) { + const conversion = k - 273.15; + return Math.round(conversion); + } +}; + +// Toggle between F and C and change the button +const setTempToggle = () => { + state.isF = !state.isF; + if (state.isF === false) { + const toggle = document.getElementById('toggle'); + toggle.classList.remove('fa-toggle-off'); + toggle.classList.add('fa-toggle-on'); + } else { + const toggle = document.getElementById('toggle'); + toggle.classList.remove('fa-toggle-on'); + toggle.classList.add('fa-toggle-off'); + } + getLatLon(); +}; + +//change sky +const changeSky = (e) => { + const skyImg = document.getElementById('sky-container'); + const skyValue = document.getElementById('sky-select').value; + + if (skyValue === 'sunny') { + state.skyBackground = 'url(../src/images/sunnySky.jpeg)'; + skyImg.style.backgroundImage = state.skyBackground; + } else if (skyValue === 'rainy') { + console.log(skyValue); + state.skyBackground = 'url(../src/images/rainSky.jpg)'; + skyImg.style.backgroundImage = state.skyBackground; + } else if (skyValue === 'snowy') { + state.skyBackground = 'url(../src/images/snowySky.jpeg)'; + skyImg.style.backgroundImage = state.skyBackground; + } else if (skyValue === 'cloudy') { + state.skyBackground = 'url(../src/images/cloudySky.jpeg)'; + skyImg.style.backgroundImage = state.skyBackground; + } +}; + +// Reset search button +const resetSearchBtn = () => { + const searchBox = document.getElementById('search-box'); + const cityState = document.getElementById('city-state'); + searchBox.value = ''; + state.cityName = 'Dallas'; + cityState.textContent = state.cityName; + getLatLon(); +}; + +// Event Handlers +const registerEventHandlers = () => { + // Increse Decrease Arrows + const upArrow = document.getElementById('arrow-up'); + upArrow.addEventListener('click', increaseTemp); + + const downArrow = document.getElementById('arrow-down'); + downArrow.addEventListener('click', decreaseTemp); + + //Search for city and reset city button + const searchCity = document.getElementById('search-box'); + searchCity.addEventListener('input', changeCity); + + const resetBtn = document.getElementById('search-reset-btn'); + resetBtn.addEventListener('click', resetSearchBtn); + + //Get current temp + const cityTempBtn = document.getElementById('currentTempBtn'); + cityTempBtn.addEventListener('click', getLatLon); + + //Toggle btwn F/C + const toggleFC = document.getElementById('tempToggle'); + toggleFC.addEventListener('click', setTempToggle); + + //Change sky + const skySelect = document.getElementById('sky-select'); + skySelect.addEventListener('change', changeSky); + + // Default Values that need DOM content loading + const skyContainer = document.getElementById('sky-container'); + skyContainer.style.backgroundImage = state.skyBackground; +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..4cc34f44d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,147 @@ +body{ + display: grid; + grid-template: 20% 1fr 1fr 10%/ 1fr 1fr 1fr; + margin: 0; + padding: 0; + font-family: 'Monserrat', sans-serif; +} + +header{ + background-color: blue; + display: flex; + justify-content: space-evenly; + min-height: 30vh; + grid-area: 1/1/2/4; + align-items: center; + +} + +main{ + grid-area: 2/1/4/5; + padding: 10% 0; + background-color: grey; + /* background-image: url('../src/images/snow.jpeg'); */ + background-repeat: no-repeat; + background-size: cover; +} + +footer{ + grid-area: 4/1/5/5; + height: 100%; + /* background-color: peru; */ +} + +/* -----Search Bar */ +.search-box{ + width: 100px; height: 200px +} + +/* Temp Area */ +.h1-temp{ + margin-bottom: 0; + margin-top: 0; + text-align: center; + opacity: 100%; +} + +.search{ + /* align-items: center; */ + /* background-color: red; */ + size: 1.5rem; + align-content: flex-end; +} + +.temp-box-container{ + grid-column-start: 2; + grid-column-end: 3; + margin: 0 auto; + padding: 5% 0 5%; + width:40%; + justify-items: center; + background-color: rgba(191, 191, 191, .4); + border-radius: 25%; +} + +.temp-box-header{ + text-align: center; + /* background-color: brown; */ + width: 100%; + +} + +.temp-and-arrows{ + text-align: center; + margin-top: 2rem; +} + +.div-temp{ + justify-items: center; +} + +.temp-arrows{ + margin: 0, .5rem; + /* color: black; */ +} + +.fa-solid{ + padding: 1rem; +} + +.tempToggle { + padding: 15px 10px; +} + +.fc { + font-size: 1.5rem; +} + +#toggle:hover { + color: grey; +} + +#arrow-up{ + padding-right: 3rem; +} + +#arrow-down:hover{ + color: darkgray; +} + +#arrow-up:hover{ + color: darkgray; +} + +#city-state{ + margin: 0; + font-size: 3rem; +} + +#temp{ + font-size: 3.5rem; + margin-top: 0.5rem; + margin-bottom: 0; +} + +/*----- sky ------*/ +#sky-container{ + background-color: palevioletred; + padding-top: 5%; + display: flex; + justify-content: center; + font-size: 1.5rem; + background-repeat: no-repeat; + background-size:cover; +} + +.sky{ + height: 50%; +} + + +.red{ + color: red; +} + +.logo { + color: white; +} \ No newline at end of file