Ada-C18 · lbbetts · Dec 14, 2022 · Dec 14, 2022 · Dec 21, 2022 · Jan 5, 2023
diff --git a/index.html b/index.html
@@ -5,8 +5,69 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Weather Report</title>
+
+    <link rel="stylesheet" href="styles/index.css">
+
+	<script src="./node_modules/axios/dist/axios.min.js"></script>
 </head>
+
 <body>
-
+	<div class = "header">
+		<h1>WEATHER REPORT FOR</h1>
+		<span class="city-header">
+			<p id="setCity"></p>
+		</span>
+
+	<div class="grid-container">
+		<div class="grid-item-cond-data">
+				<h2 class = "cond-switch-title">CURRENT CONDITIONS:</h2>
+				<div class="conditions-controls">
+					<input type="radio" name="Conditions" id="sunny" value="✨">
+					<label for="sunny"/>☀️</label>
+
+					<input type="radio" name="Conditions" id="cloudy" value="⛅">
+					<label for="cloudy"/>☁️</label>
+
+					<input type="radio" name="Conditions" id="rainy" value="🌈">
+					<label for="rainy"/>💦</label>
+
+					<input type="radio" name="Conditions" id="snowy" value="☃️">
+					<label for="snowy"/>❄️</label>
+				</div>
+		</div>
+
+		<div class="grid-item-cond">
+			<script>	
+				// updateCondition()
+			</script>
+			<p id = "cond_result"></p>
+		</div>
+		<div class="grid-item-temp-data">
+				<h2 class = "temp-switch-title">FEELS LIKE:</h2>
+				<div class="temperature-controls">
+					<button type="button" class="tempbutton" id="uppie">☝🏽</button>
+					<button type="button" class="tempbutton" id="downie">👇🏽</button>
+				</div>
+				<div class="display-temp" id="temp_result"></div>
+		</div>
+		<div class="grid-item-temp">
+			<p id="you_are_here"></p>
+		</div>
+		<div class="grid-item-field-data">
+				<h2 class = "city-switch-title">BASED IN:</h2>
+				<div class="cityContent">
+						<div class="cityControls">
+								<input id="cityName" class="cityDisplay" type="text" value="Atlanta">
+								<button onclick="resetCity()" id="city_reset" class="city_button" title="Reset Location">🔄</button>
+								<button onclick="updateWeather()" id="update_weather" class="city_button" title="Update Weather">*️⃣</button>
+						</div>
+				</div>
+		</div>
+		<div class="grid-item-field">
+			<p id="temp_field"></p>
+		</div>
+	</div> 
+	<script src="src/index.js"></script>
 </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,9 @@
 {
-  "dependencies": {
-    "axios": "^0.27.2"
-  }
+      "dependencies": {
+            "axios": "^0.27.2"
+      },
+      "devDependencies": {
+            "gh-pages": "^4.0.0",
+            "parcel-bundler": "1.12.5"
+      }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,213 @@
+// LOCATION
+
+currentCity = document.getElementById('cityName').value;
+
+const updateCity = () => {
+  let inputCity = document.getElementById('cityName').value;
+  let showCity = document.getElementById('setCity');
+  showCity.innerHTML = inputCity;
+  currentCity = inputCity;
+};
+
+const resetCity = () => {
+  let cityInput = document.getElementById('cityName');
+  cityInput.value = 'Atlanta';
+  updateCity();
+};
+
+// CONDITIONS
+
+let selectConditions = document.querySelectorAll('input[type="radio"]');
+
+let condResult = document.getElementById('cond_result');
+condResult.innerHTML = '✨';
+
+const updateCondition = () => {
+  try {
+    let selected = document.querySelector(
+      "input[name='Conditions']:checked"
+    ).value;
+    condResult.innerHTML = selected;
+  } catch {}
+};
+
+// TEMP DEPENDANTS
+
+let defaultTemp = 'LOADING...';
+let currentTemp = defaultTemp;
+
+const HOW_YA_FEELIN = ['🥶', '😮‍💨', '😄', '😎', '😅', '🥵', '🤔'];
+const HILLS_ARE_ALIVE = ['🧊', '🌲', '🌷', '🌻', '🌴', '🔥', '🌎'];
+const REPO_RAINBOW = [
+  '#993BDB',
+  '#2B52FF',
+  '#0BD769',
+  '#FFE146',
+  '#FF7912',
+  '#FF0000',
+];
+
+let showField = document.getElementById('temp_field');
+let showYou = document.getElementById('you_are_here');
+
+const updateTempies = (adjustedTemp) => {
+  let tempSetting = 6;
+
+  if (adjustedTemp > 99) {
+    tempSetting = 5;
+  } else if (adjustedTemp > 79) {
+    tempSetting = 4;
+  } else if (adjustedTemp > 65) {
+    tempSetting = 3;
+  } else if (adjustedTemp > 39) {
+    tempSetting = 2;
+  } else if (adjustedTemp > 14) {
+    tempSetting = 1;
+  } else if (adjustedTemp <= 14) {
+    tempSetting = 0;
+  }
+
+  currentTemp = adjustedTemp;
+
+  showField.innerHTML = HILLS_ARE_ALIVE[tempSetting];
+  showYou.innerHTML = HOW_YA_FEELIN[tempSetting];
+  shownTemp.innerHTML = adjustedTemp;
+  document.getElementById('temp_result').style.color =
+    REPO_RAINBOW[tempSetting];
+};
+
+// TEMPERATURE
+
+let shownTemp = document.getElementById('temp_result');
+
+shownTemp.innerHTML = currentTemp;
+
+const handleAdd = () => {
+  currentTemp++;
+  shownTemp.innerHTML = currentTemp;
+
+  updateTempies(currentTemp);
+};
+
+const handleSub = () => {
+  currentTemp--;
+  shownTemp.innerHTML = currentTemp;
+
+  updateTempies(currentTemp);
+};
+
+// API CALLS
+
+const findWeather = (query) => {
+  let locationData, weatherData;
+  let modifiedLocData, modifiedWeathData;
+
+  axios
+    .get('http://127.0.0.1:5000/location', {
+      params: {
+        q: currentCity,
+        format: 'json',
+      },
+    })
+    .then((response) => {
+      locationData = response.data;
+
+      const modifyLocation = (locationData) => {
+        let latlon = [];
+        let focusLocation = locationData[0];
+
+        let focusLat = Number(focusLocation['lat']);
+        let adjustLat = focusLat.toFixed(2);
+        latlon.push(adjustLat);
+
+        let focusLon = Number(focusLocation['lon']);
+        let adjustLon = focusLon.toFixed(2);
+        latlon.push(adjustLon);
+
+        return latlon;
+      };
+
+      modifiedLocData = modifyLocation(locationData);
+
+      axios
+        .get('http://127.0.0.1:5000/weather', {
+          params: {
+            lat: modifiedLocData[0],
+            lon: modifiedLocData[1],
+            format: 'json',
+          },
+        })
+        .then((response) => {
+          weatherData = response.data;
+
+          const modifyWeather = (weatherData) => {
+            let relevantData = [weatherData['main'], weatherData['weather']];
+            let defTempCond = [];
+
+            let unmodifiedTemp = relevantData[0]['temp'];
+            let tempF = ((unmodifiedTemp - 273.15) * 9) / 5 + 32;
+            let modifiedTemp = tempF.toFixed(0);
+            defTempCond.push(modifiedTemp);
+
+            let condID = Number(relevantData[1][0]['id']);
+            let idToCond = 'sunny';
+
+            if (condID > 800) {
+              idToCond = '⛅';
+            } else if (condID === 800) {
+              idToCond = '✨';
+            } else if (condID > 700) {
+              idToCond = '⛅';
+            } else if (condID > 599) {
+              idToCond = '☃️';
+            } else {
+              idToCond = '🌈';
+            }
+
+            defTempCond.push(idToCond);
+            return defTempCond;
+          };
+
+          modifiedWeathData = modifyWeather(weatherData);
+
+          updateTempies(modifiedWeathData[0]);
+          currentTemp = modifiedWeathData[0];
+          condResult.innerHTML = modifiedWeathData[1];
+        })
+        .catch((error) => {
+          weatherData = 'An error has occured while fetching weather data.';
+        });
+    })
+    .catch((error) => {
+      locationData = 'An error has occured while fetching location data.';
+    });
+};
+
+// UPDATE WITH DATA
+const updateWeather = () => {
+  window.location.reload();
+};
+
+// REGISTERING EVENTS
+
+const registerEventHandlers = () => {
+  updateTempies(currentTemp);
+
+  const addTemp = document.getElementById('uppie');
+  addTemp.addEventListener('click', handleAdd);
+
+  const subTemp = document.getElementById('downie');
+  subTemp.addEventListener('click', handleSub);
+
+  updateCity();
+  const setCityInput = document.getElementById('cityName');
+  setCityInput.addEventListener('input', updateCity);
+
+  updateCondition();
+  selectConditions.forEach((condition) => {
+    condition.addEventListener('change', updateCondition);
+  });
+};
+
+document.addEventListener('DOMContentLoaded', registerEventHandlers);
+findWeather(currentCity);