diff --git a/index.html b/index.html index e69de29bb..10f816bda 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,65 @@ + + + + + + Weather Report + + + +
+

Weather Report for Seattle

+
+
+
+
+

Current Temperature:

+ +

65 F

+ +
+
+


Sky View!

+

Change the sky view!

+ + +
+
+

Current City:

+
+ +
+ +
+
+
+
+

Landscape View

+
+

☁️☁️☁️☁️☁️☁️☁️☁️

+
+
+
+

🌲🪨🌳🌲🪨🌳🌲🪨🌳

+
+
+
+ + + + + + + + + + + + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..3430ff391 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,108 @@ +// TEMP +const changeTemp = (temp) => { + let tempColor = "yellow" + let garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖" + if (temp > 85) { + tempColor = "red"; + garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖"; + } else if (temp > 75) { + tempColor = "orange"; + garden = "⛲️⛵️🌤🌺🌳⛲️⛵️🌤🌺🌳"; + } else if (temp > 60){ + tempColor = "yellow"; + garden = "🌳🌲🌷☁️💨🌳🌲🌷☁️💨"; + } else if (temp > 50){ + tempColor = "green"; + garden = "☁️🌫🍂🌲🍃☁️🌫🍂🌲🍃"; + } else if (temp < 50){ + tempColor = "blue"; + garden = "🌬🍁❄️☃️🧥🌬🍁❄️☃️🧥"; + } + + const newGarden = document.querySelector("#garden-landscape"); + newGarden.textContent = garden + return tempColor +} + +const increaseTemp = () => { + const newTemp = document.querySelector("#temp"); + const newTempValue = parseFloat(newTemp.textContent) + 1; + tempColor = changeTemp(newTempValue); + newTemp.className = tempColor; + newTemp.textContent = String(newTempValue); +}; + +const decreaseTemp = () => { + const newTemp = document.querySelector("#temp"); + const newTempValue = parseFloat(newTemp.textContent) - 1; + tempColor = changeTemp(newTempValue); + newTemp.className = tempColor; + newTemp.textContent = String(newTempValue); + +}; + + +// SKY +const skyView = (option) => { + let currentSky = "☀️☀️☀️☀️☀️☀️" + if (option == "sunny") { + currentSky = "☀️☀️☀️☀️☀️☀️"; + } else if (option=="cloudy") { + currentSky = "☁️☁️☁️☁️☁️"; + } else if (option=="rainy") { + currentSky = "🌧🌧🌧🌧🌧"; + } else if (option=="snowy") { + currentSky = "🌨❄️🌨❄️🌨❄️"; + } + const changeSky = document.querySelector("#garden-sky"); + changeSky.textContent = currentSky +} + +const selectSky = () => { + const sky_selection = document.querySelector("#sky-dropdown") + skyView(sky_selection.value) +} + + +// CITY +const changeCity = (event) => { + let inputCity = document.querySelector("#city-name").value; + let mainHeading = document.getElementById("default-city"); + if (!inputCity == "") { + mainHeading.innerHTML = `Weather Report for: ${inputCity}`; + inputCity.value = ""; + } +}; + +const resetCity = (event) => { + let mainHeading = document.getElementById("default-city"); + mainHeading.innerHTML = "Weather Report for Seattle"; +}; + + +// EVENT HANDLERS +const registerEventHandlers = () => { + const upButton = document.querySelector("#tempUpButton"); + upButton.addEventListener("click", increaseTemp); + + const downButton = document.querySelector("#tempDownButton"); + downButton.addEventListener("click", decreaseTemp); + + const skySelector = document.querySelector("#sky-dropdown") + console.log(skySelector) + skySelector.addEventListener("change", selectSky) + + const updateCity = document.querySelector("#change-city") + updateCity.addEventListener("click", changeCity); + + const resetCityName = document.querySelector("#reset-city") + resetCityName.addEventListener("click", resetCity); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + + + + + + diff --git a/styles/index.css b/styles/index.css index e69de29bb..b41a0654f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,89 @@ +body { + color: rgb(252, 245, 243); + font-family: Gill Sans, sans-serif, Trebuchet MS, sans-serif; + height: 100vh; + text-align: center; + background: linear-gradient(#21265c,#cc5721); +} + +h1 { + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; + flex-wrap: nowrap; + font-size: 30px; + text-align: center; +} + +h2 { + color: rgb(238, 231, 231) +} + +.box-content { + display: flex; + flex-direction: row; + justify-content: center; +} + +#city-name { + color: rgb(238, 238, 245); + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; + flex-wrap: nowrap; + font-size: 25px; + text-align: center; +} + +.garden-box { + text-align: center; + width: 250px; + margin-top: 150px; + margin-left: 15px; + height: 300px; + border-radius: 14px; + padding: 10px; + box-sizing: border-box; + background-color: rgb(228, 184, 163); +} + +.left-boxes { + text-align: center; + width: 250px; + margin-bottom: 15px; + margin-right: 15px; + height: 200px; + border-radius: 14px; + padding: 10px; + box-sizing: border-box; + background-color: rgb(228, 184, 163); +} + +.section-container { + display: flex; + flex-direction: column; + +} + +.red { + color: rgb(133, 10, 10); +} + +.orange { + color: rgb(241, 111, 3) +} + +.yellow { + color: rgb(252, 218, 70); +} + +.green { + color: rgb(19, 184, 19) +} + +.blue { + color: rgb(8, 63, 182) +} +