diff --git a/index.html b/index.html index 68b320b9a..218f00bec 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,59 @@ + - - - + + + Weather Report + + + + + - +
+

Weather Report

+ For the lovely city of + +
+
+

Temperature

+
+
+ ⬆️ + + ⬇️ + +
+
+
+
+

Sky

+ +
+ +
+

City Name

+ + +
+ +
+

Weather Garden

+
+
+
+
+
+ + + \ 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..1604d7181 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,149 @@ +const URL = 'http://127.0.0.1:5000'; + +const state = { + city: 'Los Angeles', + temp: 75, + lat: 34.0536909, + lon: -118.242766 +}; + + +const showTemp = () => { + const tempValue = document.querySelector('#tempValue'); + tempValue.textContent = `${state.temp} °F`; + colorReaction(); +} +const increaseTemp = () => { + const tempValue = document.querySelector('#tempValue'); + state.temp += 1; + tempValue.textContent = `${state.temp} °F`; + colorReaction(); +}; + +const decreaseTemp = () => { + const tempValue = document.querySelector('#tempValue'); + state.temp -= 1; + tempValue.textContent = `${state.temp} °F`; + colorReaction(); +}; + +const colorReaction = () => { + const tempColor = document.querySelector('#tempValue') + const landscape = document.querySelector('#landscape') + + if (state.temp >= 80) { + tempColor.style.color = 'red'; + landscape.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂🍳'; + } else if (state.temp >= 70 && state.temp <= 79) { + tempColor.style.color = 'orange'; + landscape.textContent = '🌸🌿🌼__🌷🌻🌿 _☘️🌱 _🌻🌷 '; + } else if (state.temp >= 60 && state.temp <= 69) { + tempColor.style.color = 'yellow'; + landscape.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else if (state.temp >= 50 && state.temp <= 59) { + tempColor.style.color = "green"; + landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } else { + tempColor.style.color = 'teal'; + landscape.textContent = '⛄️⛄️🌲⛄️⛄️⛄️🌲⛄️⛄️🌲⛄️⛄️⛄️'; + } +}; + +const changeCityName = () => { + 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 = 'Los Angeles'; + changeCityName(); +}; +const convertKelvinToFahrenheit = (temp) => { + return Math.round((temp - 273.15) * (9 / 5) + 32); +}; + +const findLatAndLong = async () => { + await axios .get(`${URL}/location`, { + params: { + q: state.city, + }, + }) + .then((response) => { + state.lat = response.data[0].lat; + state.lon = response.data[0].lon; + getWeather(); + }) + .catch((error) => { + console.log('Error finding the latitude and longitude:', error.response); + }); +}; + +const getWeather = async () => { + await axios .get(`${URL}/weather`, { + params: { + lat: state.lat, + lon: state.lon, + }, + }) + .then((response) => { + const weather = response.data; + state.temp = convertKelvinToFahrenheit(weather.main.temp); + colorReaction(); + const tempValue = document.querySelector('#tempValue'); + tempValue.textContent = `${state.temp} °F`; + }) + .catch((error) => { + console.log('Error getting the weather:', error); + }); +}; + +const updateSky = () => { + const skyContainer = document.getElementById('sky'); + const choiceSky = document.getElementById('skySelect').value; + let skyDisplay = 'Cloudy'; + if (choiceSky === 'Cloudy') { + skyContainer.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️'; + skyDisplay = 'cloudy'; + } else if (choiceSky === 'Snowy') { + skyContainer.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'; + skyDisplay = 'snowy'; + } else if (choiceSky === 'Rainy') { + skyContainer.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧'; + skyDisplay = 'rainy'; + } else if (choiceSky === 'Sunny') { + skyContainer.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'; + skyDisplay = 'sunny'; + } + const gardenContent = document.getElementById('gardenContent'); + gardenContent.classList = `garden__content ${skyDisplay}`; +}; + + + +const registerEventHandlers = () => { + showTemp(); + const currentTempButton = document.getElementById('tempReset'); + currentTempButton.addEventListener('click', findLatAndLong); + const increaseTempControl = document.getElementById('increaseTempControl'); + increaseTempControl.addEventListener('click', increaseTemp); + + const decreaseTempControl = document.getElementById('decreaseTempControl'); + decreaseTempControl.addEventListener('click', decreaseTemp); + + updateSky(); + const skySelect = document.getElementById('skySelect'); + skySelect.addEventListener('change', updateSky); + + changeCityName(); + const cityNameInput = document.getElementById('cityNameInput'); + cityNameInput.addEventListener('input', changeCityName); + + const cityNameResetBtn = document.getElementById('cityNameReset'); + cityNameResetBtn.addEventListener('click', resetCityName); +}; + +document.addEventListener('DOMContentLoaded', registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..7da8a0a3a 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,152 @@ +h2 { + margin: 0 auto 2rem auto; + } + + body { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; + font-family: "Rubik", sans-serif; + font-size: 18px; + background-color: #1b69f9; + margin: 2rem; + } + + .header__header { + color: white; + grid-column: span 3; + display: flex; + align-items: center; + margin: 2rem auto 3rem 0; + } + + .header__header > h1 { + margin-right: 2rem; + 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: white; + } + + .temperature__section { + grid-row: 2; + } + + .sky__section { + grid-row: 3; + } + + .city-name__section { + grid-row: 4; + } + + .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: space-around; */ + /* justify-content: center; */ + } + + #tempValue { + font-size: 3rem; + margin-left: 1.5rem; + /* padding-right: 1rem; */ + /* margin-right: 1.5rem; */ + } + + .temperature__controls { + display: flex; + flex-direction: column; + align-items: center; + } + + .garden__section > h2 { + color: white; + } + + .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: 2em; + } + + .reset-btn { + border: 0; + background-color: #1655cc; + color: white; + border-radius: 8px; + padding: 1rem; + font-family: "Rubik", sans-serif; + } + + .red { + color: red; + } + + .orange { + color: orange; + } + + .yellow { + color: gold; + } + + .yellow-green { + color: yellowgreen; + } + + .green { + color: green; + } + + .teal { + color: teal; + } + + .cloudy { + background-color: lightgrey; + } + + .sunny { + background-color: rgb(221, 255, 255); + } + + .rainy { + background-color: lightblue; + } + + .snowy { + background-color: lightsteelblue; + } + \ No newline at end of file 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==