diff --git a/index.html b/index.html index 68b320b9a..74629b945 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,46 @@ Weather Report + +

โ˜€๏ธ๐ŸŒง โ„๏ธ Weather Report โ„๏ธ ๐ŸŒงโ˜€๏ธ

+
+ + +
+ + + +

The sky is...

+
+ +
+ + +

The Weather is...

+
+ + +
+ + +

+ +
โ—๏ธ PENDING SKY DATA โ—๏ธ
+ +
โ—๏ธ PENDING WEATHER DATA โ—๏ธ
+
+ + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index e69de29bb..0ee975410 100644 --- a/src/index.js +++ b/src/index.js @@ -0,0 +1,80 @@ +//----------City ELEMENT +const cityChange = () => { + document.getElementById('display').innerHTML = "Today in ... " + + document.getElementById("cityName").value; +} + +// function resetData(){ +// document.getElementById("cityName").reset(); +// } +const resetCity = () => { + document.getElementById('display').innerHTML = "Please Input City"; +} + +//----------Sky ELEMENT +const changeSky = () => { + const skyImage = document.getElementById("skyChoice").value; + document.getElementById("skyContainer").innerHTML = skyImage; +} + +//----------TEMPERATURE ELEMENTS +//Temp Adjustment Features +const tempState = { + tempCount: 0 +}; + +const newTemp = document.createElement("span"); + +//function to change the color & image based on tempState.tempCount +const changeColorByTemp = () => { + if (tempState.tempCount >= 32) { + tempCount.style.color = "brown"; + newTemp.textContent = "๐Ÿœ ๐Ÿœ ๐Ÿœ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿฆ‚ ๐ŸŒต ๐ŸŒต ๐Ÿœ ๐Ÿœ ๐Ÿœ" + } else if (tempState.tempCount >= 24){ + tempCount.style.color = "orange"; + newTemp.textContent = "๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹ ๐Ÿ ๐Ÿ ๐Ÿ›ซ ๐Ÿ ๐Ÿ ๐Ÿ›ฌ ๐Ÿ ๐Ÿ ๐ŸŒ‹ ๐ŸŒ‹ ๐ŸŒ‹" + } else if (tempState.tempCount >= 18){ + tempCount.style.color = "forestgreen"; + newTemp.textContent = "โ›ฐ โ›ฐ โ›ฐ ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ ๐Ÿก ๐ŸŒณ ๐ŸŒณ โ›ฐ โ›ฐ โ›ฐ" + } else if (tempState.tempCount >= 8){ + tempCount.style.color = "maroon"; + newTemp.textContent = "๐Ÿ” ๐Ÿ” ๐Ÿ” ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ  ๐ŸŒฒ ๐ŸŒฒ ๐Ÿ” ๐Ÿ” ๐Ÿ” " + } else if (tempState.tempCount >= 0) { + tempCount.style.color = "dodgerblue"; + newTemp.textContent = "๐Ÿ—ป ๐Ÿ—ป ๐Ÿ—ป โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ˜ โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ˜ โ˜ƒ๏ธ โ˜ƒ๏ธ ๐Ÿ—ป ๐Ÿ—ป ๐Ÿ—ป" + }else { + tempCount.style.color = "rebeccapurple"; + newTemp.textContent = "๐Ÿปโ€โ„๏ธ TOO ๐Ÿง COLD ๐Ÿฅถ FOR ๐Ÿง PEOPLE ๐Ÿปโ€โ„๏ธ" + }; +} + +const updateTempCount = () => { + const tempCountElement = document.querySelector("#tempCount"); + tempCountElement.textContent = `The Temperature is: ${tempState.tempCount} \xB0C` +}; + +//Tempt goes up +const addTempButton = document.querySelector("#addTempButton"); + +const addTemp = () => { + const tempContainer = document.querySelector("#tempContainer"); + tempState.tempCount +=1; + changeColorByTemp(); + tempContainer.appendChild(newTemp); + updateTempCount(); +}; + +//Tempt goes down +const subTempButton = document.querySelector("#subTempButton"); + +const subTemp = () => { + const newTemp = document.createElement("span"); + const tempContainer = document.querySelector("#tempContainer"); + tempState.tempCount-=1; + changeColorByTemp(); + updateTempCount(); +}; +//Temp Event Listeners +addTempButton.addEventListener('click', addTemp) +subTempButton.addEventListener('click', subTemp) + diff --git a/styles/index.css b/styles/index.css index e69de29bb..61565bb8d 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,52 @@ +body { + background: seashell; + text-align: center; + } +h1 { + display: flexbox; + text-align: center; +} + +button { + font-size: 16px; + margin: 10px; + display: flex; + flex-direction: row; + background-color: black; + font-weight: 500; + justify-content: center; + +} + +input { + margin: 10px; +} +section { + display: flex; + flex-direction: row; + justify-content: center; +} +div { + display: flex; + flex-direction: row; + justify-content: center; +} + +.warmer { + color: brown; + ; +} +.colder { + color: dodgerblue;; +} + +.sky { + color: whitesmoke +} + +.result{ + font-size: 40px; +} +.padded { + padding: 30px; +} \ No newline at end of file