Ada-C18 · NashwaAlsharki · Dec 9, 2022 · Dec 12, 2022 · Dec 12, 2022 · Dec 12, 2022
diff --git a/assets/beachLand.jpg b/assets/beachLand.jpg
diff --git a/assets/clearMiddle.jpg b/assets/clearMiddle.jpg
diff --git a/assets/cloudyMiddle.jpg b/assets/cloudyMiddle.jpg
diff --git a/assets/cloudySky.jpg b/assets/cloudySky.jpg
diff --git a/assets/coldLand.jpg b/assets/coldLand.jpg
diff --git a/assets/desertLand.jpg b/assets/desertLand.jpg
diff --git a/assets/desertLand3.jpg b/assets/desertLand3.jpg
diff --git a/assets/rainyMiddle.jpg b/assets/rainyMiddle.jpg
diff --git a/assets/snowLand.jpg b/assets/snowLand.jpg
diff --git a/assets/snowyMiddle.jpg b/assets/snowyMiddle.jpg
diff --git a/assets/sunnySky.jpg b/assets/sunnySky.jpg
diff --git a/assets/warmLand.jpg b/assets/warmLand.jpg
diff --git a/index.html b/index.html
@@ -4,9 +4,44 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="https://kit.fontawesome.com/670affd052.js" crossorigin="anonymous"></script>
+    <script src="./node_modules/axios/dist/axios.min.js"></script> 
+    <script src="./src/index.js"></script>
+
+    <link rel="stylesheet" href="./styles/index.css">
+
     <title>Weather Report</title>
 </head>
+
 <body>
+    <section id="sky">
+        <div class="sky">       
+            <input id="searchbox" type="text" placeholder="Type city name...">
+            <button id="search-btn">Search</button>
+        </div>
+    </section>
 
+    <section id="middle">
+        <div class="middle">
+            <h1 id="city-display">Brooklyn</h1>
+            <h1 id="temp-display">65</h1>
+            <h5>Click on the icons to change the temperature</h5>
+            <i id="decrease-temp" class="fa-regular fa-snowflake fa-xl"></i>
+            <i id="increase-temp" class="fa-solid fa-sun fa-xl"></i>
+            <h5>Pick an option to change the sky</h5>
+            <select id="sky-dropdown">
+                <option>Sunny</option>
+                <option>Cloudy</option>
+                <option>Rainy</option>
+                <option>Snowy</option>
+            </select>
+        </div>
+    </section>
+
+    <section id="land">
+        <button id="get-realtime-temp">Get Realtime Temperature</button>
+    </section>
+
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,136 @@
+"use strict";
+
+// current state of the page. All functions update this state and pull needed data from the state
+let state = {
+  city: 'Chicago',
+  lat: '',
+  lon: '',
+  temp: 65,
+  color: 'red',
+  sky: "url('../assets/cloudySky.jpg')",
+  middle: "url('../assets/snowyMiddle.jpg')",
+  land: "url('../assets/snowLand.jpg')",
+};
+
+// functionality to change city and update weather
+// 1. change selected city
+const searchBox = document.getElementById('searchbox');
+const cityDisplay = document.getElementById('city-display');
+
+const changeCity = () => {
+  state.city = searchBox.value;
+  cityDisplay.innerHTML = state.city
+  getCoordinates();
+};
+
+// 2. fetch city coordinates
+const getCoordinates = () => {
+  axios
+  .get('http://127.0.0.1:5000/location', {
+    params: {
+      q: state.city,
+    },
+  })
+  .then((response) => {
+    state.lat = response.data[0].lat;
+    state.lon = response.data[0].lon;
+    getWeather();
+  })
+  .catch((error) => {
+    console.log("Couldn't find coordinates for this city.");
+  });
+};
+
+// 3. fetch current city weather
+const getWeather = () => {
+  axios
+  .get('http://127.0.0.1:5000/weather', {
+    params: {
+      lat: state.lat,
+      lon: state.lon,
+    },
+  })
+  .then((response) => {
+    const kelvin = response.data['main']['temp'];
+    state.temp = Math.round(((kelvin - 273.15) * 9) / 5 + 32);
+    setColorAndLand();
+  })
+  .catch((error) => {
+    console.log("Couldn't get the temperature for this city.");
+  });
+};
+
+// functionality to change elements on the screen
+// increase temp
+const increaseTemp = () => {
+  state.temp++;
+  setColorAndLand();
+};
+
+// decrease temp
+const decreaseTemp = () => {
+  state.temp--;
+  setColorAndLand();
+};
+
+// change temp display, color and land
+const setColorAndLand = () => {
+  const tempDisplay = document.getElementById('temp-display');
+  const land = document.getElementById('land');
+
+  if (state.temp >= 90) {
+    state.color = 'red';
+    state.land = "url('../assets/desertLand.jpg')"
+  } else if (state.temp >= 70) {
+    state.color = 'orange';
+    state.land = "url('../assets/beachLand.jpg')"
+  } else if (state.temp >= 55) {
+    state.color = 'yellow';
+    state.land = "url('../assets/warmLand.jpg')"
+  } else if (state.temp >= 40) {
+    state.color = 'green';
+    state.land = "url('../assets/coldLand.jpg')"
+  } else {
+    state.color = 'teal';
+    state.land = "url('../assets/snowLand.jpg')"
+  };
+
+  tempDisplay.innerHTML = state.temp;
+  tempDisplay.style.color = state.color;
+  land.style.backgroundImage = state.land;
+};
+
+// change sky and middle
+const setSkyAndMiddle = () => {
+  const skyDropdown = document.getElementById('sky-dropdown');
+  const sky = document.getElementById('sky');
+  const middle = document.getElementById('middle');
+
+  if (skyDropdown.value === 'Sunny') {
+    state.sky = "url('../assets/sunnySky.jpg')"
+    state.middle = "url('../assets/clearMiddle.jpg')"
+  } else if (skyDropdown.value === 'Cloudy') {
+    state.sky = "url('../assets/cloudySky.jpg')"
+    state.middle = "url('../assets/cloudyMiddle.jpg')"
+  } else if (skyDropdown.value === 'Rainy') {
+    state.sky = "url('../assets/cloudySky.jpg')"
+    state.middle = "url('../assets/rainyMiddle.jpg')"
+  } else {
+    state.sky = "url('../assets/cloudySky.jpg')"
+    state.middle = "url('../assets/snowyMiddle.jpg')"
+  };
+
+  sky.style.backgroundImage = state.sky;
+  middle.style.backgroundImage = state.middle;
+};
+
+// event listeners and triggers
+const registerEventHandlers = () => {
+  document.getElementById('search-btn').addEventListener("click", changeCity);
+  document.getElementById('increase-temp').addEventListener("click", increaseTemp);
+  document.getElementById('decrease-temp').addEventListener("click", decreaseTemp);
+  document.getElementById('sky-dropdown').addEventListener("change", setSkyAndMiddle);
+  document.getElementById('get-realtime-temp').addEventListener("click", getWeather);
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,75 @@
+body {
+  color: rgb(32, 32, 32);
+  text-align: center;
+  font-family: "Lucida Console", "Courier New", monospace;
+  font-size: 1.2em;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  } 
+
+section {
+  background-size: contain;
+}
+
+#sky {
+  background-image: url("../assets/sunnySky.jpg");
+  flex-basis: 25vh;
+}
+
+#middle {
+  background-image: url("../assets/snowyMiddle.jpg");
+  flex-basis: 45vh;
+}
+
+#land {
+  background-image: url("../assets/desertLand.jpg");
+  flex-basis: 30vh;
+}
+
+#searchbox {
+  border-radius: 5px;
+  height: 25px;
+  width: 250px;
+  margin-top: 100px;
+}
+
+#city-display {
+  font-size: 2.5em;
+}
+
+#temp-display {
+  font-size: 3em;
+  color: teal;
+}
+
+.middle {
+  display: contents;
+}
+
+button {
+  border-radius: 5px;
+  background-color: rgb(248, 206, 129);
+  border: 1px solid rgb(32, 32, 32);
+  padding-right: 10px;
+  padding-left: 10px;
+  padding: 5px;
+  font-weight: 500;
+  font-size:15px;
+}
+
+button:hover {
+  border: 1.5px solid rgb(32, 32, 32);
+}
+
+i {
+  padding: 10px;
+}
+
+.fa-snowflake:hover {
+  color: blue;
+}
+.fa-sun:hover {
+  color: rgb(255, 115, 0);
+}