Ada-C15 · lolkinetzky · Jun 17, 2021 · Oct 22, 2021 · Oct 22, 2021
diff --git a/ada-project-docs/assets/example-32.png b/ada-project-docs/assets/example-32.png
diff --git a/ada-project-docs/assets/example-64.png b/ada-project-docs/assets/example-64.png
diff --git a/ada-project-docs/assets/example-71.png b/ada-project-docs/assets/example-71.png
diff --git a/ada-project-docs/assets/example-98.png b/ada-project-docs/assets/example-98.png
diff --git a/ada-project-docs/assets/example-duckduckgo.png b/ada-project-docs/assets/example-duckduckgo.png
diff --git a/ada-project-docs/optional-enhancements.md b/ada-project-docs/optional-enhancements.md
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Simple Weather Report</title>
+    <link href="styles/style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body class="start">
+    <main>
+      <header class="weather_header">
+        <h1><em>*this is not</em> a cocktail</h1>
+      <h5>But we'll call it <span class="current_cocktail">A Medieval Mule</span></h5>
+      </header>
+
+      <section id="listOptionsContainer">
+        <h2>Skies are looking:</h2>
+        <select id="sky_select">
+          <option>how about instead we market a jft</option>
+          <option>"just fungible tokens"</option>
+          <option>it'd be just a bunch of pointers</option>
+          <option>some option about nft</option>
+          <option>projected value mehbeh</option>
+          <option>idk maybe something about ai or GANs</option>
+          <option>play everyday I'm hustling by rick ross</option>
+        </select>
+      </section>
+
+      <section class="subscribeNow">
+        <h2>insert heading here</h2>
+        <button id="subscribe"> keep in touch</button>
+        <input id="email" type="text">
+      </section>
+    </main>
+    <script src="scripts/index.js"></script>
+  </body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,88 @@
+let temp_num = 60;
+
+const changeScenerynStyle = (withTemp) => {
+  const earthContainer = document.getElementById("landscape");
+  const tempContainer = document.getElementById("temp_num");
+  let landscape = "";
+  let color = "";
+  if (withTemp >= 80) {
+    landscape = "🌵_🐍_🦂_🌵🌵🐍_🏜_🦂";
+    color = "red";
+  } else if (withTemp >= 70){
+    landscape = "🌸🌿🌼🌷🌻🌿☘️🌱🌻🌷";
+    color = "orange";
+  } else if (withTemp >= 60) {
+    landscape = "🌾🌾_🍃_🪨__🛤_🌾🌾_🍃";
+    color = "yellow";
+  } else if (withTemp >= 50) {
+    landscape = "🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+    color = "green";
+  } else if (withTemp <= 49) {
+    landscape = "🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲";
+    color = "teal";
+  }
+  tempContainer.className = color;
+  earthContainer.textContent = landscape;
+}
+
+const tempChange = temp_num => {
+  const tempContainer = document.getElementById("temp_num");
+  tempContainer.textContent = temp_num;
+  changeScenerynStyle(temp_num);
+}
+
+const hotter = () => {
+  temp_num += 1;
+  tempChange(temp_num);
+};
+
+const colder = () => {
+  temp_num -= 1;
+  tempChange(temp_num);
+};
+
+const changeSky = () => {
+  const skyChoice = document.getElementById("sky_select").value;
+  const skyOnEarth = document.getElementById("sky");
+  const background = document.body;
+  let sky = "";
+      if (skyChoice === "Sunny") {
+        sky = "☁️ ☁️ ☁️ ☀️ ☁️ ☁️";
+      } else if (skyChoice === "Cloudy") {
+        sky = "☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️";
+      } else if (skyChoice === "Rainy") {
+        sky = "🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧";
+      } else if (skyChoice === "Snowy") {
+        sky = "🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨";
+      }
+  skyOnEarth.textContent = sky;
+  background.className= skyChoice;
+}
+const changeLocale = () => {
+  const cityContainer = document.querySelector(".header_city");
+  const typed_city = document.querySelector("#typed_city").value;
+  cityContainer.textContent = typed_city;
+}
+const skipTown = () => {
+  const thisIsthePlace = document.querySelector(".header_city")
+  var typed_city = document.querySelector("#typed_city").value;
+  typed_city = "Missoula, Mt";
+  changeLocale()
+}
+//tried a couple different ways of the click button to clear input/city again but it's not working, atleast it will change with the typing still?
+const registerEventHandlers = () => {
+  tempChange(temp_num);
+  const someLikeItHot = document.querySelector("#temp_increase");
+  temp_increase.addEventListener("click", hotter);
+  const someLikeItCold = document.querySelector("#temp_decrease");
+  temp_decrease.addEventListener("click", colder);
+  changeSky();
+  const updateSky = document.getElementById("sky_select");
+  updateSky.addEventListener("change", changeSky);
+  const weOutHere = document.getElementById("typed_city");
+  const moveTown = document.querySelector("#city_reset");
+  weOutHere.addEventListener("input", changeLocale);
+  moveTown.addEventListener("click", skipTown);
+};
+
+document.addEventListener("DOMContentLoaded", registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,59 @@
+body {
+  color: hsl(246, 83%, 55%);
+  font-family: Gill Sans MT, Calibri, sans-serif;
+  height: 100vh;
+  Background-image: url(https://images.alphacoders.com/714/714927.jpg);
+  Background-size: cover;
+  background: linear-gradient(98deg,hsla(181, 100%, 92%, 0.98) 20%,
+     hsl(206, 42%, 83%) 80%);
+}
+
+
+.weather_header {
+  padding-left: 5vh;
+}
+.earthly_delights{
+  display: block;
+  background-color: rgba(128, 128, 128, 0.123);
+  min-width: 20vh;
+  max-width: 30vh;
+  margin: 20px;
+  padding: 10px;
+  margin-right: 90vh;
+  border-radius: 25px;
+  text-align: center;
+}
+.temp{
+  display: block;
+  background-color: rgba(128, 128, 128, 0.123);
+  min-width: 20vh;
+  max-width: 30vh;
+  margin: 20px;
+  padding: 10px;
+  margin-right: 90vh;
+  border-radius: 25px;
+  text-align: center;
+}
+#skyContainer{
+  display: block;
+  background-color: rgba(128, 128, 128, 0.123);
+  min-width: 20vh;
+  max-width: 30vh;
+  margin: 20px;
+  padding: 10px;
+  margin-right: 90vh;
+  border-radius: 25px;
+  text-align: center;
+}
+.reset_location{
+  display: block;
+  background-color: rgba(128, 128, 128, 0.123);
+  min-width: 20vh;
+  max-width: 30vh;
+  margin: 20px;
+  padding: 10px;
+  margin-right: 90vh;
+  border-radius: 25px;
+  text-align: center;
+}
+