diff --git a/index.html b/index.html index 68b320b9a..45f988af5 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,61 @@ - Weather Report + Magic Weather Report + - - + + +
+

Spooky Weather Report👻

+ + +
+
+ Spooky Weather in: + + +
+
+
+
+
+ + +
+
+

Temperature

+
+
+

Make a weather wish

+ 🔥hotter + ❄️colder +
+ +
+
+
+

Pick Sky

+ +
+ +
+

City Name

+ + Reset + Get Weather +
+

+
+
+
+ + + \ No newline at end of file diff --git a/package.json b/package.json index 9cf5ca65b..1cfcba810 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { "dependencies": { - "axios": "^0.27.2" + "axios": "^1.2.1" } } diff --git a/src/index.js b/src/index.js index e69de29bb..51041c769 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,167 @@ +const state = { + city: 'Ann Arbor', + lat: 42.279594, + long: -83.732124, + temp: 25, + displayName: 'Ann Arbor, MI', +}; + +const convertKtoF = (temp) => { + return (temp - 273.15) * (9 / 5) + 32; +}; + +const getLatLon = () => { + axios + .get('http://127.0.0.1:5000/location', { + params: { + q: state.city, + }, + }) + .then((response) => { + console.log(response.data[0]); + state.lat = response.data[0].lat; + state.long = response.data[0].lon; + state.displayName = response.data[0].display_name; + getWeather(); + }) + .catch((error) => { + console.log('Error finding the latitude and longitude:', error.response); + }); +}; + +const getWeather = () => { + axios.get('http://127.0.0.1:5000/weather', { + params: { + lat: state.lat, + lon: state.long, + displayName: state.displayName, + }, + }) + .then((response) => { + console.log(response.data) + const weather = response.data; + state.temp = Math.round(convertKtoF(weather.main.temp)); + formatTempAndGarden(); + }) + .catch((error) => { + console.log('Error getting the weather:', error); + }); +}; + +const updateSky = () => { + const inputSky = document.getElementById('skySelect').value; + const skyContainer = document.getElementById('sky'); + let sky = ''; + let skyColor = ''; + if (inputSky === 'Cloudy') { + sky = '☁️👽☁️ ☁️ ☁️👽☁️ ☁️ 🌤 ☁️ ☁️👽☁️'; + skyColor = 'cloudy'; + } else if (inputSky === 'Sunny') { + sky = '☁️ 🤖 ☁️ 🤖 ☁️ ☀️ ☁️ 🤖 ☁️'; + skyColor = 'sunny'; + } else if (inputSky === 'Rainy') { + sky = '🧟‍♀️🌈⛈🌧🧟‍♀️💧⛈🌧🌦🧟‍♀️💧🌧🧟‍♀️'; + skyColor = 'rainy'; + } else if (inputSky === 'Snowy') { + sky = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'; + skyColor = 'snowy'; + } + skyContainer.textContent = sky; + const gardenContent = document.getElementById('gardenContent'); + gardenContent.classList = `garden__content ${skyColor}`; +}; + + const updateCityName = () => { + const inputName = document.getElementById('cityNameInput').value; + const headerCityName = document.getElementById('headerCityName'); + state.city = inputName; + headerCityName.textContent = state.city; +}; + +const resetCityName = () => { + const cityNameInput = document.getElementById('cityNameInput'); + cityNameInput.value = 'Ann Arbor'; + updateCityName(); +}; +const updateDisplayName = () => { + let displayName = document.getElementById('weatherDisplayName'); + displayName.textContent = state.displayName; +}; + +const resetDisplay = () => { + const cityNameInput = document.getElementById('weatherDisplayName'); + cityNameInput.textContent = 'Ann Arbor, MI'; + updateDisplayName(); +}; + + +const formatTempAndGarden = () => { + let temp = state.temp; + let color = 'red'; + let landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + if (temp > 80) { + color = 'red'; + landscape = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + } else if (temp > 70) { + color = 'orange'; + landscape = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (temp > 60) { + color = 'yellow'; + landscape = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else if (temp > 50) { + color = 'green'; + landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } else { + color = 'teal'; + landscape = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } + + const newLandscape = document.getElementById('landscape'); + newLandscape.textContent = landscape; + const temperature = document.getElementById('tempValue'); + temperature.className = color; + temperature.textContent = String(state.temp); +}; + +const increaseTemp = () => { + state.temp += 1; + formatTempAndGarden(); +}; + +const decreaseTemp = () => { + state.temp -= 1; + formatTempAndGarden(); +}; + +const registerEventHandlers = () => { + formatTempAndGarden(); + + const currentTempButton = document.getElementById('currentTempButton'); + currentTempButton.addEventListener('click', getLatLon); + + const increaseTempControl = document.getElementById('increaseTempControl'); + increaseTempControl.addEventListener('click', increaseTemp); + + const decreaseTempControl = document.getElementById('decreaseTempControl'); + decreaseTempControl.addEventListener('click', decreaseTemp); + + updateCityName(); + const cityNameInput = document.getElementById('cityNameInput'); + cityNameInput.addEventListener('input', updateCityName); + + const cityNameResetBtn = document.getElementById('cityNameReset'); + cityNameResetBtn.addEventListener('click', resetCityName); + + updateDisplayName(); + const cityDisplayName = document.getElementById('currentTempButton'); + cityDisplayName.addEventListener('click', updateDisplayName); + + const cityDisplayNameReset = document.getElementById('cityNameReset'); + cityDisplayNameReset.addEventListener('click', resetDisplay); + + updateSky(); + const skySelect = document.getElementById('skySelect'); + skySelect.addEventListener('change', updateSky); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..47f4a30e0 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,117 @@ + + +body { +font-family:Georgia, 'Times New Roman', Times, serif; +font-size: 22px; +background-color: #e88feb; +margin: 3rem; +} + +.header__header { +color: rgb(41, 6, 41); +grid-column: span 3; +display: flex; +align-items: center; +margin: 2rem auto 3rem 0; +} + +.header__header > h1 { +margin-right: 10rem; +font-size: 3em; +} + +.header__city-name { +font-style: oblique; +font-size: 2rem; +} + +.header__city-name::before, +.header__city-name::after { +content: "✨"; +} + +.temperature__section, +.sky__section, +.city-name__section { +border-radius: 8px; +padding: 2rem; +background-color: rgb(249, 237, 247); +padding:initial +} + +.sky__section { +grid-row: 3; +} + +.city-name__section { +grid-row: 1; +} + +.garden__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + +.temperature__content { +display: flex; +flex-direction: row; +justify-content: center; +justify-content: center; +} + +#tempValue { +font-size: 4rem; +margin-left: 1.5rem; +padding-right: 1rem; +margin-right: 1.5rem; +} + +.temperature__controls { +display: flex; +color: #8f5e91; +flex-direction: column; +align-items: center; +} + + +.garden__content { +min-height: 200px; +max-width: fit-content; +margin: auto; +padding: 2rem; + +display: flex; +flex-direction: column; +justify-content: space-between; + +border-radius: 8px; +font-size: 2.4em; +} + +.cloudy { +background-color: rgb(107, 106, 106); +} + +.sunny { +background-color: rgb(247, 239, 122); +} + +.rainy { +background-color: rgb(42, 170, 213); +} + +.snowy { +background-color: rgb(250, 252, 253); +} + +.sky__section { +grid-row: 2 / span 3; +grid-column: 2; +text-align: center; +align-self: center; +} + + + diff --git a/yarn.lock b/yarn.lock index 37fbaed29..26630f422 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,13 +7,14 @@ asynckit@^0.4.0: resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== -axios@^0.27.2: - version "0.27.2" - resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972" - integrity sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ== +axios@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a" + integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A== dependencies: - follow-redirects "^1.14.9" + follow-redirects "^1.15.0" form-data "^4.0.0" + proxy-from-env "^1.1.0" combined-stream@^1.0.8: version "1.0.8" @@ -27,10 +28,10 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk= -follow-redirects@^1.14.9: - version "1.15.0" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.0.tgz#06441868281c86d0dda4ad8bdaead2d02dca89d4" - integrity sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ== +follow-redirects@^1.15.0: + version "1.15.2" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13" + integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA== form-data@^4.0.0: version "4.0.0" @@ -52,3 +53,8 @@ mime-types@^2.1.12: integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== dependencies: mime-db "1.52.0" + +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==