Ada-C15 · pancakes4lyfe · Jun 15, 2021 · Jun 15, 2021 · Jun 15, 2021 · Jun 16, 2021
diff --git a/assets/cloudy.jpg b/assets/cloudy.jpg
diff --git a/assets/cold.jpg b/assets/cold.jpg
diff --git a/assets/cool.jpg b/assets/cool.jpg
diff --git a/assets/extreme.jpg b/assets/extreme.jpg
diff --git a/assets/freezing.jpg b/assets/freezing.jpg
diff --git a/assets/hot.jpg b/assets/hot.jpg
diff --git a/assets/mild.jpg b/assets/mild.jpg
diff --git a/assets/partlyCloudy.jpg b/assets/partlyCloudy.jpg
diff --git a/assets/rainy.jpg b/assets/rainy.jpg
diff --git a/assets/snow.jpg b/assets/snow.jpg
diff --git a/assets/sunny.jpg b/assets/sunny.jpg
diff --git a/assets/thunder.jpg b/assets/thunder.jpg
diff --git a/assets/warm.jpg b/assets/warm.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Weather Time!</title>
+        <meta name="description" content="">
+        <link rel="stylesheet" href="styles/index.css">
+    </head>
+    <body class="sunny">
+        <header>
+            <h1>Weather Time!</h1>
+            <h3 id="cityDisplay">City: Seattle</h3>
+        </header>
+        <main>
+            <section id="sky">
+                <h3>Sky</h3>
+                <select id="skyChoices">
+                    <option value="sunny" selected>Sunny</option>
+                    <option value="partlyCloudy">Partly Cloudy</option>
+                    <option value="cloudy">Cloudy</option>
+                    <option value="rainy">Rainy</option>
+                    <option value="thunder">Thunder Showers</option>
+                    <option value="snowy">Snowy</option>
+                </select>
+            </section>
+
+            <section id="temp">
+                <h3>Temperature</h3>
+                <p id=tempDisplay>65</p>
+                <button id="tempUp">▲</button>
+                <button id="tempDown">▼</button>
+            </section>
+
+            <section id="city">
+                <h3>City Name</h3>
+                <input id="cityChoice" type="text" value="Seattle"/>
+                <button id="reset">Reset</button>
+            </section>
+
+            <section id="landscape" class="mild">
+                <h3>Landscape Display</h3>
+                <!-- <p id="skyDisplay">☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️</p> -->
+                <!-- <p id="groundDisplay">🌳_🌿__🌳_🌿__🌿__🌳_🌿__🌳__🌳</p> -->
+            </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,96 @@
+const state = {
+    temp: 65,
+    tempRange: "mild",
+    sky: "sunny",
+    city: "Seattle"
+};
+
+// TEMPERATURE FUNCTIONALITY//
+const tempUp = (event) => {
+    state.temp += 1;
+    const count = document.querySelector("#tempDisplay");
+    count.textContent = `${state.temp}`;
+    checkTemp();
+};
+
+const tempDown = (event) => {
+    state.temp -= 1;
+    const count = document.querySelector("#tempDisplay");
+    count.textContent = `${state.temp}`;
+    checkTemp();
+};
-const tempUp = (event) => {
-    state.temp += 1;
-    const count = document.querySelector("#tempDisplay");
-    count.textContent = `${state.temp}`;
-    checkTemp();
-};
-
-const tempDown = (event) => {
-    state.temp -= 1;
-    const count = document.querySelector("#tempDisplay");
-    count.textContent = `${state.temp}`;
-    checkTemp();
-};
+const changeTemp = (increment) => {
+    state.temp += increment;
+    const count = document.querySelector("#tempDisplay");
+    count.textContent = `${state.temp}`;
+    checkTemp();
+};
-const tempUp = (event) => {
-    state.temp += 1;
-    const count = document.querySelector("#tempDisplay");
-    count.textContent = `${state.temp}`;
-    checkTemp();
-};
-
-const tempDown = (event) => {
-    state.temp -= 1;
-    const count = document.querySelector("#tempDisplay");
-    count.textContent = `${state.temp}`;
-    checkTemp();
-};
+const changeTemp = (increment) => {
+    state.temp += increment;
+    const count = document.querySelector("#tempDisplay");
+    count.textContent = `${state.temp}`;
+    checkTemp();
+};
+
+const checkTemp = (event) => {
+    if (state.temp === 105) {
+        state.tempRange = "extreme"
+        textColor("#tempDisplay", "black");
+    } else if (state.temp === 90 || state.temp === 104) {
+        state.tempRange = "hot"
+        textColor("#tempDisplay", "red");
+    } else if (state.temp === 75 || state.temp === 89) {
+        state.tempRange = "warm"
+        textColor("#tempDisplay", "rgb(255, 162, 0)");
+    } else if (state.temp === 60 || state.temp === 74) {
+        state.tempRange = "mild"
+        textColor("#tempDisplay", "rgb(255, 247, 0)");
+    } else if (state.temp === 45 || state.temp === 59) {
+        state.tempRange = "cool"
+        textColor("#tempDisplay", "rgb(73, 150, 26)");
+    } else if (state.temp === 30 || state.temp === 44) {
+        state.tempRange = "cold"
+        textColor("#tempDisplay", "rgb(0, 94, 255)");
+    } else if (state.temp === 29) {
+        state.tempRange = "freezing"
+        textColor("#tempDisplay", "rgb(0, 251, 255)");
+    }
+    const landscape = document.querySelector("#landscape");
+    landscape.className = state.tempRange;
+}
+
+const textColor = function(selector, color) {
+    document.querySelector(selector).style.color = color;
+}
+
+// const backgroundColor = function(selector, color) {
+//     document.querySelector(selector).style.backgroundColor = color;
+// }
+
+const selectSky = (event) => {
+    state.sky = event.target.value;
+    const body = document.querySelector("body");
+    body.className = state.sky
+};
+
+
+// CITY FUNCTIONALITY //
+const selectCity = (event) => {
+    state.city = event.target.value;
+    const city = document.querySelector("#cityDisplay");
+    city.textContent = `City: ${state.city}`;
+};
+
+const resetCity = (event) => {
+    document.querySelector("#cityChoice").value = "Seattle";
+    const city = document.querySelector("#cityDisplay");
+    city.textContent = "For the city of: Seattle";
+};
+
+// REGISTER EVENT HANDLERS //
+const registerEventHandlers = (event) => {
+    const tempUpButton = document.querySelector("#tempUp");
+    tempUpButton.addEventListener("click", tempUp);
+
+    const tempDownButton = document.querySelector("#tempDown");
+    tempDownButton.addEventListener("click", tempDown);
+
+    const skyDisplay = document.querySelector("#skyChoices");
+    skyDisplay.addEventListener("change", selectSky)
+
+    const cityInput = document.querySelector("#cityChoice");
+    cityInput.addEventListener("change", selectCity)
+
+    const resetCityButton = document.querySelector("#reset");
+    resetCityButton.addEventListener("click", resetCity);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,123 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap');
+
+body {
+    background-image: url(../assets/sunny.jpg);
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    font-family: 'Noto Sans', sans-serif;
+}
+
+body.sunny {
+    background-image: url(../assets/sunny.jpg);
+}
+
+body.partlyCloudy {
+    background-image: url(../assets/partlyCloudy.jpg);
+}
+
+body.cloudy {
+    background-image: url(../assets/cloudy.jpg);
+}
+
+body.rainy {
+    background-image: url(../assets/rainy.jpg);
+}
+
+body.thunder {
+    background-image: url(../assets/thunder.jpg);
+}
+body.snowy {
+    background-image: url(../assets/snow.jpg);
+}
+
+header {
+    text-align: center;
+    padding: 1px;
+    background-color:rgb(255, 255, 255, 0.5);
+    font-family: 'Do Hyeon', sans-serif;
+    font-size: 1.5em;
+}
+
+main {
+    margin-top: 10px;
+    text-align: center;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
+#temp {
+    border-radius: 25px;
+    background-color:rgb(255, 255, 255, 0.5);
+    margin: 5px;
+    grid-column: 1 / 2;
+    grid-row: 1 / 3;
+}
+
+#tempDisplay {
+    color: rgb(255, 247, 0);
+    font-size: 2em;
+}
+
+#sky {
+    border-radius: 25px;
+    background-color:rgb(255, 255, 255, 0.5);
+    margin: 5px;
+    grid-column: 1 / 2;
+    grid-row: 3 / 5;
+}
+
+#city {
+    border-radius: 25px;
+    background-color:rgb(255, 255, 255, 0.5);
+    margin: 5px;
+    grid-column: 1 / 2;
+    grid-row: 5 / 7;
+}
+
+#landscape {
+    background-color:rgb(255, 255, 255, 0.5);
+    background-size: 100%;
+    background-position: center;
+    background-size: cover;
+    border-radius: 25px;
+    margin: 5px;
+    grid-column: 2 / 4;
+    grid-row: 2 / 6;
+}
+
+#landscape h3 {
+    background-color:rgb(255, 255, 255, 0.5);
+    border-radius: 25px;
+}
+
+#landscape.extreme {
+    background-image: url(../assets/extreme.jpg);
+}
+
+#landscape.hot {
+    background-image: url(../assets/hot.jpg);
+}
+
+#landscape.warm {
+    background-image: url(../assets/warm.jpg);
+}
+
+#landscape.mild {
+    background-image: url(../assets/mild.jpg);
+}
+
+#landscape.cool {
+    background-image: url(../assets/cool.jpg);
+}
+
+#landscape.cold{
+    background-image: url(../assets/cold.jpg);
+}
+
+#landscape.freezing {
+    background-image: url(../assets/freezing.jpg);
+}