Ada-C15 · saebaebae · Jun 17, 2021 · Jun 17, 2021 · Jun 17, 2021 · Jun 18, 2021
diff --git a/images/cloudy.jpeg b/images/cloudy.jpeg
diff --git a/images/cool.jpeg b/images/cool.jpeg
diff --git a/images/desert.jpeg b/images/desert.jpeg
diff --git a/images/green-landscape.jpeg b/images/green-landscape.jpeg
diff --git a/images/hot-sky.jpeg b/images/hot-sky.jpeg
diff --git a/images/icy.jpeg b/images/icy.jpeg
diff --git a/images/night.jpeg b/images/night.jpeg
diff --git a/images/rainy.gif b/images/rainy.gif
diff --git a/images/sky.png b/images/sky.png
diff --git a/images/tropical.jpeg b/images/tropical.jpeg
diff --git a/images/wicked-nice-sky.jpeg b/images/wicked-nice-sky.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather Report</title>
+    <link rel="stylesheet" href="styles/index.css"/>
+  </head>
+  <body class="none">
+    <header >
+      <h1> The Weathahhh</h1>  
+    </header>
+
+    <section id="city">
+        <span id="cityName">Worcestah, kid</span>
+        <span id="cityInputBox">
+          <input id="cityInput" placeholder="where you from kid"></input>
+          <button class = cityBtn id="submitBtn">Submit</button><button class = cityBtn id="resetCityBtn">Reset</button>
+    </section>
+
+    <div> </div>
+
+    <section id="boxRow">
+
+
+      <section id="tempContainer">
+          <span id="temperature">70F</span>
+          <span class="horizontalSpace"></span>
+          <span id="btn-group">  <ul>
+              <li><span id="raiseTemp">⬆️</span></li>
+              <li><span id ="lowerTemp">⬇️</span></li>
+              <li><span id="reset"> 🔁 </span></li>
+          </ul></span>
+      </section>
+
+      <span class = "tropical" id="landscapeContainer">
+        Landscape
+      </span>
+
+
+      <span class="blue" id="skyview">
+          It's wicked nice. 
+      </span>
+
+
+  </section>
+
+  <span> </span>
+
+    <section id="inputs">
+      <span></span>
+      <span></span>
+
+      <section id="sky" class="dropdown">
+        <select id="skyChoices">
+          <option value ="blue">Select a sky</option>
+          <option value="hot">Hot and Sunny</option>
+          <option value="rainy">Rainy</option>
+          <option value="cloudy">Cloudy</option>
+          <option value="night">Night</option>
+        </select>
+        </section>
+
+    </section>
+
+
+    <script src="scripts/index.js"></script>
+  </body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,148 @@
+const tempState = {
+    temp: 70
+};
+
+const temperature = document.querySelector("#temperature");
+const landscape = document.querySelector("#landscapeContainer");
+
+const hotter = (event) => {
+    tempState.temp +=1;
+    temperature.textContent = `${tempState.temp}F`;
+    temperature.style.color = tempColor();
+    checkLand();
+    landText();
+};
+
+const colder = (event) => {
+    tempState.temp -=1;
+    // const landscape = document.querySelector("#landscapeContainer");
+    temperature.textContent = `${tempState.temp}F`;
+    temperature.style.color = tempColor();
+    checkLand();
+    landText();
+};
-const hotter = (event) => {
-    tempState.temp +=1;
-    temperature.textContent = `${tempState.temp}F`;
-    temperature.style.color = tempColor();
-    checkLand();
-    landText();
-};
-
-const colder = (event) => {
-    tempState.temp -=1;
-    // const landscape = document.querySelector("#landscapeContainer");
-    temperature.textContent = `${tempState.temp}F`;
-    temperature.style.color = tempColor();
-    checkLand();
-    landText();
-};
+const changeTemp = (increment) => {
+    tempState.temp += increment;
+    temperature.textContent = `${tempState.temp}F`;
+    temperature.style.color = tempColor();
+    checkLand();
+    landText();
+};
-const hotter = (event) => {
-    tempState.temp +=1;
-    temperature.textContent = `${tempState.temp}F`;
-    temperature.style.color = tempColor();
-    checkLand();
-    landText();
-};
-
-const colder = (event) => {
-    tempState.temp -=1;
-    // const landscape = document.querySelector("#landscapeContainer");
-    temperature.textContent = `${tempState.temp}F`;
-    temperature.style.color = tempColor();
-    checkLand();
-    landText();
-};
+const changeTemp = (increment) => {
+    tempState.temp += increment;
+    temperature.textContent = `${tempState.temp}F`;
+    temperature.style.color = tempColor();
+    checkLand();
+    landText();
+};
+
+const reset = (event) => {
+    tempState.temp = 70;
+    // const landscape = document.querySelector("#landscapeContainer");
+    temperature.textContent = `${tempState.temp}F`
+    temperature.style.color = tempColor();
+    checkLand();
+    landscape.textContent = "Landscape"
+};
+
+const tempColor = () => {
+    if (tempState.temp >= 80) {
+        return "red";
+    } else if (tempState.temp >= 70) {
+        return "orange";
+    } else if (tempState.temp >= 60) {
+        return "yellow";
+    } else if (tempState.temp >= 50) {
+        return "green";
+    } else if (tempState.temp <= 49) {
+        return "rgb(0, 251, 255)";
+    }
+};
+
+const checkLand = () => {
+    if (tempState.temp >= 80) {
+        return landscape.className = "desert";
+    } else if (tempState.temp >= 70) {
+        return landscape.className = "tropical";
+    } else if (tempState.temp >= 60) {
+        return landscape.className = "green";
+    } else if (tempState.temp >= 50) {
+        return landscape.className = "cool";
+    } else if (tempState.temp <= 49) {
+        return landscape.className = "icy";
+    }
+};
+
+const landText = () => {
+    if (tempState.temp >= 80) {
+        return landscape.textContent = "It's a scorcha!";
+    } else if (tempState.temp >= 70) {
+        return landscape.textContent = "Feels like summah";
+    } else if (tempState.temp >= 60) {
+        return landscape.textContent = "Throw a yahd pahty!";
+    } else if (tempState.temp >= 50) {
+        return landscape.textContent = "Grab yah coat";
+    } else if (tempState.temp <= 49) {
+        return landscape.textContent = "Betta warm up the cah";
+    }
+};
+
+const cityState = {
+    city: 0 
+};
+
+const cityName = (event) => {
+    cityState.city = document.querySelector('#cityInput').value;
+    if (cityState.city) {
+        const cityName = document.querySelector("#cityName")
+        cityName.textContent = `✨ ✨ Beautiful ${cityState.city}!! ✨ ✨ `
+    };
+};
+
+const resetCity = (event) => {
+    cityState.city = 0
+    const cityName = document.querySelector("#cityName")
+    cityName.textContent = `Worcestah, kid`
+};
+
+const skyState = {
+    sky: "blue"
+}
+const selectSky = (event) => {
+    skyState.sky = document.querySelector("#skyChoices").value;
+    const selectedSky = document.querySelector("#skyview");
+
+    if (skyState.sky === "blue") {
+        selectedSky.className = "blue";
+        selectedSky.textContent = "It's wicked blue"
+    }
+
+    else if (skyState.sky === "hot") {
+        selectedSky.className = "hotSky";
+        selectedSky.textContent = "It's wicked sunny"
+    }
+
+    else if (skyState.sky === "rainy") {
+        selectedSky.className = "rainy";
+        selectedSky.textContent = "It's wicked rainy"
+    }
+
+    if (skyState.sky === "cloudy") {
+        selectedSky.className = "cloudy";
+        selectedSky.textContent = "It's wicked cloudy"
+    }
+
+    else if (skyState.sky === "night") {
+        selectedSky.className = "night";
+        selectedSky.textContent = "It's wicked dahk"
+    }
+
+};
+
+const registerEventHandlers = (event) => {
+    const hotterButton = document.querySelector('#raiseTemp');
+    hotterButton.addEventListener("click", hotter);
+
+    const colderButton = document.querySelector('#lowerTemp');
+    colderButton.addEventListener("click", colder);
+
+    const resetButton = document.querySelector('#reset');
+    resetButton.addEventListener("click", reset);
+
+    const cityButton = document.querySelector('#submitBtn');
+    cityButton.addEventListener("click", cityName);
+
+    const resetCityBtn = document.querySelector('#resetCityBtn');
+    resetCityBtn.addEventListener("click", resetCity);
+
+    const skyPic = document.querySelector("#skyChoices");
+    skyPic.addEventListener("change", selectSky);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);