diff --git a/index.html b/index.html index e69de29bb..a08a56ea1 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + 🌈☀️Weather Report🌦❄️ + + + +
+

Weather Report

+
For the lovely city of + New York City
+
+ +
+

Temperature

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

Sky

+ +
+ +
+

City Name

+ + +
+ +
+

Weather Garden

+
+
☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️
+
🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷
+
+
+ + + + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..83034cf5c 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,105 @@ +let tempValue = 80; + +const updateSky = () => { + const changeSky = document.getElementById("skySelect").value; + const skyContainer = document.getElementById("sky"); + let sky = ""; + let skyColor = ""; + if (changeSky === "Cloudy") { + sky = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️"; + skyColor = "cloudy"; + } else if (changeSky === "Sunny") { + sky = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️"; + skyColor = "sunny"; + } else if (changeSky === "Rainy") { + sky = "🌧🌈☔🐱🐶💧☔🐱🐶🌧⚡️⛈🌧"; + skyColor = "rainy"; + } else if (changeSky === "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"); + headerCityName.textContent = inputName; +}; + +const resetCityName = () => { + const cityNameInput = document.getElementById("cityNameInput"); + cityNameInput.value = "New York City"; + updateCityName(); +}; + +const updateTempColors = (currentTemp) => { + const tempValueContainer = document.getElementById("tempValue"); + let color = "teal"; + if ( currentTemp >= 80) { + color = "red"; + } else if (currentTemp >= 70) { + color = "orange"; + } else if (currentTemp >= 60) { + color = "yellow"; + } else if (currentTemp >= 50) { + color = "green"; + } + tempValueContainer.classList = color; +} + +const updateGarden = (currentTemp) => { + const landscapeContainer = document.getElementById("landscape"); + let landscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + if ( currentTemp >= 80) { + landscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (currentTemp >= 70) { + landscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + } else if (currentTemp >= 60) { + landscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + } + landscapeContainer.textContent = landscape; +} + +const updateTemp = tempValue => { + const tempValueContainer = document.getElementById("tempValue"); + tempValueContainer.textContent = tempValue; + updateTempColors(tempValue); + updateGarden(tempValue); +} + +const increaseTemp = () => { + tempValue += 1; + updateTemp(tempValue); +}; + +const decreaseTemp = () => { + tempValue -= 1; + updateTemp(tempValue); +}; + +const registerEventHandlers = () => { + updateTemp(tempValue); + + 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); + + updateSky(); + const skySelect = document.getElementById("skySelect"); + skySelect.addEventListener("change", updateSky); +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + diff --git a/styles/index.css b/styles/index.css index e69de29bb..db13ce72f 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,150 @@ +html{ + background: url("https://wallpapercave.com/wp/wp5250055.jpg") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +body { + display: grid; + grid-template-columns: 1fr 3fr; + grid-template-rows: auto auto auto auto; + grid-gap: 1rem; + + font-family: "Arial", sans-serif; + font-size: 18px; + margin: 2rem; +} + +footer { + color: white; + font-size: 12px; + position: absolute; + bottom: 0; + left: 0; +} + +.header { + color: white; + grid-column: span 2; + display: flex; + align-items: center; + margin: 2rem auto 3rem 0; +} + +.header > h1 { + margin-right: 2rem; + font-size: 3em; +} + +.header_city-name { + font-style: italic; + font-size: 2rem; +} + +.temperature_section, +.sky_section, +.city_name_section { + border-radius: 8px; + padding: 1rem; + background-color: white; +} + +.temperature_section { + grid-row: 2; +} + +.sky_section { + grid-row: 3; +} + +.garden_section { + grid-row: 2 / span 3; + grid-column: 2; + text-align: center; + align-self: center; +} + +.temperature_content { + display: flex; + flex-direction: row; +} + +#tempValue { + font-size: 3rem; + margin-left: 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; +} + +.city-name_reset-btn { + border: 0; + background-color: rgb(220, 106, 193); + color: white; + border-radius: 8px; + padding: 1rem; + font-family: "Arial", 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: white; +} + +.rainy { + background-color: rgb(172, 210, 240); +} + +.snowy { + background-color: grey; +} \ No newline at end of file