diff --git a/index.html b/index.html index 68b320b9a..982133cac 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,57 @@ Weather Report + +
+
+

Kristin's Weather Report

+

For the lovely city of ✨Seattle✨

+
+
+
+
+
+
+

Temperature

+
+

+
+
+ +
+
+
+
+

City Name

+ + +
+
+

Sky

+ + +
+
+

Weather Garden

+
+ +
+
+
+
+ + - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index e69de29bb..17791e1dd 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,104 @@ +const tempDegree = document.querySelector('#temperatureDegree'); +const landscape = document.querySelector('#landscape'); +const selectedSky = document.querySelector('#skyEmojis'); +const gardenBackground = document.querySelector('#weatherGardenContainer'); +const inputCity = document.querySelector('#inputCity'); +const displayCity = document.getElementById('cityNameDisplay'); +const resetButton = document.getElementById('resetCity'); + +const state = { + tempNumber: 80, + skyState: ' ☁️ ☁️ ☀️ ☁️ ☁️ ☀️ ☀️ ☀️ ☁️ ☀️☀️ ☀️ ☁️ ☀️', + gardenColor: '#D6FFFF', +}; + +// Temperature up and down buttons +const increaseTemperature = () => { + state.tempNumber += 1; + tempDegree.textContent = `${state.tempNumber}`; + changeTheme(); +}; + +const decreaseTemperature = () => { + state.tempNumber -= 1; + tempDegree.textContent = `${state.tempNumber}`; + changeTheme(); +}; + +//Landscape and weather garden background color +const changeTheme = () => { + // if different ranges, change color + if (state.tempNumber >= 80) { + tempDegree.style.color = '#EA0009'; + landscape.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂🌵__🐍_🏜_🦂'; + } else if (state.tempNumber >= 70 && state.tempNumber <= 79) { + tempDegree.style.color = '#F0940A'; + landscape.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷🌿_☘️🌱_🌻🌷'; + } else if (state.tempNumber >= 60 && state.tempNumber <= 69) { + tempDegree.style.color = '#F4D10A'; + landscape.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃__🛤_🌾🌾🌾_🍃'; + } else if (state.tempNumber >= 50 && state.tempNumber <= 59) { + tempDegree.style.color = '#1F7001'; + landscape.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲🍂🌲🍁🌲🌲⛄️🍂'; + } else { + tempDegree.style.color = '#256D6C'; + landscape.textContent = + '⛄️⛄️🌲⛄️⛄️🌲⛄️⛄️🌲⛄️🌲⛄️🌲⛄️🌲⛄️⛄️🌲⛄️🌲⛄️'; + } +}; + +//City name reset button +const updateCity = (event) => { + displayCity.textContent = event.target.value; +}; + +//reset City +const resetCity = (event) => { + event.target.value = 'Seattle'; + displayCity.textContent = event.target.value; +}; + +//register event handlers +const registerEventHandlers = () => { + //up button + const tempUpButton = document.querySelector('#tempButtonUp'); + tempUpButton.addEventListener('click', increaseTemperature); + //down button + const tempDownButton = document.querySelector('#tempButtonDown'); + tempDownButton.addEventListener('click', decreaseTemperature); + + //City input + inputCity.addEventListener('change', updateCity); + + //reset city + resetButton.addEventListener('click', resetCity); + + //wave 3: onchangehandler + const skyDropdown = document.querySelector('.sky'); + skyDropdown.addEventListener('change', (event) => { + if (event.target.value === 'sunny') { + selectedSky.textContent = ' ☁️ ☁️ ☀️ ☁️ ☁️ ☀️ ☀️ ☀️ ☁️ ☀️☀️ ☀️ ☁️ ☀️'; + gardenBackground.style.backgroundColor = '#D6FFFF'; + } else if (event.target.value === 'cloudy') { + selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️🌤 ☁️ ☁️☁️'; + gardenBackground.style.backgroundColor = '#C9C9C9'; + } else if (event.target.value === 'rainy') { + selectedSky.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧🌧🌈⛈🌧'; + gardenBackground.style.backgroundColor = '#9FCFE0'; + } else if (event.target.value === 'snowy') { + selectedSky.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨🌨❄️❄️🌨🌨'; + gardenBackground.style.backgroundColor = '#A1B6D6'; + } + }); +}; + +const defaultSetup = () => { + tempDegree.textContent = `${state.tempNumber}`; + selectedSky.textContent = `${state.skyState}`; + gardenBackground.style.backgroundColor = `${state.gardenColor}`; + registerEventHandlers(); + changeTheme(); +}; +//execute registerEventHandlers +//runs code once DOM is ready. DOM isn't fully loaded, eventhandlers might not exist yet. Ex: buttoon on line 35 +document.addEventListener('DOMContentLoaded', defaultSetup); diff --git a/styles/index.css b/styles/index.css index e69de29bb..30ea59615 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,123 @@ +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Cinzel+Decorative:wght@700&family=Goudy+Bookletter+1911&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Bevan&family=Bungee+Shade&family=Cinzel+Decorative:wght@700&family=Galada&family=Goudy+Bookletter+1911&family=Knewave&family=Pompiere&display=swap'); + +/* Arrows */ +.arrow { + border: solid black; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + } + + .up { + transform: rotate(-135deg); + -webkit-transform: rotate(-135deg); + } + + .down { + transform: rotate(45deg); + -webkit-transform: rotate(45deg); + } + + /* Text Styles */ + + #cityNameDisplay { + color:mediumvioletred; + font-weight: 900; + } + + .title { + font-family: 'Cinzel Decorative', cursive; + color: white; + font-size: 2.1em; + } + + #subtitle { + font-family: 'Goudy Bookletter 1911', serif; + color: rgb(55, 46, 46); + font-size: 1.5em; + } + + .item-titles { + font-family: 'Galada', cursive; + color:rgb(85, 71, 71); + font-size: 1.7em; + } + + header { + text-align: center; + } + + .footer { + text-align: center; + font-family: 'Pompiere', cursive; + font-weight: bold; + } + + body { + background-color: #f6f0c4; + background-image: linear-gradient(315deg, #f6f0c4 0%, #d99ec9 74%); + } + + /* Layout */ + + .content-wrapper { + margin: 5px; + } + + .temp-wrapper { + display: flex; + flex-direction: row; + justify-content: space-evenly; + } + + .button-wrapper { + display: flex; + flex-direction: column; + justify-content: space-around; + } + + .items-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-content: center; + padding: 20px; + margin: 5px; + } + + .item-wrapper { + position: relative; + text-align: center; + outline: .5px solid grey; + padding: 5px; + margin: 5px 15px; + border-radius: 10%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + } + + #weatherGardenContainer { + grid-column-start: 1; + grid-column-end: 4; + width: 60%; + border-radius: 10%; + margin: 5px auto; + } + + #skyEmojis { + margin-bottom: 40px; + font-size: 1.5em; + } + + #landscape { + margin-top: 10px; + font-size: 1.5em; + } + + #temperatureDegree { + font-size: 2em; + margin-bottom: 0 auto; + } + +