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

WEATHER REPORT

+ Weather for + + + +
+

SKY

+

Hey, what type of sky is happening out there?

+ +
+ + +
+

CITY NAME

+ + +
+ + +
+

WEATHER GARDEN

+
+
+
+
+
+ +
+

TEMPERATURE

+ + 70 + +
+
+ + + + + \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..a14237bca 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,89 @@ + +const state = { + temperature : 70 +}; +//function to update garden emojis +const gardenWeatherEmojis = () => { + console.log("gardenWeatherEmojis called") + const gardenLandscape = document.querySelector("#landscape"); + + if (state.temperature >= 80) { + gardenLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; + } else if (state.temperature < 80 && state.temperature >=70) { + gardenLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; + } else if (state.temperature < 70 && state.temperature >= 60) { + gardenLandscape.textContent= "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; + } else if (state.temperature < 60) { + gardenLandscape.textContent= "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; + } +}; + +const updateSky = () => { + console.log("updateSkyCalled") + // gardenSky.value allows us access what the user has chosen in dropdown menu + const gardenSky = document.querySelector("#skySelect"); + let sky = ''; + // skyColor values need to coordinate with CSS file for color values + let skyColor = ''; + // gardenSky.value allows us access what the user has chosen in dropdown menu + if (gardenSky.value === "sun"){ + sky = '🔥🔥🔥🔥☀🔥🔥🔥☀🔥🔥🔥🔥'; + skyColor = 'sunny'; + } else if (gardenSky.value === "clouds"){ + sky = '🌥🌥🌥🌥 🌥🌥🌥🌥 🌥🌥🌥🌥'; + skyColor = "cloudy"; + } else if (gardenSky.value === "clear") { + sky = '🌎🌎🌎 🌎🌎🌎 🌎🌎🌎 🌎🌎🌎'; + skyColor = "clear"; + } else if (gardenSky.value === 'rain') { + sky = "🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊"; + skyColor = "rainy"; + } + console.log(gardenSky,"gardenSky value") + const emojiPlacement = document.querySelector("#emojiSky") + emojiPlacement.textContent = sky; +}; + + +// function to update id=temperature in tempContainer +const increaseTemp = () => { + console.log("increaseTemp called") + const temperature = document.querySelector("#temperature") + state.temperature += 1; + temperature.textContent = `${state.temperature}` + gardenWeatherEmojis() +}; + +// function to update id=temperature in tempContainer +const decreaseTemp = () => { + console.log("decreaseTemp called") + const temperature = document.querySelector("#temperature") + state.temperature -= 1; + temperature.textContent = `${state.temperature}` + gardenWeatherEmojis() +}; +// not working +// function to update emojis in weatherGardenContainer by id=landscape + + + + +//function that registers all event handlers when called +const registerEventHandlers = () => { + console.log("registerEventHandlers called") + const increaseTempButton = document.querySelector("#increaseTemp"); + increaseTempButton.addEventListener("click",increaseTemp); + + const decreaseTempButton = document.querySelector("#decreaseTemp"); + decreaseTempButton.addEventListener("click", decreaseTemp); + + const updateSkyDropDown = document.querySelector("#skySelect") + updateSkyDropDown.addEventListener("change",updateSky) + + + // updateSky() + // const skySelect = document.querySelector('#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..c6d2bea28 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,40 @@ +h2 { + color:rgb(60, 115, 160) +} +h1 { + font-weight: 600; + color:rgba(28, 53, 106, 0.92) +} +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: #bce4eb; + margin: 2rem; +} +.tempContainer, +.skyContainer, +.cityNameContainer { + + border-radius: 8px; + padding: 2rem; + background-color: rgb(242, 205, 103); +} +.mainHeader { + color: rgb(216, 76, 76); + grid-column: span 3; + display: flex; + align-items: center; + margin: 2rem auto 3rem 0; + +} + +.mainHeader > h1 { + margin-right: 2rem; + font-size: 3em; +} + \ No newline at end of file