JSDR213 · jbabs22 · Apr 17, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+    <title>Jessica's Weather Checker</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Jessica's Nifty Thrifty Weather Checker</h1>
+      <h2>Search by: City Name, US Zipcode, or UK & Canada Postal Code</h2>
+      <input type="text" placeholder="Search Here" id="textInput" />
+      <input
+        type="checkbox"
+        id="airQuality"
+        name="airQuality"
+        value="airQuality"
+      />
+      <label for="airQuality">Include air quality</label>
+      <button id="searchButton">Get Current Weather</button>
+      <div id="weather"></div>
+    </div>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,61 @@
+const apiKey = "2181667f57e545ee8c1220624230504";
+
+const searchButton = document.getElementById("searchButton");
+const aqiAnswer = "yes";
+const input = document.getElementById("textInput");
+const weatherElement = document.getElementById("weather");
+const airQuality = document.getElementById("airQuality").checked;
+
+const getWeather = async () => {
+  const weatherLog = await axios.get(
+    `http://api.weatherapi.com/v1/current.json?key=2181667f57e545ee8c1220624230504&q=Jacksonville&aqi=yes`
+  );
+  console.log(weatherLog);
+};
+
+// Functions & Event Listeners - Search Input to Find Current Weather Data
+searchButton.addEventListener("click", async () => {
+  let searchInput = input.value;
+
+  // Get the value of the 'checked' attribute of the 'airQuality' element
+  const airQuality = document.getElementById("airQuality").checked;
+
+  axios
+    .get(
+      `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${searchInput}&aqi=${aqiAnswer}`
+    )
+    .then((searchResponse) => {
+      console.log(searchResponse);
+
+      const weatherData = {
+        city: searchResponse.data.location.name,
+        state: searchResponse.data.location.region,
+        country: searchResponse.data.location.country,
+        localTime: searchResponse.data.location.localtime,
+        timezone: searchResponse.data.location.tz_id,
+        temperature: searchResponse.data.current.temp_f,
+        feelsliketemp: searchResponse.data.current.feelslike_f,
+        conditionIcon: searchResponse.data.current.condition.icon,
+        conditionText: searchResponse.data.current.condition.text,
+        airQuality: Math.round(searchResponse.data.current.air_quality.co),
+      };
+
+      weatherElement.innerHTML = `
+          <p>City: ${weatherData.city}</p>
+          <p>Region: ${weatherData.state}</p>
+          <p>Country: ${weatherData.country}</p>
+          <p>Local Time: ${weatherData.localTime}</p>
+          <p>Timezone: ${weatherData.timezone}</p>
+          <p>Temperature: ${weatherData.temperature}°F | Feels Like ${
+        weatherData.feelsliketemp
+      }°F</p>
+          <p><img src = https:${weatherData.conditionIcon}></p>
+          <p>${weatherData.conditionText} ${
+        airQuality ? `<p>Air quality (co): ${weatherData.airQuality}</p>` : ""
+      }`;
+    })
+    .catch((error) => {
+      console.error(error);
+      alert("Unable to fetch weather data. Please try again later.");
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,42 @@
+@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Prompt:wght@500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Dongle:wght@300&family=Prompt:wght@500&display=swap");
+
+body {
+  background: linear-gradient(90deg, black 0%, gray 100%);
+}
+
+#weather {
+  /* text-align: left; */
+  font-family: "Bree Serif", serif;
+  font-size: 1rem;
+  color: bisque;
+}
+
+.container {
+  color: white;
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+  font-family: "Bree Serif", serif;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-family: "Dongle", sans-serif;
+  color: bisque;
+}
+
+input[type="text"],
+label {
+  margin-right: 0.5rem;
+}
+
+button {
+  margin-left: 0.5rem;
+}