Ada-C15 · lileekoi · Jun 21, 2021 · Jun 21, 2021 · Jun 21, 2021
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🌈☀️Weather Report🌦❄️</title>
+    <link href="styles/index.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+    <header class="header">
+        <h1>Weather Report</h1>
+        <div>For the lovely city of
+            <span id="headerCityName" class="header_city-name">New York City</span></div>
+    </header>
+
+    <section class="temperature_section">
+        <h2>Temperature</h2>
+        <div class="temperature_content">
+            <div class="temperature_controls">
+                <span id="increaseTempControl">⬆️</span>
+                <span id="decreaseTempControl">⬇️</span>
+            </div>
+            <span id="tempValue" class="Red">80</span>
+        </div>
+    </section>
+
+    <section class="sky_section">
+        <h2>Sky</h2>
+        <select id="skySelect">
+            <option>Sunny</option>
+            <option>Cloudy</option>
+            <option>Rainy</option>
+            <option>Snowy</option>
+        </select>
+    </section>
+
+    <section class="city_name_section">
+        <h2>City Name</h2>
+        <input type="text" id="cityNameInput" value="New York City">
+        <button id="cityNameReset" class="city-name_reset-btn">Reset</button>
+    </section>
+
+    <section class="garden_section">
+        <h2>Weather Garden</h2>
+        <div id="gardenContent" class="garden_content cloudy">
+            <div id="sky">☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️</div>
+            <div id="landscape">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</div>
+        </div>
+    </section>
+
+    <footer><p>&copy; Copyright 2021 Lindsey Lee</p></footer>
+
+    <script src="scripts/index.js"></script>
+</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,105 @@
+let tempValue = 80;
+
+const updateSky = () => {
+    const changeSky = document.getElementById("skySelect").value;
+    const skyContainer = document.getElementById("sky");
+    let sky = "";
+    let skyColor = "";
+    if (changeSky === "Cloudy") {
+        sky = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+        skyColor = "cloudy";
+    } else if (changeSky === "Sunny") {
+        sky = "☁️     ☁️   ☁️ ☀️ ☁️  ☁️";
+        skyColor = "sunny";
+    } else if (changeSky === "Rainy") {
+        sky = "🌧🌈☔🐱🐶💧☔🐱🐶🌧⚡️⛈🌧";
+        skyColor = "rainy";
+    } else if (changeSky === "Snowy") {
+        sky = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+        skyColor = "snowy";
+    }
+    skyContainer.textContent = sky;
+    const gardenContent = document.getElementById("gardenContent");
+    gardenContent.classList = `garden_content ${skyColor}`;
+};
+
+const updateCityName = () => {
+    const inputName = document.getElementById("cityNameInput").value;
+    const headerCityName = document.getElementById("headerCityName");
+    headerCityName.textContent = inputName;
+};
+
+const resetCityName = () => {
+    const cityNameInput = document.getElementById("cityNameInput");
+    cityNameInput.value = "New York City";
+    updateCityName();
+};
+
+const updateTempColors = (currentTemp) => {
+    const tempValueContainer = document.getElementById("tempValue");
+    let color = "teal";
+    if ( currentTemp >= 80) {
+        color = "red";
+    } else if (currentTemp >= 70) {
+        color = "orange";
+    } else if (currentTemp >= 60) {
+        color = "yellow";
+    } else if (currentTemp >= 50) {
+        color = "green";
+    }
+    tempValueContainer.classList = color;
+}
+
+const updateGarden = (currentTemp) => {
+    const landscapeContainer = document.getElementById("landscape");
+    let landscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+    if ( currentTemp >= 80) {
+        landscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂";
+    } else if (currentTemp >= 70) {
+        landscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷";
+    } else if (currentTemp >= 60) {
+        landscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃";
+    }
+    landscapeContainer.textContent = landscape;
+}
+
+const updateTemp = tempValue => {
+    const tempValueContainer = document.getElementById("tempValue");
+    tempValueContainer.textContent = tempValue;
+    updateTempColors(tempValue);
+    updateGarden(tempValue);
+}
+
+const increaseTemp = () => {
+    tempValue += 1;
+    updateTemp(tempValue);
+};
+
+const decreaseTemp = () => {
+    tempValue -= 1;
+    updateTemp(tempValue);
+};
+
+const registerEventHandlers = () => {
+    updateTemp(tempValue);
+
+    const increaseTempControl = document.getElementById("increaseTempControl");
+    increaseTempControl.addEventListener("click", increaseTemp);
+
+    const decreaseTempControl = document.getElementById("decreaseTempControl");
+    decreaseTempControl.addEventListener("click", decreaseTemp);
+
+    updateCityName();
+    const cityNameInput = document.getElementById("cityNameInput");
+    cityNameInput.addEventListener("input", updateCityName);
+
+    const cityNameResetBtn = document.getElementById("cityNameReset");
+    cityNameResetBtn.addEventListener("click", resetCityName);
+
+    updateSky();
+    const skySelect = document.getElementById("skySelect");
+    skySelect.addEventListener("change", updateSky);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
+
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,150 @@
+html{ 
+  background: url("https://wallpapercave.com/wp/wp5250055.jpg") no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+body {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  grid-template-rows: auto auto auto auto;
+  grid-gap: 1rem;
+
+  font-family: "Arial", sans-serif;
+  font-size: 18px;
+  margin: 2rem;
+}
+
+footer {
+  color: white;
+  font-size: 12px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.header {
+  color: white;
+  grid-column: span 2;
+  display: flex;
+  align-items: center;
+  margin: 2rem auto 3rem 0;
+}
+
+.header > h1 {
+  margin-right: 2rem;
+  font-size: 3em;
+}
+
+.header_city-name {
+  font-style: italic;
+  font-size: 2rem;
+}
+
+.temperature_section,
+.sky_section,
+.city_name_section {
+  border-radius: 8px;
+  padding: 1rem;
+  background-color: white;
+}
+
+.temperature_section {
+  grid-row: 2;
+}
+
+.sky_section {
+  grid-row: 3;
+}
+
+.garden_section {
+  grid-row: 2 / span 3;
+  grid-column: 2;
+  text-align: center;
+  align-self: center;
+}
+
+.temperature_content {
+  display: flex;
+  flex-direction: row;
+}
+
+#tempValue {
+  font-size: 3rem;
+  margin-left: 1.5rem;
+}
+
+.temperature__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.garden_section > h2 {
+  color: white;
+}
+
+.garden_content {
+  min-height: 200px;
+  max-width: fit-content;
+  margin: auto;
+  padding: 2rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  border-radius: 8px;
+  font-size: 2em;
+}
+
+.city-name_reset-btn {
+  border: 0;
+  background-color: rgb(220, 106, 193);
+  color: white;
+  border-radius: 8px;
+  padding: 1rem;
+  font-family: "Arial", sans-serif;
+}
+
+.red {
+  color: red;
+}
+
+.orange {
+  color: orange;
+}
+
+.yellow {
+  color: gold;
+}
+
+.yellow-green {
+  color: yellowgreen;
+}
+
+.green {
+  color: green;
+}
+
+.teal {
+  color: teal;
+}
+
+.cloudy {
+  background-color: lightgrey;
+}
+
+.sunny {
+  background-color: white;
+}
+
+.rainy {
+  background-color: rgb(172, 210, 240);
+}
+
+.snowy {
+  background-color: grey;
+}