Ada-C15 · rebecamuniz · Dec 9, 2021 · Dec 9, 2021 · Dec 13, 2021 · Dec 13, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href= "styles/index.css"/>
+</head>
+<body class="parent-side-container">
+    <header> 
+        <h1> Weather Report </h1>
+        <h2> 🌈 For the lovely city of <span class="city"> Gayville </span> 🌈 </h2>
+    </header>
+
+    <section class = "temperature-side-container" action="#"> 
+        <h3> Temperature </h3>
+        <p id = "temperature-value"> 76 </p>  
-        <p id = "temperature-value"> 76 </p>  
+        <p id="temperature-value"> 76 </p>  
-        <p id = "temperature-value"> 76 </p>  
+        <p id="temperature-value"> 76 </p>  
+        <button id="increaseTemp">⬆️ </button> 
+        <button id="decreaseTemp"> ⬇️ </button> 
+    </section> 
+
+    <form class= "sky-side-container" action= "#"> 
+        <h3> Sky </h3>
+        <select id="sky-type" name="sky">
+            <option value="Rainy">Rainy</option>
+            <option value="Sunny">Sunny</option>
+            <option value="Snowy">Snowy</option>
+            <option value="Cloudy">Cloudy</option>
+        </select>
+    </form> 
+
+    <form class= "city-side-container" action= "#" > 
+        <h3> City Name </h3>
+        <input type="text" class="cityInput" name="city" placeholder="What's your hometown?" />
+        <button id="resetButton" type="button"> Reset </button> 
+    </form>
+
+    <section> 
+        <h3> Weather Garden </h3> 
+        <div class="weather-container">  
+            <p class="sky-weather"> 🌧🌈⛈💧🌧💧⛈🌧🌧🌧💧🌈</p>
+            <p class="garden-weather"> 🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷 </p>
+        </div> 
+
+
+    </section>
+
+    <footer> </footer>
+    <script src="scripts/index.js"></script>
+</body>
+
+</html>
+
+
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,97 @@
+//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 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');
+let cityInput = document.querySelector('.cityInput')
+
+const landscapeImage= {
+  summer:	"🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂",
+  spring: "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷",
+  fall:	"🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃",
+  winter: "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲",
+}
+const skyImage = {
+  sunny: "☀️☁️ ☀️☁️ ☀️☁️ ☀️ ☁️ ☀️ ☁️☀️",
+  cloudy:	"☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️",
+  rainy: "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧",
+  snowy: 	"🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨",
+}
+
+const state = {
+  tempCount: 76,
+  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) => {
+  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 input
+const resetCityName = (event) =>{
+  console.log(cityInput.defaultValue)
+  cityInput = cityInput.defaultValue
+}
+
+const registerEventHandlers = (event) => {
+  increaseButton.addEventListener("click", addTemperature);
+  decreaseButton.addEventListener("click", decreaseTemperature);
+  skyType.addEventListener("change", changeSkyType);
+  cityInput.addEventListener("input", changeCityName);
+  resetButton.addEventListener("click", resetCityName);
+
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,39 @@
+/* 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 */
+
+
+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 ; 
+}