Ada-C15 · LacyDraper · Jun 15, 2021 · Jun 15, 2021 · Jun 16, 2021 · Jun 16, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="styles/index.css" />
+        <script src="scripts/index.js" type="text/javascript"></script>
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <header class="main-header"></header>
+            <h1>WEATHER REPORT</h1>
+            <span>Weather for
+                <span id="cityHeaderName"></span></span>
+        </header>
+
+        <section class="skyContainer"></section>
+            <h2 class="title">SKY</h2>  
+            <p>Hey, what type of sky is happening out there?</p> 
+            <select class="controls" name="sky" id="skySelect">
+                <option value="sun">Brilliant Sun</option>
+                <option value="clouds">Dashes of Clouds</option>
+                <option value="clear">Clear</option>
+                <option value="rain">Rain Drops</option>
+            </select>
+            <div id="emojiSky"></div>
+        </section>  
+
+        <section class ="cityNameContainer">
+            <h2 class="title">CITY NAME</h2>
+            <button>Reset City</button>
+            <input type="text" value="Seattle" id="cityInput">
+        </section>
+
+
+        <section class="weatherGardenContainer">
+            <h2 class="title">WEATHER GARDEN</h2>   
+            <div id="gardenContent" class="garden_content">
+                <div id="sky"></div>
+                <div id="landscape"></div>
+            </div>
+        </section>
+
+        <section class="tempContainer">
+            <h2 class="title">TEMPERATURE</h2>  
+            <button id="increaseTemp"class="button" >⬆️</button>
+            <span id="temperature">70</span>
+            <button class="button" id ="decreaseTemp">⬇️</button>
+            </section>
+        <section id='changeSkyColor'></section>
+
+
+    </body>
+
+    </html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,89 @@
+
+const state =  {
+    temperature : 70
+};
+//function to update garden emojis
+const gardenWeatherEmojis = () => {
+    console.log("gardenWeatherEmojis called")
+    const gardenLandscape = document.querySelector("#landscape");
+
+    if (state.temperature >= 80) {
+        gardenLandscape.textContent = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+    }   else if (state.temperature < 80 && state.temperature >=70) {
+            gardenLandscape.textContent = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷";
+    }   else if (state.temperature < 70 && state.temperature >= 60) {
+            gardenLandscape.textContent= "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃";
+    }   else if (state.temperature < 60) {
+        gardenLandscape.textContent= "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+    }
+};
+
+const updateSky = () => {
+    console.log("updateSkyCalled")
+    // gardenSky.value allows us access what the user has chosen in dropdown menu
+    const gardenSky = document.querySelector("#skySelect");
+    let sky = '';
+    // skyColor values need to coordinate with CSS file for color values
+    let skyColor = '';
+    // gardenSky.value allows us access what the user has chosen in dropdown menu
+    if (gardenSky.value === "sun"){
+        sky = '🔥🔥🔥🔥☀🔥🔥🔥☀🔥🔥🔥🔥';
+        skyColor = 'sunny';
+    } else if (gardenSky.value === "clouds"){
+        sky = '🌥🌥🌥🌥 🌥🌥🌥🌥 🌥🌥🌥🌥';
+        skyColor = "cloudy";
+    } else if (gardenSky.value  === "clear") {
+        sky = '🌎🌎🌎 🌎🌎🌎 🌎🌎🌎 🌎🌎🌎';
+        skyColor = "clear";
+    } else if (gardenSky.value === 'rain') {
+        sky = "🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊🌊";
+        skyColor = "rainy";
+    }
+    console.log(gardenSky,"gardenSky value")
+    const emojiPlacement = document.querySelector("#emojiSky")
+    emojiPlacement.textContent = sky;
+};
+
+
+// function to update id=temperature in tempContainer
+const increaseTemp = () => {
+    console.log("increaseTemp called")
+    const temperature = document.querySelector("#temperature")
+    state.temperature += 1;
+    temperature.textContent = `${state.temperature}`
+    gardenWeatherEmojis()
+};
+
+// function to update id=temperature in tempContainer
+const decreaseTemp = () => {
+    console.log("decreaseTemp called")
+    const temperature = document.querySelector("#temperature")
+    state.temperature -= 1;
+    temperature.textContent = `${state.temperature}`
+    gardenWeatherEmojis()
+};
+// not working
+// function to update emojis in weatherGardenContainer by id=landscape  
+
+
+
+
+//function that registers all event handlers when called
+const registerEventHandlers = () => {
+    console.log("registerEventHandlers called")
+    const increaseTempButton = document.querySelector("#increaseTemp");
+    increaseTempButton.addEventListener("click",increaseTemp);
+
+    const decreaseTempButton = document.querySelector("#decreaseTemp");
+    decreaseTempButton.addEventListener("click", decreaseTemp);
+
+    const updateSkyDropDown = document.querySelector("#skySelect")
+    updateSkyDropDown.addEventListener("change",updateSky)
+
+
+    // updateSky()
+    // const skySelect = document.querySelector('#skySelect');
+    // skySelect.addEventListener("change",updateSky)
+
+};
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,40 @@
+h2 {
+    color:rgb(60, 115, 160)
+}
+h1 {
+    font-weight: 600;
+    color:rgba(28, 53, 106, 0.92)
+}
+body {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-rows: auto auto auto auto;
+    grid-gap: 1rem;
+
+    font-family: "Rubik", sans-serif;
+    font-size: 18px;
+    background-color: #bce4eb;
+    margin: 2rem;
+}
+.tempContainer,
+.skyContainer,
+.cityNameContainer {
+
+  border-radius: 8px;
+  padding: 2rem;
+  background-color: rgb(242, 205, 103);
+}
+.mainHeader {
+    color: rgb(216, 76, 76);
+    grid-column: span 3;
+    display: flex;
+    align-items: center;
+    margin: 2rem auto 3rem 0;
+
+}
+
+.mainHeader > h1 {
+    margin-right: 2rem;
+    font-size: 3em;
+}
+