diff --git a/index.html b/index.html index e69de29bb..79ce7f1aa 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,55 @@ + + + + + + + Document + + + +
+

Weather Report

+

🌈 For the lovely city of Gayville 🌈

+
+ +
+

Temperature

+

76

+ + +
+ +
+

Sky

+ +
+ +
+

City Name

+ + +
+ +
+

Weather Garden

+
+

🌧🌈⛈💧🌧💧⛈🌧🌧🌧💧🌈

+

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

+
+ + +
+ + + + + + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..ce7454755 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,97 @@ +//Temperature values elements that will change when clicked +const tempContainer = document.getElementById('temperature-value'); +const increaseButton = document.getElementById('increaseTemp'); +const decreaseButton = document.getElementById('decreaseTemp'); +const gardenWeather = document.querySelector('.garden-weather'); +const skyWeather = document.querySelector('.sky-weather'); +const skyType = document.getElementById('sky-type'); +const resetButton = document.getElementById('resetButton'); +const cityName = document.querySelector('.city'); +let cityInput = document.querySelector('.cityInput') + +const landscapeImage= { + summer: "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂", + spring: "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷", + fall: "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃", + winter: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲", +} +const skyImage = { + sunny: "☀️☁️ ☀️☁️ ☀️☁️ ☀️ ☁️ ☀️ ☁️☀️", + cloudy: "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️", + rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧", + snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨", +} + +const state = { + tempCount: 76, + currentLandscapeImage: landscapeImage.spring +}; +//increases and decrease tempereature with one click +const addTemperature = () => { + state.tempCount += 1; + tempContainer.textContent = `${state.tempCount}`; + changeTempTextColor(); +} +const decreaseTemperature = () => { + state.tempCount -= 1; + tempContainer.textContent = `${state.tempCount}`; + changeTempTextColor(); +} + +const changeTempTextColor = () => { + if(state.tempCount >= 80) { + tempContainer.className = 'red'; + gardenWeather.innerHTML = landscapeImage.summer; + } + if(state.tempCount <= 79 && state.tempCount > 70) { + tempContainer.className = 'orange'; + gardenWeather.innerHTML = landscapeImage.spring; + } + if(state.tempCount <= 69 && state.tempCount > 60) { + tempContainer.className = 'yellow'; + gardenWeather.innerHTML = landscapeImage.fall + } + if(state.tempCount <= 59 && state.tempCount > 50) tempContainer.className = 'green'; + if(state.tempCount <= 49) { + tempContainer.className = 'teal'; + gardenWeather.innerHTML = landscapeImage.winter + } + +} +// Change sky type +const changeSkyType = (event) => { + if(event.target.value === "Sunny") { + skyWeather.innerHTML = skyImage.sunny; + } + if(event.target.value === "Cloudy"){ + skyWeather.innerHTML = skyImage.cloudy; + } + if(event.target.value === "Rainy"){ + skyWeather.innerHTML = skyImage.rainy; + } + if(event.target.value === "Snowy"){ + skyWeather.innerHTML = skyImage.snowy; + } + +} + +// changes the city name +const changeCityName = (event) => { + cityName.innerHTML = event.target.value +} +// resets the cityname input +const resetCityName = (event) =>{ + console.log(cityInput.defaultValue) + cityInput = cityInput.defaultValue +} + +const registerEventHandlers = (event) => { + increaseButton.addEventListener("click", addTemperature); + decreaseButton.addEventListener("click", decreaseTemperature); + skyType.addEventListener("change", changeSkyType); + cityInput.addEventListener("input", changeCityName); + resetButton.addEventListener("click", resetCityName); + +}; + +document.addEventListener("DOMContentLoaded", registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..5b97ff221 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,39 @@ +/* Background blue: #324DF7 + +Sunny sky background: #D6FFFF, +Cloudy sky background: #C9C9C9 +Rainy sky background: #9FCFE0 +Snowy sky background: #A1B6D6 +Very cold number color: #256D6C +Cold number color: #1F7001 +Cool number color: #F4D10A +Warm number color: #F0940A +Hot number color: #EA0009 */ + + +body{ + padding: 2rem 2rem; + max-width: 100vw; +} + +.red{ + color: red; +} +.orange { + color: orange; +} +.yellow { + color: yellow; +} +.green { + color: green; +} +.teal { + color: teal; +} +.weather-container { + background-color: pink; + padding: 2rem; + max-width: 90%; + border-radius: .5rem ; +}