diff --git a/index.html b/index.html index 68b320b9a..c988384e4 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,91 @@ Weather Report + - +
+

Weather Report

+
+

for the lovely city of

+
+
+
+
+
+
+
+
+

Temperature

+
+
+
+ +
+
+ +
+
+
+
+
+
+
+

Sky

+
+
+ +
+
+
+
+

City Name

+
+
+ + +
+
+
+
+
+

Weather Garden

+
+
+
+
+
+
+
+
+
+ - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..8601048ec 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,87 @@ +const tempDisplay = document.getElementById("temperatureDisplay"); +const skyDisplay = document.getElementById("topDisplay"); +const groundDisplay = document.getElementById("bottomDisplay"); +const cityInput = document.getElementById("mutableSubHeader"); +const bgDisplay = document.getElementById("gardenBackground"); + +//document.getElementById("myDiv").style.backgroundColor = "lightblue"; + +tempDisplay.textContent = 70; +skyDisplay.textContent = "☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️"; +groundDisplay.textContent ="🌱 🌱 🌱 🌱 🌱 🌱 🌱 🌱"; +cityInput.textContent = "My Hometown"; +bgDisplay.style.backgroundColor = "orange"; + +let temperature = 70; + +const registerEventHandlers = () => { + const upArrow = document.querySelector('#upArrow'); + const downArrow = document.querySelector('#downArrow'); + const selectWeather = document.querySelector('#dropdownButton'); + const citySubmission = document.querySelector('#hometownForm'); + + upArrow.addEventListener("click", increaseTemp); + downArrow.addEventListener("click", decreaseTemp); + selectWeather.addEventListener("change", skyStateSelect); + citySubmission.addEventListener("submit", changeCityName); +} + +const increaseTemp = () => { + temperature +=1; + tempDisplay.textContent = temperature; + mutableGround(temperature); +} + +const decreaseTemp = () => { + temperature -=1; + tempDisplay.textContent = temperature; + mutableGround(temperature); +} + +const mutableGround = (temperature) => { + groundDisplay.textContent = "🌱 🌱 🌱 🌱 🌱 🌱 🌱 🌱"; + bgDisplay.style.backgroundColor = "orange"; + if (temperature > 80) { + groundDisplay.textContent = "🌵 🌵 🌵 🌵 🌵 🌵 🌵"; + bgDisplay.style.backgroundColor = "red"; + } + if (temperature < 70) { + groundDisplay.textContent = "💧 💧 💧 💧 💧 💧 💧 💧 💧"; + bgDisplay.style.backgroundColor = "yellow"; + } + if (temperature < 60 ) { + bgDisplay.style.backgroundColor = "green"; + } + if (temperature < 50) { + groundDisplay.textContent = "🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️ 🏔️"; + bgDisplay.style.backgroundColor = "teal" + } +} + +const skyStateSelect = () => { + let select = document.getElementById('dropdownButton'); + let skyState = select.options[select.selectedIndex].value; + let weatherDisplay = "Weather Display" + if (skyState == "sunny") { + weatherDisplay = "☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️ ☀️" + }; + if (skyState == "cloudy") { + weatherDisplay ="☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️ ☁️" + }; + if (skyState == "snowy") { + weatherDisplay = "❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️" + }; + if (skyState =="rainy") { + weatherDisplay = "🌧 🌧 🌧 🌧 🌧 🌧 🌧" + } + skyDisplay.textContent = weatherDisplay; +} + +const changeCityName = (submission) => { + cityInput.textContent = document.getElementById("cityInput").value; + submission.preventDefault(); +} + +document.addEventListener("DOMContentLoaded", registerEventHandlers); + +//consider making sky/grass a dictionary to pull the key from \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..6f502ef93 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,66 @@ +body { + background-color: rgb(62, 62, 177); + font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif +} + +h1 { + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 3em; +} + +p { + font-size:1.2em; + color: lightblue; +} + +.widget * { + background-color: rgb(110, 107, 107); + width: 200px; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +main { + display: flex; + justify-content: space-around; +} + +#temperatureChanger { + padding: 15px; +} + +.arrowKeys * { + display: inline; +} + +#skyChanger { + padding: 15px; +} + +#hometownChanger { + padding: 15px; +} + +#gardenBackground { + background-color: green; + width: 500px; + height: 300px; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +.display { + display: flex; + justify-content: space-around; + font-size: xx-large; +} + +.header * { + display: inline-block; +} + +.subHeader { + display: inline-block; +} \ No newline at end of file