Ada-C15 · SterlingSunshine · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021 · Jun 16, 2021
diff --git a/assets/wireFrame.jpg b/assets/wireFrame.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>TheWeather</title>
+    <link href="styles/index.css" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <h1>And now for <em>The Weather...</em></h1>
+      <h2 id="currentCity">Currently in ✨Seattle✨</h2>
+    </header>
+
+    <main class="displayGroup">
+      <section id="tempPicker" class="adjuster">
+        <section>
+          <button id="tempIncreaseButton">^</button>
+          <button id="tempDecreaseButton">v</button>
+        </section>
+        <section id="tempDisplay">73</section> 
+      </section>
+      <section id="cloudDisplay" class="adjuster">
+        <select name="howCloudy" id="cloudStatus">
+          <option value="cloudy">Cloudy</option>
+          <option value="partlyCloudy">Partly Cloudy</option>
+          <option value="rainy">Rainy</option>
+          <option value="sunny">Sunny</option>
+          <option value="onFireSky">This is fine.</option>
+        </select>
+      </section>
+      <section id="citySetter" class="adjuster">
+        <section id="cityDisplay">Seattle</section>
+        <section>
+          <label for="cityPicker">Enter a new city:</label>
+          <input type="text" id="cityPicker" name="name">
+        </section>
+        <section>
+          <button id="resetCity">Reset</button>
+        </section>
+      </section>
+      <div class="break"></div>
+      <section id="gardenDisplay">
+        Weather Garden
+        <section id="sky">☁️__☀️☁️_☁️</section>
+        <section id="landscape">🌻__🌷🌷🌱_</section>
+        <iframe src="https://open.spotify.com/embed/playlist/7rYLGI2WpU0wPKQo4DKbpK" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
+      </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,88 @@
+const state = {
+  temp: 73,
+  cloudy: "☁️☁️☁️_☁️☁️☁️☁️☁️☁️",
+  partlyCloudy: "☁️☁️___☀️☁️_☁️☁️",
+  rainy: "🌧🌧🌧🌧🌧🌧🌧🌧🌧🌧",
+  sunny: "___☀️☁️_____",
+  onFireSky: "☀️☀️☀️☀️☀️☀️☀️☀️☀️☀️",
+  onFireGround: "🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥",
+  garden: "🌻__🌷🌷🌱_",
+}
+
+const emojiSelector = {
+  0: "✨",
+  1: "⚡️",
+  2: "👾",
+  3: "⭐️",
+  4: "🌈",
+}
+
+const randEmoji = () => {
+  return emojiSelector[Math.floor(Math.random() * 5)];
+}
+
+const changeTemp = (delta) => {
+  state.temp += delta;
+  const tempDisplay = document.querySelector("#tempDisplay");
+  tempDisplay.textContent = `${state.temp}`;
+}
+
+const increaseTemp = () => {
+  changeTemp(1);
+}
+
+const decreaseTemp = () => {
+  changeTemp(-1);
+}
+
+const skyDisplayUpdate = () => {
+  const updatedWeather = document.getElementById("cloudStatus").value;
+  const skyDisplay = document.getElementById("sky");
+  skyDisplay.textContent = state[updatedWeather];
+  if (updatedWeather === "onFireSky") {
+    document.getElementById("landscape").textContent = state.onFireGround;
+  }
+  else {
+    document.getElementById("landscape").textContent = state.garden;
+  }
+}
+
+const cityReset = () => {
+  const cityDisplayCard = document.getElementById("cityDisplay");
+  const cityTitleDisplay = document.getElementById("currentCity");
+
+  let frameEmoji = randEmoji();
+
+  cityDisplayCard.textContent = "Seattle";
+  cityTitleDisplay.textContent = "Currently in " + frameEmoji + "Seattle" + frameEmoji;
+}
+
+const cityUpdate = () => {
+  const newCity = document.getElementById("cityPicker").value;
+  const cityDisplayCard = document.getElementById("cityDisplay");
+  const cityTitleDisplay = document.getElementById("currentCity");
+
+  let frameEmoji = randEmoji();
+
+  cityDisplayCard.textContent = newCity;
+  cityTitleDisplay.textContent = "Currently in " + frameEmoji + newCity + frameEmoji;
+}
+
+const registerEventHandlers = () => {
+  const increaseButton = document.querySelector("#tempIncreaseButton");
+  increaseButton.addEventListener("click", increaseTemp);
+
+  const decreaseButton = document.querySelector("#tempDecreaseButton");
+  decreaseButton.addEventListener("click", decreaseTemp);
+
+  const changeWeather = document.getElementById("cloudStatus");
+  changeWeather.addEventListener("change", skyDisplayUpdate);
+
+  const updateCity = document.getElementById("cityPicker");
+  updateCity.addEventListener("change", cityUpdate);
+
+  const resetCity = document.getElementById("resetCity");
+  resetCity.addEventListener("click", cityReset);
+}
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,44 @@
+html, body {
+  height: 95%;
+  background-color: skyblue;
+}
+
+* {
+  border-color: black;
+  border-width: 2px;
+  border-style: dashed;
+}
+
+main {
+  display: flex;
+  border: 1px solid hotpink;
+  flex-flow: column wrap;
+  justify-content: space-around;
+  align-items: flex-start;
+}
+section {
+  padding: 20px;
+  border-radius: 4px;
+}
+
+.adjuster {
+  flex: 1 1 33%;
+  text-align: center;
+}
+
+.break {
+  flex-basis: 100%;
+}
+
+#gardenDisplay {
+  /* height: auto;
+  width: auto; */
+}
+
+#tempDisplay {
+  font-size: 50px;
+}
+
+button:hover {
+  border: 2px solid yellow;
+}