Ada-C18 · lilianashley · Dec 6, 2022 · Dec 6, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/assets/cloudy.jpg b/assets/cloudy.jpg
diff --git a/assets/rainy.jpg b/assets/rainy.jpg
diff --git a/assets/snowy.jpg b/assets/snowy.jpg
diff --git a/assets/sunny.jpg b/assets/sunny.jpg
diff --git a/index.html b/index.html
@@ -1,12 +1,43 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Weather Report</title>
-</head>
-<body>
-
-</body>
-</html>
+    <link rel="stylesheet" href="styles/index.css" />
+  </head>
+  <body class="flex-container" >
+    <div class="container">
+
+      <div id="dropDownMenu">
+        <label for="skyMenu">Change Sky:</label>
+        <br>
+        <select name="sky" id="sky">
+          <option value="snowy" id="snowy">Snowy</option>
+          <option value="sunny" id="sunny">Sunny</option>
+          <option value="cloudy" id="cloudy">Cloudy</option>
+          <option value="rainy" id="rainy">Rainy</option>
+        </select>
+      </div>
+      City  <input type="text" id="city" name="city" value="Sioux City, IA"><br>
+
+          <input type="button" id="button1" name="button1" value="Change Name">
+          <br><br>
+      <button id="Add">Add</button>
+      <button id="Subtract">Subtract</button>
+      <div id="displayWeather">
+        <div id="Total">50</div>
+        <div>F°</div>
+      </div>
+      <div id="displayCity">Sioux City, IA</div>
+      <div id="realtimeButton">
+        <button id="getDisplayCityTemp">Get Realtime Temperature</button>
+      </div>
+      <div id="landscape">🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲</div>
+    </div>
+    <script src="./node_modules/axios/dist/axios.min.js"></script> 
+    <script src="./src/index.js"></script> 
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,114 @@
+let total_element = document.getElementById('Total');
+
+function Add () {
+  let total_value = parseInt(total_element.innerHTML);
+  total_element.innerHTML = total_value + 1;
+  let myTemp = total_value + 1;
+  changeLandscape(myTemp);
+};
+
+
+function Subtract () {
+  let total_value = parseInt(total_element.innerHTML);
+  if (total_value == 0) return; 
+  total_element.innerHTML = total_value - 1;
+  let myTemp = total_value - 1;
+  changeLandscape(myTemp);
+};
+
+function changeLandscape (temp) {
+  if (temp >=80) {
+    document.getElementById('landscape').innerHTML = '🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂';
+  } else if (temp >= 70) {
+    document.getElementById('landscape').innerHTML = '🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷';
+  } else if (temp >= 60) {
+    document.getElementById('landscape').innerHTML = '🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃';
+  } else {
+    document.getElementById('landscape').innerHTML = '🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲';
+  }
+};
+
+function changeCityName () {
+  let cityInput = document.getElementById('city').value;
+  document.getElementById('displayCity').innerHTML = cityInput;
+  return cityInput;
+};
+
+
+document.getElementById('Add').addEventListener('click', Add);
+
+document.getElementById('Subtract').addEventListener('click', Subtract);
+
+document.getElementById('city').addEventListener('input', changeCityName);
+
+
+window.addEventListener("load", cargaPagina);
+function cargaPagina() {
+    var btn = document.getElementById("button1").addEventListener("click", cambiaValores);
+};
+
+function cambiaValores() {
+    var inputName = document.getElementById("city");
+    inputName.value = "Sioux City, IA";
+    document.getElementById('displayCity').innerHTML = "Sioux City, IA";
+};
+
+var x = document.getElementById("myText");
+
+
+function findCityLatLon () {
+  let city = changeCityName();
+  axios
+    .get('http://127.0.0.1:5000/location', {
+      params: {
+        q: city
+      }
+    })
+    .then((response) => {
+      console.log(response.data);
+      let lat = response.data[0].lat;
+      let lon = response.data[0].lon;
+      getTempWithLocation(lat, lon);
+    })
+    .catch((error) => {
+      console.log('Error given back by the API response:', error);
+    });
+};
+
+function getTempWithLocation (lat, lon) {
+  axios
+    .get('http://127.0.0.1:5000/weather', {
+      params: {lat: lat, lon: lon
+    }
+    })
+    .then((response) => {
+      console.log(response.data);
+      let kelvin = response.data['main']['temp'];
+      convertToFahrenheit(kelvin);
+    })
+    .catch((error) => {
+      console.log('Error given back by the API response:', error);
+    });
+};
+
+function convertToFahrenheit (kelvin) {
+  let fahrenheit = Math.round((kelvin * (9/5)) - 459.67);
+  document.getElementById('Total').innerHTML = fahrenheit;
+  changeLandscape(fahrenheit);
+};
+
+function changeSky () {
+  let skyDisplay = document.getElementById('sky').value;
+  if (skyDisplay === 'sunny') {
+    document.body.style.backgroundImage = "url('assets/sunny.jpg')";
+  } else if (skyDisplay === 'cloudy') {
+    document.body.style.backgroundImage = "url('assets/cloudy.jpg')";
+  } else if (skyDisplay === 'rainy') {
+    document.body.style.backgroundImage = "url('assets/rainy.jpg')";
+  } else if (skyDisplay === 'snowy') {
+    document.body.style.backgroundImage = "url('assets/snowy.jpg')";
+  }
+};
+document.getElementById('getDisplayCityTemp').addEventListener('click', findCityLatLon);
+
+document.getElementById('sky').addEventListener('change', changeSky);
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,74 @@
+body {
+  background-image: url('https://images.pexels.com/photos/10920428/pexels-photo-10920428.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
+  background-size: cover;
+  font-family: "Cerebri Sans", Helvetica, Arial, sans-serif;
+}
+
+.container {
+  background-color: #ffffff10;
+  backdrop-filter: blur(10px);
+  border: 3px solid #edc548;
+  border-radius: 75px;
+  display: block;
+  max-width: fit-content;
+  max-height: fit-content;
+  margin: 0 auto;
+  padding: 50px;
+}
+
+.search-label {
+  margin-left: 225px;
+  font-size: 18px;
+}
+
+.current-temp {
+  margin-left: 20px;
+}
+.current-city {
+  font-size: 35px;
+  text-align: center;
+}
+
+.flex-container {
+  display: flex;
+  justify-content: center;
+
+  }
+
+#displayCity {
+  font-size: 30px;
+  text-align: center;
+
+}
+
+#displayWeather {
+  display: flex;
+  columns: 2;
+  justify-content: center;
+  margin: 10px;
+}
+
+#dropDownMenu {
+  text-align: right;
+  margin: 10px;
+}
+
+#getDisplayCityTemp {
+  background-color: #edc548;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+  color: gray;
+  font-size: 15px;
+  font-weight: bolder;
+  margin: 10px;
+  padding: 10px 15px;
+  transition: all 200ms ease-in-out;
+  text-decoration: none;
+}
+
+#Total {
+  font-size: 75px;
+  font-weight: bold;
+  text-align: center;
+}