diff --git a/index.html b/index.html index 68b320b9a..c0d5141e3 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,61 @@ Weather Report + - +
+
Weather Report    + For the lovely city of ✨city✨
+ +
+
+
+
+ +
+
+
+ +
+ +
+ + + +
+ +
+
+

Weather Garden

+
+

I will display the sky

+

I will display seasonal creatures

+
+ +
+ + + +
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..f550ea0e3 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,90 @@ +const tempValue = document.getElementById('temp-value'); +tempValue.className = 'special'; +tempValue.textContent = 71; +const skyEmojis = document.querySelector('#sky-emoji'); +const plantEmoji = document.querySelector('#plant-emoji'); +const landBackground = document.querySelector('#emojis-container'); +plantEmoji.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; +skyEmojis.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'; +landBackground.className = 'sunny-color'; +document.getElementById('city').value = 'Enter your city'; +let initialTempValue = 71; + +// create event handler + +const changingTemps = (value) => { + if (value >= 80) { + tempValue.className = 'red'; + plantEmoji.textContent = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂'; + } else if (value < 80 && value >= 70) { + tempValue.className = 'orange'; + plantEmoji.textContent = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷'; + } else if (value < 70 && value >= 60) { + tempValue.className = 'yellow'; + plantEmoji.textContent = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃'; + } else if (value < 60 && value >= 50) { + tempValue.className = 'green'; + plantEmoji.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } else { + tempValue.className = 'teal'; + plantEmoji.textContent = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲'; + } +}; + +const increaseTemps = () => { + initialTempValue += 1; + tempValue.textContent = initialTempValue; + changingTemps(initialTempValue); +}; + +const decreaseTemps = () => { + initialTempValue -= 1; + tempValue.textContent = initialTempValue; + changingTemps(initialTempValue); +}; + +const changeSkyLandscape = (skyStatus) => { + if (skyStatus === 'sunny') { + skyEmojis.textContent = '☁️ ☁️ ☁️ ☀️ ☁️ ☁️'; + landBackground.className = 'sunny-color'; + } else if (skyStatus === 'cloudy') { + skyEmojis.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️'; + landBackground.className = 'cloudy-color'; + } else if (skyStatus === 'rainy') { + skyEmojis.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧'; + landBackground.className = 'rainy-color'; + } else if (skyStatus === 'snowy') { + skyEmojis.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨'; + landBackground.className = 'snowy-color'; + } +}; + +const changeToDefault = () => { + document.getElementById('city').value = 'Enter your city'; +}; +const changeCityName = (changeCity) => { + const city = document.querySelector('.dynamic'); + city.textContent = changeCity; +}; +//this is registering the event handler +const registerHandlers = () => { + const upArrow = document.getElementById('up-arrow'); + const downArrow = document.getElementById('down-arrow'); + upArrow.addEventListener('click', increaseTemps); + downArrow.addEventListener('click', decreaseTemps); + + const selectElement = document.querySelector('#sky-options'); + selectElement.addEventListener('change', (event) => { + changeSkyLandscape(event.target.value); + }); + + const cityName = document.getElementById('city'); + cityName.addEventListener('change', (event) => { + changeCityName(event.target.value); + }); + + const resetButton = document.getElementById('reset'); + resetButton.addEventListener('click', changeToDefault); +}; + +document.addEventListener('DOMContentLoaded', registerHandlers); diff --git a/styles/index.css b/styles/index.css index e69de29bb..e830af766 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,153 @@ +body { + background-color: #324DF7; +} + +#selectbutton +{ +cursor:pointer; +} + +#headers { + color: white; +} +.bigger { + font-size:1.5em; +} + .small { + font-size: 75%; +} + +.dynamic { + font-style: italic; + font-size: 1em; + +} +#headers { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + margin-top : 30px; + +} +#whole-body { + display: flex; + flex-wrap: column; + flex-direction: row; + justify-content: space-evenly; +} + +#landscape{ + width: 30vw; + height: 30vh; + /* border:violet 2px solid; */ + margin-top: 100px;; + padding: 20px; +} +#weather-garden-title{ + + color: white; +} + +#emojis-container{ +border-radius: 10px; +border: 1px solid beige; +/* border:hidden; */ + +} + +p { + color: white; +} +#sky-emoji{ +padding: 20px; +margin-bottom: 40px; +} +#plant-emoji{ +padding:20px; +} +#three-boxes { + display : flex; + flex-direction: column; + align-content:center; + width: 30vw; + justify-content: space-between; + justify-self: center; + justify-items: center; + margin-top: 50px; + margin-left: 10px; +} + +#temp, #sky, #city-name { + height:20vh; + width:30vw; + background-color: white; + margin-bottom: 15px; + margin-left: 5px; + border-radius: 7px; + padding: 15px; +} + +#sky-options { + margin-top: 15px; + margin-left: -3px; + +} + +#city { + margin-top:15px; +} +#buttons { + display: flex; + flex-direction:column; +} +#up-arrow, #down-arrow{ + width:2vw; + background-color: Transparent; + border: none; + cursor:pointer; +} +#button-tempvalue { + display:flex; +} + +#temp-value{ + margin-left: 15px; + margin-top: 10px; +} + +.red { + color: red; +} +.orange, .special { + color:orange; +} +.yellow { + color:#F4D10A; +} +.green { + color: green; +} +.teal { + color: #256D6C; +} +.sunny-color { + background-color: #D6FFFF; +} +.cloudy-color{ + background-color: #C9C9C9; +} +.rainy-color { + background-color: #9FCFE0; +} +.snowy-color { + background-color: #A1B6D6; +} +.footer { + position:fixed; + margin-bottom:0; + margin-right:0; +} + + +