Ada-C15 · maria-im015 · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+        <title>Weather Report</title>
+        <link href="./styles/index.css" rel="stylesheet" type="text/css"/>
+    </head>
+    <body>
+        <div id="heading">
+            <h1 id="default-city"> Weather Report for Seattle</h1>
+        </div>
+        <div class="box-content">
+            <div class="section-container">
+                <div class="left-boxes">
+                    <h3>Current Temperature: </h3>
+                    <button id="tempUpButton">up</button>
+                    <p id="temp" class="yellow">65 F</p>
+                    <button id="tempDownButton">down</button>
+                </div>
+                <section class="left-boxes">
+                        <h2><br>Sky View!</h2>
+                        <p>Change the sky view!</p>
+                    <label>What a beautiful sky:</label>
+                    <select name="skies" id="sky-dropdown">
+                        <option value="sunny">Sunny</option>
+                        <option value="cloudy">Cloudy</option>
+                        <option value="rainy">Rainy</option>
+                        <option value="snowy">Snowy</option>
+                    </select>
+                </section>
+                <section class="left-boxes">
+                    <h2>Current City:</h2>
+                    <div class="input">
+                        <input type="text" id="city-name" placeholder="seattle" required/>
+                        <br><button id="change-city">change city</button>
+                        <button id="reset-city">reset</button>
+                    </div>
+                </section>
+            </div>
+            <section class="garden-box">
+                <h2 class="weather_garden">Landscape View</h2>
+                <section id="weather_garden_container">
+                    <p id="garden-sky">☁️☁️☁️☁️☁️☁️☁️☁️</p>
+                    <br>
+                    <br>
+                    <br>
+                    <p id="garden-landscape">🌲🪨🌳🌲🪨🌳🌲🪨🌳</p>
+                </section>
+            </section>
+        </div>
+        <script src="./scripts/index.js"></script>
+    </body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,108 @@
+// TEMP  
+const changeTemp = (temp) => {
+    let tempColor = "yellow"
+    let garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖"
+    if (temp > 85) {
+        tempColor = "red";
+        garden = "👙🌻🌞🩴🏖👙🌻🌞🩴🏖";
+    } else if (temp > 75) {
+        tempColor = "orange";
+        garden = "⛲️⛵️🌤🌺🌳⛲️⛵️🌤🌺🌳"; 
+    } else if (temp > 60){
+        tempColor = "yellow";
+        garden = "🌳🌲🌷☁️💨🌳🌲🌷☁️💨";
+    } else if (temp > 50){
+        tempColor = "green";
+        garden = "☁️🌫🍂🌲🍃☁️🌫🍂🌲🍃";
+    } else if (temp < 50){
+        tempColor = "blue";
+        garden = "🌬🍁❄️☃️🧥🌬🍁❄️☃️🧥";
+    }
+
+    const newGarden = document.querySelector("#garden-landscape");
+    newGarden.textContent = garden
+    return tempColor
+}
+
+const increaseTemp = () => {
+    const newTemp = document.querySelector("#temp");
+    const newTempValue = parseFloat(newTemp.textContent) + 1;
+    tempColor = changeTemp(newTempValue);
+    newTemp.className = tempColor;
+    newTemp.textContent = String(newTempValue);
+};
+
+const decreaseTemp = () => {
+    const newTemp = document.querySelector("#temp");
+    const newTempValue = parseFloat(newTemp.textContent) - 1;
+    tempColor = changeTemp(newTempValue);
+    newTemp.className = tempColor;
+    newTemp.textContent = String(newTempValue);
+
+};
+
+
+// SKY 
+const skyView = (option) => {
+    let currentSky =  "☀️☀️☀️☀️☀️☀️"
+    if (option == "sunny") {
+        currentSky = "☀️☀️☀️☀️☀️☀️";
+    } else if (option=="cloudy") {
+        currentSky = "☁️☁️☁️☁️☁️";
+    } else if (option=="rainy") {
+        currentSky = "🌧🌧🌧🌧🌧";
+    } else if (option=="snowy") {
+        currentSky = "🌨❄️🌨❄️🌨❄️";
+    }
+    const changeSky = document.querySelector("#garden-sky");
+    changeSky.textContent = currentSky
+}
+
+const selectSky = () => {
+    const sky_selection = document.querySelector("#sky-dropdown")
+    skyView(sky_selection.value)
+}
+
+
+// CITY 
+const changeCity = (event) => {
+    let inputCity = document.querySelector("#city-name").value;
+    let mainHeading = document.getElementById("default-city");
+    if (!inputCity == "") {
+        mainHeading.innerHTML = `Weather Report for: ${inputCity}`;
+        inputCity.value = "";
+    }
+};
+
+const resetCity = (event) => {
+    let mainHeading = document.getElementById("default-city");
+    mainHeading.innerHTML = "Weather Report for Seattle";
+};
+
+
+// EVENT HANDLERS
+const registerEventHandlers = () => {
+    const upButton = document.querySelector("#tempUpButton");
+    upButton.addEventListener("click", increaseTemp);
+
+    const downButton = document.querySelector("#tempDownButton");
+    downButton.addEventListener("click", decreaseTemp);
+
+    const skySelector = document.querySelector("#sky-dropdown")
+    console.log(skySelector)
+    skySelector.addEventListener("change", selectSky)
+
+    const updateCity = document.querySelector("#change-city")
+    updateCity.addEventListener("click", changeCity);
+
+    const resetCityName = document.querySelector("#reset-city")
+    resetCityName.addEventListener("click", resetCity);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+
+
+
+
+
+
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,89 @@
+body {
+    color: rgb(252, 245, 243);
+    font-family: Gill Sans, sans-serif, Trebuchet MS, sans-serif;
+    height: 100vh;
+    text-align: center;
+    background: linear-gradient(#21265c,#cc5721);
+}
+
+h1 {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 40%;
+    flex-wrap: nowrap;
+    font-size: 30px;
+    text-align: center;
+}
+
+h2 {
+    color: rgb(238, 231, 231)
+}
+
+.box-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#city-name {
+    color: rgb(238, 238, 245);
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 40%;
+    flex-wrap: nowrap;
+    font-size: 25px;
+    text-align: center;
+}
+
+.garden-box {
+    text-align: center;
+    width: 250px;
+    margin-top: 150px;
+    margin-left: 15px;
+    height: 300px;
+    border-radius: 14px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: rgb(228, 184, 163);
+}
+
+.left-boxes {
+    text-align: center;
+    width: 250px;
+    margin-bottom: 15px;
+    margin-right: 15px;
+    height: 200px;
+    border-radius: 14px;
+    padding: 10px;
+    box-sizing: border-box;
+    background-color: rgb(228, 184, 163);
+}
+
+.section-container {
+    display: flex;
+    flex-direction: column;
+
+}
+
+.red {
+    color: rgb(133, 10, 10);
+}
+
+.orange {
+    color: rgb(241, 111, 3)
+}
+
+.yellow {
+    color: rgb(252, 218, 70);
+}
+
+.green {
+    color: rgb(19, 184, 19)
+}
+
+.blue    {
+    color: rgb(8, 63, 182)
+}
+