From d2c33719b9c47a3e3a19e6eb283a03ad511d0cb3 Mon Sep 17 00:00:00 2001 From: Rebeca Date: Wed, 8 Dec 2021 17:54:09 -0800 Subject: [PATCH 1/4] html wave 1 --- index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++ scripts/index.js | 6 ++++++ styles/index.css | 10 ++++++++++ 3 files changed, 63 insertions(+) diff --git a/index.html b/index.html index e69de29bb..97d4dd21a 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + + Document + + +
+

Weather Report

+

🌈 For the lovely city of Gayville 🌈

+
+ +
+

Temperature

+

76

+ + +
+ +
+

Sky

+ +
+ +
+

City Name

+ + +
+ +

Weather Garden

+

Landscape Box Element

+
+ + + + + + + diff --git a/scripts/index.js b/scripts/index.js index e69de29bb..586cccc4a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -0,0 +1,6 @@ +const increaseTemp = () => { + const newTemp = document.createElement("span"); + const tempContainer = document.querySelector("#tempContainer"); + newTemp.textContent = " 🌡"; + tempContainer.appendChild(newTemp); +}; \ No newline at end of file diff --git a/styles/index.css b/styles/index.css index e69de29bb..3ff1ff877 100644 --- a/styles/index.css +++ b/styles/index.css @@ -0,0 +1,10 @@ +/* Background blue: #324DF7 +Sunny sky background: #D6FFFF +Cloudy sky background: #C9C9C9 +Rainy sky background: #9FCFE0 +Snowy sky background: #A1B6D6 +Very cold number color: #256D6C +Cold number color: #1F7001 +Cool number color: #F4D10A +Warm number color: #F0940A +Hot number color: #EA0009 */ \ No newline at end of file From 97b87f713e91888a9cf41d5d1470c1e28d378827 Mon Sep 17 00:00:00 2001 From: Rebeca Date: Thu, 9 Dec 2021 14:09:10 -0800 Subject: [PATCH 2/4] wave 2 increment button --- index.html | 1 + scripts/index.js | 34 ++++++++++++++++++++++++++++------ 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 97d4dd21a..78484fb28 100644 --- a/index.html +++ b/index.html @@ -40,6 +40,7 @@

Landscape Box Element

+ diff --git a/scripts/index.js b/scripts/index.js index 586cccc4a..917a90673 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,6 +1,28 @@ -const increaseTemp = () => { - const newTemp = document.createElement("span"); - const tempContainer = document.querySelector("#tempContainer"); - newTemp.textContent = " 🌡"; - tempContainer.appendChild(newTemp); -}; \ No newline at end of file +//Temperature values elements that will change when clicked +const tempContainer = document.getElementById('temperature-value'); +const increaseButton = document.getElementById('increaseTemp'); +const decreaseButton = document.getElementById('decreaseTemp'); + +const state = { + tempCount: 76, + skyColor: "#324DF7", +}; +//increases and decrease tempereature with one click +const addTemperature = () => { + state.tempCount += 1; + tempContainer.textContent = `${state.tempCount}`; +} +const decreaseTemperature = () => { + state.tempCount -= 1; + tempContainer.textContent = `${state.tempCount}`; +} + +const registerEventHandlers = (event) => { + // const increaseButton = document.querySelector("#increaseButton"); + increaseButton.addEventListener("click", addTemperature); + decreaseButton.addEventListener("click", decreaseTemperature); +}; + + + +document.addEventListener("DOMContentLoaded", registerEventHandlers); From 589eea63b4833de92c8f3be7aa7d23c6f6ad963a Mon Sep 17 00:00:00 2001 From: Rebeca Date: Sun, 12 Dec 2021 21:46:36 -0800 Subject: [PATCH 3/4] wave 3 complete --- index.html | 18 ++++++++--- scripts/index.js | 79 +++++++++++++++++++++++++++++++++++++++++++++++- styles/index.css | 32 ++++++++++++++++++-- 3 files changed, 121 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 78484fb28..136455bce 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,13 @@ Document +

Weather Report

-

🌈 For the lovely city of Gayville 🌈

+

🌈 For the lovely city of Gayville 🌈

+
@@ -31,12 +33,18 @@

Sky

City Name

- - + +
-

Weather Garden

-

Landscape Box Element

+
+

Weather Garden

+
+

🌧🌈⛈💧🌧💧⛈🌧🌧🌧💧🌈

+

🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷

+
+ +
diff --git a/scripts/index.js b/scripts/index.js index 917a90673..8e5a48d1a 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -2,25 +2,102 @@ const tempContainer = document.getElementById('temperature-value'); const increaseButton = document.getElementById('increaseTemp'); const decreaseButton = document.getElementById('decreaseTemp'); +const gardenWeather = document.querySelector('.garden-weather'); +const skyWeather = document.querySelector('.sky-weather'); +const skyType = document.getElementById('sky-type'); +const resetButton = document.getElementById('resetButton'); +const cityName = document.querySelector('.city'); +const cityInput = document.querySelector('.cityInput') + +const landscapeImage= { + summer: "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂", + spring: "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷", + fall: "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃", + winter: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲", +} +const skyImage = { + sunny: "☀️☁️ ☀️☁️ ☀️☁️ ☀️ ☁️ ☀️ ☁️☀️", + cloudy: "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️", + rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧", + snowy: "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨", +} const state = { tempCount: 76, - skyColor: "#324DF7", + currentLandscapeImage: landscapeImage.spring }; //increases and decrease tempereature with one click const addTemperature = () => { state.tempCount += 1; tempContainer.textContent = `${state.tempCount}`; + changeTempTextColor(); } const decreaseTemperature = () => { state.tempCount -= 1; tempContainer.textContent = `${state.tempCount}`; + changeTempTextColor(); +} + +const changeTempTextColor = () => { + if(state.tempCount >= 80) { + tempContainer.className = 'red'; + gardenWeather.innerHTML = landscapeImage.summer; + } + if(state.tempCount <= 79 && state.tempCount > 70) { + tempContainer.className = 'orange'; + gardenWeather.innerHTML = landscapeImage.spring; + } + if(state.tempCount <= 69 && state.tempCount > 60) { + tempContainer.className = 'yellow'; + gardenWeather.innerHTML = landscapeImage.fall + } + if(state.tempCount <= 59 && state.tempCount > 50) tempContainer.className = 'green'; + if(state.tempCount <= 49) { + tempContainer.className = 'teal'; + gardenWeather.innerHTML = landscapeImage.winter + } + +} +// Change sky type +const changeSkyType = (event) => { + console.log(event.target.value) + if(event.target.value === "Sunny") { + skyWeather.innerHTML = skyImage.sunny; + } + if(event.target.value === "Cloudy"){ + skyWeather.innerHTML = skyImage.cloudy; + } + if(event.target.value === "Rainy"){ + skyWeather.innerHTML = skyImage.rainy; + } + if(event.target.value === "Snowy"){ + skyWeather.innerHTML = skyImage.snowy; + } + +} + +// changes the city name +const changeCityName = (event) => { + cityName.innerHTML = event.target.value +} +// resets the cityname inputgit + +const resetCityName = (event) =>{ + console.log(event.target.value) + cityInput = cityInput + } const registerEventHandlers = (event) => { // const increaseButton = document.querySelector("#increaseButton"); increaseButton.addEventListener("click", addTemperature); decreaseButton.addEventListener("click", decreaseTemperature); + skyType.addEventListener("change", changeSkyType); + cityInput.addEventListener("input", changeCityName); + resetButton.addEventListener("click", resetCityName(event){ + event.preventDefault() + }) + }; diff --git a/styles/index.css b/styles/index.css index 3ff1ff877..bbf2427b7 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,5 +1,6 @@ /* Background blue: #324DF7 -Sunny sky background: #D6FFFF + +Sunny sky background: #D6FFFF, Cloudy sky background: #C9C9C9 Rainy sky background: #9FCFE0 Snowy sky background: #A1B6D6 @@ -7,4 +8,31 @@ Very cold number color: #256D6C Cold number color: #1F7001 Cool number color: #F4D10A Warm number color: #F0940A -Hot number color: #EA0009 */ \ No newline at end of file +Hot number color: #EA0009 */ + +body{ + padding: 2rem 2rem; + max-width: 100vw; +} + +.red{ + color: red; +} +.orange { + color: orange; +} +.yellow { + color: yellow; +} +.green { + color: green; +} +.teal { + color: teal; +} +.weather-container { + background-color: pink; + padding: 2rem; + max-width: 90%; + border-radius: .5rem ; +} From f39659366829b56a29d4cb57357e9eb2d27c5b95 Mon Sep 17 00:00:00 2001 From: Rebeca Date: Sun, 12 Dec 2021 22:50:55 -0800 Subject: [PATCH 4/4] wave 4 complete half of 5 --- index.html | 3 +-- scripts/index.js | 18 +++++------------- styles/index.css | 1 + 3 files changed, 7 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 136455bce..79ce7f1aa 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@

Weather Report

🌈 For the lovely city of Gayville 🌈

-
@@ -34,7 +33,7 @@

Sky

City Name

- +
diff --git a/scripts/index.js b/scripts/index.js index 8e5a48d1a..ce7454755 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -7,7 +7,7 @@ const skyWeather = document.querySelector('.sky-weather'); const skyType = document.getElementById('sky-type'); const resetButton = document.getElementById('resetButton'); const cityName = document.querySelector('.city'); -const cityInput = document.querySelector('.cityInput') +let cityInput = document.querySelector('.cityInput') const landscapeImage= { summer: "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂", @@ -60,7 +60,6 @@ const changeTempTextColor = () => { } // Change sky type const changeSkyType = (event) => { - console.log(event.target.value) if(event.target.value === "Sunny") { skyWeather.innerHTML = skyImage.sunny; } @@ -80,26 +79,19 @@ const changeSkyType = (event) => { const changeCityName = (event) => { cityName.innerHTML = event.target.value } -// resets the cityname inputgit - +// resets the cityname input const resetCityName = (event) =>{ - console.log(event.target.value) - cityInput = cityInput - + console.log(cityInput.defaultValue) + cityInput = cityInput.defaultValue } const registerEventHandlers = (event) => { - // const increaseButton = document.querySelector("#increaseButton"); increaseButton.addEventListener("click", addTemperature); decreaseButton.addEventListener("click", decreaseTemperature); skyType.addEventListener("change", changeSkyType); cityInput.addEventListener("input", changeCityName); - resetButton.addEventListener("click", resetCityName(event){ - event.preventDefault() - }) + resetButton.addEventListener("click", resetCityName); }; - - document.addEventListener("DOMContentLoaded", registerEventHandlers); diff --git a/styles/index.css b/styles/index.css index bbf2427b7..5b97ff221 100644 --- a/styles/index.css +++ b/styles/index.css @@ -10,6 +10,7 @@ Cool number color: #F4D10A Warm number color: #F0940A Hot number color: #EA0009 */ + body{ padding: 2rem 2rem; max-width: 100vw;