joinpursuit · Olayinka19 · Apr 21, 2022 · Jun 21, 2022 · May 17, 2023 · Jun 17, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!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" />
+    <title>Weather App</title>
+    <script defer src="main.js"></script>
+    <link rel="stylesheet" href="./main.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Weather App</h1>
+      <form>
+        <label for="location">Pick a Location</label>
+        <input type="text" id="location" name="location" />
+        <input type="submit" value="Get Weather" />
+      </form>
+    </header>
+    <main>
+      <article id="found">
+        <p id="message">Choose a location to view the weather.</p>
+        <section id="display" class="hidden">
+          <img>
+          <h2 id="addy"></h2>
+          <p id="area"></p>
+          <p id="region"></p>
+          <p id="country"></p>
+          <p id="currently"></p>
+
+          <p id="sunshine"></p>
+          <p id="rain"></p>
+          <p id="snow"></p>
+        </section>
+      </article>
+      <aside id="live">
+        <article class="hidden" id="page1">
+          <h3>Today</h3>
+          <p id="mean1"></p>
+          <p id="minor1"></p>
+          <p id="major1"></p>
+        </article>
+        <article class="hidden" id="page2">
+          <h3>Tomorrow</h3>
+          <p id="mean2"></p>
+          <p id="minor2"></p>
+          <p id="major2"></p>
+        </article>
+        <article class="hidden" id="page3">
+          <h3>Day After Tomorrow</h3>
+          <p id="mean3"></p>
+          <p id="minor3"></p>
+          <p id="major3"></p>
+        </article>
+      </aside>
+    </main>
+    <aside id="right">
+        <section>
+          <h4>Previous Searches</h4>
+          <ul id="list">
+            <p id="previous">No previous searches.</p>
+          </ul>
+        </section>
+      </aside>
+
+    <aside id="left">
+      <form id="convert">
+        <div>
+        <label for="temp-to-convert">Convert the temperature:</label>
+        <input type="number" id="temp-to-convert"></input>
+        </div>
+
+        <div>
+        <label for="to-c">To Celsius</label>
+        <input type="radio" id="to-c" name="convert-temp" value="c" />
+        </div>
+
+        <div>
+        <label for="to-f">To Fahrenheit</label>
+        <input type="radio" id="to-f" name="convert-temp" value="f" />
+        </div>
+
+        <input type="submit"></input>
+        <div>
+        <h4 id="converted"></h4>
+        </div>
+      </form>
+
+    </aside>
+
+  </body>
+</html>
diff --git a/main.css b/main.css
@@ -0,0 +1,76 @@
+.hidden {
+  display: none;
+}
+
+body {
+  background-image:url('https://images.unsplash.com/reserve/bOvf94dPRxWu0u3QsPjF_tree.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1476&q=80');
+  /* background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fassets.entrepreneur.com%2Fcontent%2F3x2%2F2000%2F1661266965-shutterstock-2144631851.jpg&f=1&nofb=1&ipt=ebcb035da714baf9d88a8c5caabe617d577d0b612b253a2fa60a6e9d72e4e014&ipo=images');  */
+  display: grid;
+  grid-template-areas:
+    "header header header header header"
+    "left main main main aside"
+    "left days days days aside";
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: 130px 1fr 1fr 1fr;
+  background-repeat: no-repeat;
+}
+
+
+main {
+  grid-area: main;
+  text-align: center;
+  margin: 10px;
+}
+
+#found{
+  padding-top: 20px;
+  border: 1px solid green;
+  margin-bottom: 10px;
+  background-color: rgb(227, 224, 224)
+}
+header {
+  grid-area: header;
+  background-color: rgb(48, 126, 100);
+  border: 1px solid black;
+  color: white;
+  text-align: center;
+
+}
+
+#page1 {
+  text-align: center;
+  border: 1px solid green;
+}
+#page2 {
+  text-align: center;
+  border: 1px solid green;
+}
+#page3 {
+  text-align: center;
+  border: 1px solid green;
+}
+
+#right {
+  grid-area: aside;
+}
+
+#left {
+  grid-area: left;
+  margin-top: 10px;
+
+}
+
+
+#live {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  background-color: rgb(227, 224, 224);
+}
+
+div{
+  margin-bottom: 10px;
+}
+
+#to-f{
+  align-items: right;
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,141 @@
+let BASE_URL = "http://wttr.in/";
+
+const form = document.querySelector("form");
+const input = document.querySelector("#location");
+
+const image = document.querySelector("img");
+const found = document.querySelector("#found");
+const message = document.querySelector("#message");
+const display = document.querySelector("#display");
+const addy = document.querySelector("#addy");
+const area = document.querySelector("#area");
+const region = document.querySelector("#region");
+const country = document.querySelector("#country");
+const currently = document.querySelector("#currently");
+const sunshine = document.querySelector("#sunshine");
+const rain = document.querySelector("#rain");
+const snow = document.querySelector("#snow");
+
+
+const right = document.querySelector("#right");
+const list = document.querySelector("#list");
+const previous = document.querySelector("#previous");
+
+const page1 = document.querySelector("#page1");
+const page2 = document.querySelector("#page2");
+const page3 = document.querySelector("#page3");
+const mean1 = document.querySelector("#mean1");
+const minor1 = document.querySelector("#minor1");
+const major1 = document.querySelector("#major1");
+const mean2 = document.querySelector("#mean2");
+const minor2 = document.querySelector("#minor2");
+const major2 = document.querySelector("#major2");
+const mean3 = document.querySelector("#mean3");
+const minor3 = document.querySelector("#minor3");
+const major3 = document.querySelector("#major3");
+
+const left = document.querySelector("#left");
+const convert = document.querySelector("#convert");
+const tempToConvert = document.querySelector("#temp-to-convert");
+const toC = document.querySelector("#to-c");
+const toF = document.querySelector("#to-f");
+const converted = document.querySelector("#converted");
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  let userInput = input.value;
+  let city = userInput;
+  // city and UserInput are  equal to the same thing
+  fetch(`https://wttr.in/${userInput}?format=j1`)
+  // always convert to json again even if it's in json format. or it's going to be in json format.
+    .then((response) => response.json())
+    .then((response) => {
+      let weatherFile = response;
+
+
+
+      message.classList.add("hidden");
+      // the classList.add removes the message once the choosen location has been clicked.
+      display.classList.remove("hidden");
+      // then we use this classLis.remove to make it display(Not hidden) the content.
+      addy.innerHTML = city;
+      // this is what the user typed in the input.
+      if (city != `${weatherFile.nearest_area[0].areaName[0].value}`) {
+        area.innerHTML = `<h3>Nearest Area: </h3>${weatherFile.nearest_area[0].areaName[0].value}`;
+      } else {
+        area.innerHTML = `<b>Area: </b>${weatherFile.nearest_area[0].areaName[0].value}`;
+      }
+      region.innerHTML = `<strong>Region: </strong>${weatherFile.nearest_area[0].region[0].value}`;
+      country.innerHTML = `<strong>Country: </strong>${weatherFile.nearest_area[0].country[0].value}`;
+      currently.innerHTML = `<strong>Currently: </strong>Feels Like ${weatherFile.current_condition[0].FeelsLikeF}°F`;
+      sunshine.innerHTML = `<strong>Chance of Sunshine: </strong> ${weatherFile.weather[0]["hourly"][0]["chanceofsunshine"]}`;
+      rain.innerHTML = `<strong>Chance of Rain: </strong> ${weatherFile.weather[0]["hourly"][0]["chanceofrain"]}`;
+      snow.innerHTML = `<strong>Chance of Snow: </strong> ${weatherFile.weather[0]["hourly"][0]["chanceofsnow"]}`;
+
+
+      page1.classList.remove("hidden");
+      page2.classList.remove("hidden");
+      page3.classList.remove("hidden");
+
+      mean1.innerHTML = `<strong>Average Temperature: </strong> ${weatherFile.weather[0].avgtempF}°F`;
+      minor1.innerHTML = `<strong>Max Temperature: </strong> ${weatherFile.weather[0].maxtempF}°F`;
+      major1.innerHTML = `<strong>Min Temperature: </strong> ${weatherFile.weather[0].mintempF}°F`;
+
+      mean2.innerHTML = `<strong>Average Temperature: </strong> ${weatherFile.weather[1].avgtempF}°F`;
+      minor2.innerHTML = `<strong>Max Temperature: </strong> ${weatherFile.weather[1].maxtempF}°F`;
+      major2.innerHTML = `<strong>Min Temperature: </strong> ${weatherFile.weather[1].mintempF}°F`;
+
+      mean3.innerHTML = `<strong>Average Temperature: </strong> ${weatherFile.weather[2].avgtempF}°F`;
+      minor3.innerHTML = `<strong>Max Temperature: </strong> ${weatherFile.weather[2].maxtempF}°F`;
+      major3.innerHTML = `<strong>Min Temperature: </strong> ${weatherFile.weather[2].mintempF}°F`;
+
+
+      previous.classList.add("hidden");
+      const listItem = document.createElement("li");
+      listItem.innerHTML = `<a href="#${userInput}">${city}</a> - ${weatherFile.current_condition[0].FeelsLikeF}°F`;
+      list.append(listItem);
+
+      if (weatherFile.weather[0]["hourly"][0]["chanceofsunshine"] > 50) {
+
+
+        image.classList.remove("hidden");
+        image.setAttribute("src", "./assets/icons8-summer.gif");
+        image.setAttribute("alt", "sun");
+        display.prepend(image);
+      } else if (weatherFile.weather[0]["hourly"][0]["chanceofrain"] > 50) {
+
+        image.classList.remove("hidden");
+        image.setAttribute("src", "./assets/icons8-torrential-rain.gif");
+        image.setAttribute("alt", "rain");
+        display.prepend(image);
+      } else if (weatherFile.weather[0]["hourly"][0]["chanceofsnow"] > 50) {
+
+
+        image.classList.remove("hidden");
+        image.setAttribute("src", "./assets/icons8-light-snow.gif");
+        image.setAttribute("alt", "snow");
+        display.prepend(image);
+      } else {
+        image.classList.add("hidden");
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  form.reset();
+});
+
+
+convert.addEventListener("submit", (e) => {
+  e.preventDefault();
+
+  let found = 0;
+  if (toC.checked) {
+    found = (tempToConvert.value - 32) * (5 / 9);
+  }
+  if (toF.checked) {
+    found = (tempToConvert.value * 9) / 5 + 32;
+  }
+
+  converted.innerHTML = found.toFixed(2);
+});