Ada-C15 · yukka-pukka · Jun 18, 2021
diff --git a/assets/cloud.jpg b/assets/cloud.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!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>Weather Report</title>
+    <link href="styles/index.css" rel="stylesheet"/>
+</head>
+<body>
+    <header>
+        <img src="assets/cloud.jpg" alt="cloud">
+        <h1>Local Weather Report!</h1>
+        <img src="assets/cloud.jpg" alt="cloud">
+    </header>
+    <main>
+        <h2>For the city of <span id=city-name>Lavander</span></h2>
+        <div id=grid-container>
+            <section id=temperature-section>
+                <h2>Temperature</h2>
+                <div id=temp-content>
+                    <div id="up-down-arrows">
+                        <p id="increase-temp">⬆️</p>
+                        <p id="decrease-temp">⬇️</p>
+                    </div>
+                    <div id="temp-convert-container">
+                        <span id="temp-integer"></span>
+                    </div>
+                </div>
+            </section>
+            <section id="sky-section">
+                <h2>Sky</h2>
+                <div>
+                    <select id="sky-dropdown">
+                        <option value="Rainy">Rainy</option>
+                        <option value="Sunny">Sunny</option>
+                        <option value="Cloudy">Cloudy</option>
+                        <option value="Snowy">Snowy</option>
+                    </select>
+                </div>
+            </section>
+            <section id="city-section">
+                <h2>City</h2>
+                <div>
+                    <input type="text" id="city" value="Lavender">
+                    <button id="reset-button">Reset</button>
+                </div>
+            </section>
+            <section id="weather-section">
+                <h2>Weather Garden</h2>
+                <div id="weather-content">
+                    <div id="landscape"></div>
+                    <div id="sky"></div>
+                </div>
+            </section>
+    </main>
+    <script src="scripts/index.js"></script>
+</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,112 @@
+let currentTemp = 65;
+
+const updateTemperature = currentTemp => {
+    const tempContainer = document.getElementById("temp-integer");
+    tempContainer.textContent = currentTemp;
+    changeTempColor(currentTemp);
+    changeLandscape(currentTemp);
+};
+
+
+const increaseTemperature = () => {
+    currentTemp += 1;
+    updateTemperature(currentTemp);
+};
+
+const decreaseTemperature = () => {
+    currentTemp -= 1;
+    updateTemperature(currentTemp);
+};
+
+const changeTempColor = currentTemp => {
+    const tempContainer = document.getElementById("temp-content");
+    let color = "green";
+    if (currentTemp >= 80) {
+        color = "red";
+    } else if (currentTemp >= 70) {
+        color = "orange";
+    } else if (currentTemp >= 60) {
+        color = "yellow";
+    } else if (currentTemp >= 50) {
+        color = "green";
+    } else if (currentTemp < 50) {
+        color = "teal";
+    }
+    tempContainer.classList = color;
+};
+
+const changeLandscape = currentTemp => {
+    const landscapeContainer = document.getElementById("landscape");
+    let landscape = "";
+    if (currentTemp >= 80) {
+        landscape = "🌵🐍🦂🌵🌵🌵🐍🌵🏜🦂"
+    } else if (currentTemp >= 70) {
+        landscape = "🌸🌿🌼🌷🌻🌿☘️🌱🌻🌷"
+    } else if (currentTemp >= 60) {
+        landscape = "🌾🌾🍃🍃🪨🪨🪨🪨🍃"
+    } else if (currentTemp >= 50){ 
+        landscape = "🌲🌲⛄️🌲🍂🌲🌲🌲🍂🌲"
+    } else if (currentTemp < 50){
+        landscape = "⛄️❄️❄️⛄️❄️❄️⛄️⛄️❄️❄️"
+    }
+    landscapeContainer.textContent = landscape;
+};
+
+
+const updateSky = () => {
+    const skyDropdown = document.getElementById("sky-dropdown").value;
+    const skyForecast = document.getElementById("sky");
+    let sky = "";
+    if (skyDropdown === "Sunny") {
+        sky = "☀️☀️☀️☀️☀️☀️☀️☀️☀️"
+    } else if (skyDropdown === "Cloudy") {
+        sky = "🌤🌤🌤🌤🌤🌤🌤🌤🌤"
+    } else if (skyDropdown === "Rainy") {
+        sky = "🌧🌧🌧🌧🌧🌧🌧🌧🌧"
+    } else if (skyDropdown === "Snowy") {
+        sky = "❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️"
+    }
+    skyForecast.textContent = sky;
+};
+
+
+const updateCityName = () => {
+    const inputCityName = document.getElementById("city").value;
+    const cityNameHeader = document.getElementById("city-name");
+    cityNameHeader.textContent = inputCityName;
+};
+
+
+const resetCityName = () => {
+    const cityNameInput = document.getElementById("city");
+    cityNameInput.value = "Lavender";
+    updateCityName();
+};
+
+
+
+const registerEventHandlers = () => {
+    increaseTemperature();
+    const tempIncreaseBtn = document.getElementById("increase-temp");
+    tempIncreaseBtn.addEventListener("click", increaseTemperature);
+
+    decreaseTemperature();
+    const tempDecreaseBtn = document.getElementById("decrease-temp");
+    tempDecreaseBtn.addEventListener("click", decreaseTemperature);
+
+    updateSky();
+    const skyDropdown = document.getElementById("sky-dropdown");
+    skyDropdown.addEventListener("change", updateSky);
+
+
+    updateCityName();
+    const inputCityName = document.getElementById("city");
+    inputCityName.addEventListener("input", updateCityName);
+
+    resetCityName();
+    const cityNameResetBtn = document.getElementById("reset-button");
+    cityNameResetBtn.addEventListener("click", resetCityName);
+
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,120 @@
+ @import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
+
+
+body h2 {
+    text-align: center;
+}
+
+body {
+    background-color: #0f0513;
+    color: #6e20d5;
+    font-family: 'Tangerine', serif;
+    font-size: 30px;
+}
+
+button {
+    background-color: #5e23d4;
+    color: #441693;
+    border: none;
+    font-size: 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    background-color: #6d6bf4;
+    width: 100%;
+    padding: 30px;
+    font-size: 30px;
+    margin-top: -40px;
+}
+
+header img {
+    max-height: 150px;
+    max-width: 150px;
+}
+
+p {
+    padding-right: 30px;
+    cursor: pointer;
+}
+
+select {
+    margin-top: 20px;
+    font-size: 20px;
+}
+
+/*class selectors*/
+
+.red {
+    color: rgb(235, 23, 23);
+}
+
+.teal {
+    color: rgb(17, 225, 225);
+}
+
+.orange {
+    color: rgb(133, 42, 10);
+}
+
+.green {
+    color: rgb(22, 233, 22);
+}
+
+.yellow {
+    color: rgb(219, 189, 14);
+}
+
+/* id selectors */
+
+ #sky p, #landscape p {
+    padding: 10px;
+    margin: 10px;
+    cursor: default;
+}
+
+ #grid-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: auto;
+    grid-gap: 20px;
+    margin: 20px;
+} 
+
+#sky-section, #city-section, #weather-section {
+    text-align: center;
+    background-color: #6d6bf4;
+    border-radius: 10px;
+}
+#temperature-section {
+    text-align: center;
+    background-color: #6d6bf4;
+    border-radius: 20px;
+}
+
+#temp-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#temp-integer {
+    font-size: 50px;
+}
+
+#up-down-arrows {
+    font-size: 15px;
+}
+
+#weather-dropdown, #city {
+    border: none;
+    font-size: 20px;
+    margin-top: 20px;
+}
+