diff --git a/.gitignore b/.gitignore index 31b153a9b..8ad729bbf 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .vscode .DS_Store node_modules -.cache \ No newline at end of file +.cache +.env \ No newline at end of file diff --git a/index.html b/index.html index 68b320b9a..c9baff0aa 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -5,8 +6,54 @@ Weather Report + + - +

WEATHER CHANNEL

+ +

🌳 Weather for the City of Seattle πŸƒ

+ + +
+
+

Temperature

+ + 0 + + +
+ +
+
+
+

Sky

+ +
+
+ + +
+
+

City

+ + +
+
+ +
+

Weather Visual

+
+
🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_πŸ¦‚
+ +
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..23d465d9b 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,140 @@ +'use strict'; + +const state = { + city: 'Seattle', + lat: 47.6038321, + long: -122.3300624, + temp: 48, +}; + +const convertKtoF = (temp) => { + return (temp - 273.15) * (9 / 5) + 32; +}; + +// increase/decrease +const upButton = document.getElementById('up'); +const downButton = document.getElementById('down'); +let display = document.getElementById('tempNum'); + +upButton.addEventListener('click', function increaseTemp() { + state.temp++; + display.textContent = state.temp; + displayEmojis(); +}); +downButton.addEventListener('click', function decreaseTemp() { + state.temp--; + display.textContent = state.temp; + displayEmojis(); +}); + +const findLatAndLong = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + state.lat = response.data[0].lat; + state.long = response.data[0].lon; + findWeather(); + }); +}; + +const currentWeather = document.getElementById('currentWeather'); +currentWeather.addEventListener('click', findLatAndLong); + +const findWeather = (lat, long) => { + axios + .get('http://127.0.0.1:5000/weather', { + params: { + lat: state.lat, + lon: state.long, + // units: imperial, + }, + }) + .then((response) => { + const weather = response.data; + console.log(weather); + state.temp = Math.round(convertKtoF(weather.main.temp)); + displayEmojis(); + // console.log(weather); + }); + // console.log(findWeather); +}; + +currentWeather.addEventListener('click', findWeather); + +const updateCity = (event) => { + const newCity = event.target.value; + state.city = newCity; + displayCity(); +}; + +const newCity = document.getElementById('newCity'); +newCity.addEventListener('input', updateCity); +const resetText = () => { + const newCity = document.getElementById('newCity'); + newCity.value = 'Seattle'; + updateCity(); +}; +// Get the button +let resetButton = document.getElementById('reset'); +// Add a click event listener to the button +resetButton.addEventListener('click', resetText); + +const displayCity = () => { + document.getElementById('cityInput').textContent = state.city; +}; + +const displayEmojis = () => { + let numColor = 'red'; + let emojisBelow = '🌡__🐍_πŸ¦‚_🌡🌴__🐍_🏜_πŸ¦‚'; + if (state.temp > 80) { + emojisBelow = '🌴__🐍_πŸ¦‚_🌴🌡__🐍_🏜_🌴'; + numColor = 'red'; + } else if (state.temp > 70) { + emojisBelow = '🌸🌿🌼__πŸŒ·πŸŒ»πŸ¦‹_☘️🌱_πŸ¦‹πŸŒ·'; + numColor = 'orange'; + } else if (state.temp > 60) { + emojisBelow = 'πŸ₯ΎπŸžοΈπŸ•πŸ§—πŸš΅β›°_πŸͺ¨πŸ₯ΎπŸžοΈπŸ•πŸ§—πŸš΅β›°'; + numColor = 'green'; + } else if (state.temp > 50) { + emojisBelow = 'πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅πŸ‚β˜•οΈπŸͺ΅'; + numColor = 'purple'; + } else { + emojisBelow = 'πŸŒ²πŸŒ²β›„οΈπŸŒ²β›„οΈπŸ‚πŸŒ²πŸπŸŒ²πŸŒ²β›„οΈπŸ‚πŸŒ²'; + numColor = 'grey'; + } + const newEmojis = document.getElementById('emojis-below'); + newEmojis.textContent = emojisBelow; + + const temperature = document.getElementById('tempNum'); + temperature.className = numColor; + temperature.textContent = String(state.temp); +}; + +const updateSky = () => { + const inputSky = document.getElementById('climate').value; + let sky = ''; + if (inputSky === 'clouds') { + sky = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌀 ☁️ ☁️☁️'; + } else if (inputSky === 'sunshine') { + sky = '☁️☁️☁️ ☁️ ☁️ β˜€οΈ ☁️ ☁️☁️☁️'; + } else if (inputSky === 'rain') { + sky = 'πŸŒ§πŸŒˆβ›ˆπŸŒ§πŸŒ§πŸ’§β›ˆπŸŒ§πŸŒ¦πŸŒ§πŸ’§πŸŒ§πŸŒ§'; + } else if (inputSky === 'snow') { + sky = 'πŸŒ¨β„οΈπŸŒ¨πŸŒ¨β„οΈβ„οΈπŸŒ¨β„οΈπŸŒ¨β„οΈβ„οΈπŸŒ¨πŸŒ¨'; + } else if (inputSky === 'wind') { + sky = '🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️🌬️☁️'; + } + + const skyContainer = document.getElementById('weather-emojis'); + skyContainer.textContent = sky; +}; + +updateSky(); +const chooseSky = document.getElementById('climate'); +chooseSky.addEventListener('change', updateSky); + +console.log(updateSky); diff --git a/styles/index.css b/styles/index.css index e69de29bb..dfc5fc387 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,75 @@ + +* { + box-sizing: border-box; +} + +body { + /* margin: 0; */ + display: flex; + flex-wrap: wrap; + background-color: #cad0bd; +} + + +.temp-section { + background: yellow; + float: left; + width: 50%; + height: 400px; + text-align: center; + /* padding-bottom: 50%; */ +} + +.sky-section{ + background: lightblue; + float: right; + width: 50%; + height: 400px; + text-align: center; +} + +.city_section{ + background: orange; + float: right; + width: 50%; + text-align: center; +} + +.emojis { + background: rgb(121, 194, 121); + float: left; + width: 50%; + height: 400px; + text-align: center; +} + + +#tempNum { + font-size: 3rem; + +} + +.red { + color: red; +} + +.orange { + color: orange; +} + +.yellow { + color: gold; +} + +.green { + color: green; +} + +.purple { + color: purple +} + +.grey { + color: grey; +} +