Completes wave 02. Changes pics and temp color dynamically

index.html

@@ -30,11 +30,11 @@ <h1 class="h1-temp">Temperature in</h1>
             </div>
 
             <div class="temp-and-arrows">
-            <h1 id="temp">00</h1>
+            <h1 id="temp">70°</h1>
 
             <div class="temp-arrows">
-                <i class="fa-solid fa-arrow-up" id="arrow-up"></i>
-                <i class="fa-solid fa-arrow-down" id="arrow-down"></i>
+                <i class="fa-solid fa-arrow-up fa-xl" id="arrow-up" ></i>
+                <i class="fa-solid fa-arrow-down fa-xl" id="arrow-down"></i>
             </div>
         </div>
         <!-- </div> -->

src/index.js

@@ -1 +1,77 @@
 'use strict';
+
+const state = {
+  temp: 80,
+  tempColor: 'red',
+  tempBackground: 'url(../src/images/sunny.png)',
+};
+
+const temp = document.getElementById('temp');
+temp.textContent = state.temp + '°';
+temp.style.color = state.tempColor;
+
+const backColor = document.getElementsByTagName('main')[0];
+backColor.style.backgroundImage = state.tempBackground;
+
+const changetempColor = () => {
+  if (state.temp >= 80) {
+    state.tempColor = 'red';
+    temp.style.color = state.tempColor;
+  } else if (state.temp > 69 && state.temp < 80) {
+    state.tempColor = 'orange';
+    temp.style.color = state.tempColor;
+  } else if (state.temp < 70 && state.temp > 59) {
+    state.tempColor = 'yellow';
+    temp.style.color = state.tempColor;
+  } else if (state.temp < 60 && state.temp > 49) {
+    state.tempColor = 'green';
+    temp.style.color = state.tempColor;
+  } else if (state.temp < 50) {
+    state.tempColor = 'teal';
+    temp.style.color = state.tempColor;
+  }
+};
+
+const changeBackImg = () => {
+  if (state.temp >= 80) {
+    state.tempBackground = 'url(../src/images/sunny.png)';
+    backColor.style.backgroundImage = state.tempBackground;
+    backColor.style.color = 'black';
+  } else if (state.temp < 80 && state.temp > 69) {
+    state.tempBackground = 'url(../src/images/spring.png)';
+    backColor.style.backgroundImage = state.tempBackground;
+    backColor.style.color = 'white';
+  } else if (state.temp < 70 && state.temp > 59) {
+    state.tempBackground = 'url(../src/images/cool.png)';
+    backColor.style.backgroundImage = state.tempBackground;
+    backColor.style.color = 'white';
+  } else if (state.temp < 60) {
+    state.tempBackground = 'url(../src/images/snow.png)';
+    backColor.style.color = 'white';
+    backColor.style.backgroundImage = state.tempBackground;
+  }
+};
+
+const increaseTemp = () => {
+  state.temp++;
+  temp.textContent = `${state.temp}°`;
+  changetempColor();
+  changeBackImg();
+};
+
+const decreaseTemp = () => {
+  state.temp--;
+  temp.textContent = `${state.temp}°`;
+  changetempColor();
+  changeBackImg();
+};
+
+const registerEventHandlers = () => {
+  const upArrow = document.getElementById('arrow-up');
+  upArrow.addEventListener('click', increaseTemp);
+
+  const downArrow = document.getElementById('arrow-down');
+  downArrow.addEventListener('click', decreaseTemp);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);

styles/index.css

@@ -17,11 +17,13 @@ header{
 
 main{
     grid-area: 2/1/4/5;
-    background-color: blueviolet;
-    padding: 10% 0 5%;
+    padding: 10% 0;
+    background-color: grey;
+    /* background-image: url('../src/images/snow.jpeg'); */
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
-
 footer{
     grid-area: 4/1/5/5;
     height: 100%;
@@ -38,6 +40,7 @@ footer{
     margin-bottom: 0;
     margin-top: 0;
     text-align: center;
+    opacity: 100%;
 }
 
 .search{
@@ -66,6 +69,7 @@ footer{
 
 .temp-and-arrows{
     text-align: center;
+    margin-top: 2rem;
 }
 
 .div-temp{
@@ -74,14 +78,32 @@ footer{
 
 .temp-arrows{
     margin: 0, .5rem;
+    /* color: black; */
+}
+
+.fa-solid{
+    padding: 1rem;
+}
+
+#arrow-up{
+    padding-right: 3rem;
+}
+
+#arrow-down:hover{
+    color: darkgray;
 }
+
+#arrow-up:hover{
+    color: darkgray;
+}
+
 #city-state{
     margin: 0;
     font-size: 3rem;
 }
 
 #temp{
-    font-size: 3rem;
+    font-size: 3.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0;
 }
@@ -97,5 +119,9 @@ footer{
 
 .sky{
     height: 50%;
+}
+
 
+.red{
+    color: red;
 }