Ada-C15 · mhayes2019 · Dec 8, 2021 · Dec 11, 2021 · jbieniosek · Dec 16, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!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">
+    <link rel="stylesheet" href="./styles/index.css" />
+    <title>Document</title>
+</head>
+
+<body>
+    <header>
+        <div class="head-title"> Weather Report</div>
+        <p>For the lovely city of <span id="city-display">Honolulu</span></p>
+    </header>
+    <main>
+        <section id="Temperature">
+            <h2> Temperature </h2>
+            <button id="up-arrow">⬆️</button>
+            <button id="down-arrow">⬇️</button>
+            <div id="temperature-number" class="color"></div>
+        </section>
+
+        <section id="Sky-Container">
+            <h3> Sky </h3>
-            <h3> Sky </h3>
+            <h2> Sky </h2>
-            <h3> Sky </h3>
+            <h2> Sky </h2>
+            <select id="sky">
+                <option value="Sunny">Sunny</option>
+                <option value="Cloudy">Cloudy</option>
+                <option value="Rainy">Rainy</option>
+                <option value="Snowy">Snowy</option>
+            </select>
+        </section>
+
+        <section id="Weather-Garden">
+            <h4> Weather Garden</h4> 
-            <h4> Weather Garden</h4> 
+            <h2> Weather Garden</h2> 
-            <h4> Weather Garden</h4> 
+            <h2> Weather Garden</h2> 
+            <div id ="selected-weather"></div>
+        </section>
+
+
+        <section id="City-Name">
+            <h3> City Name </h3>
-            <h3> City Name </h3>
+            <h2> City Name </h2>
-            <h3> City Name </h3>
+            <h2> City Name </h2>
+            <input type="text" id="city">
+        </section>
+    </main>
+    <script src="scripts/index.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,105 @@
+// connect the up arrow so id of up-arrow to an on click event
+// when the id is clicked, then increase temp counter by 1
+
+// temperature variable, every time the user clickes the button, the temperature count goes up by 1
+
+
+// const appearanceHeading = document.getElementById("facts__heading");
+
+// appearanceHeading.textContent = "Qualities and Traits of a Crab";
+let temperature = 80
+
+
+const increaseTemp=()=> {
+// When clicked the temperature will rise by 1 degree
+    ++temperature
+    // console.log("i am clicking the up button")
+    // console.log(temperature)
+    document.getElementById("temperature-number").innerHTML=temperature
+    // console.log('I am the color', color)    
+}
+
+
+const decreaseTemp=()=> {
+    // When clicked the temperature will drop by 1 degree
+    --temperature
+    console.log("i am clicking the down button")
+    console.log(temperature)
+    document.getElementById("temperature-number").innerHTML=temperature
+    console.log(color)
+}
+
+// New Function will change the sky in Weather Garden
+// based on the selected sky in the drop down menu
+const setTypeOfWeather=()=> {
+    let skyValue = document.getElementById("sky").value
+    let sky = document.getElementById("selected-weather")
+
+    // if skyValue == "Sunny"
+    // set sky innerHtml to a sun
+    if (skyValue=="Sunny") {
+        sky.innerHTML="☁️ ☁️ ☁️ ☀️ ☁️ ☁️";
+    } else if (skyValue=="Cloudy") {
+        sky.innerHTML="☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+    } else if (skyValue=="Rainy") {
+        sky.innerHTML="🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
+    } else if (skyValue=="Snowy") {
+        sky.innerHTML="🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+    };
+    console.log(skyValue)
+}
+setTypeOfWeather()
+
+const setCityName=()=> {
+    let cityValue= document.getElementById("city").value
+    let sky = document.getElementById("city-display")
+    sky.textContent = cityValue
+}
+
+
+const registerEventHandlers = () => {
+    // Get up arrow HTML element by ID
+    const upArrowButton = document.querySelector("#up-arrow");
+
+    // Add Click event listener to up arrow button
+    // "click" -> event type
+    // increaseTemp -> function that gets called
+    upArrowButton.addEventListener("click", increaseTemp);
+
+    const downArrowButton = document.querySelector("#down-arrow");
+
+    downArrowButton.addEventListener("click", decreaseTemp);
+
+    // when sky dropdown changes (onChange)
+    // call setTypeOfWeather()
+    const skyDropdown = document.querySelector("#sky");
+    skyDropdown.addEventListener("change", setTypeOfWeather);
+
+    const cityInputText = document.querySelector("#city");
+    cityInputText.addEventListener("input", setCityName);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+
+
+
+// document.getElementById('output').innerHTML = lengthOfName;
+document.getElementById("temperature-number").innerHTML=temperature
+
+// range for color and landscape icons
+
+let color = '';
+
+if (temperature >=80) {
+    color = 'red' 
+} else if (70<=temperature<=79) {
-} else if (70<=temperature<=79) {
+} else if (70<=temperature && temperature<=79) {
-} else if (70<=temperature<=79) {
+} else if (70<=temperature && temperature<=79) {
+    color = 'orange'
+} else if (60<=temperature<=69) {
+    color = 'yellow'
+}else if (50<=temperature<=59) {
+    color = 'green'
+}else if (49<=temperature) {
+    color = 'teal'
+}
+
+document.getElementsByClassName("color").innerHTML=color
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,10 @@
+* {
+    background-color: rgb(140, 137, 155);
+}
+
+
+.head-title {
+    background-color: rgb(150, 10, 10);
+
+}
+