joinpursuit · samfigueroa92 · Apr 14, 2022 · Apr 16, 2022 · Apr 19, 2022 · May 16, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <script defer src="main.js"></script>
+    <title>Weather App</title>
+</head>
+<body>
+    <header class="header">
+        <h1>Weather App</h1>
+    <label>
+        <form class="request">
+            Pick a location
+            <input type="text" name="input"/>
+            <input type="submit" value="Get Weather"/>
+        </form>
+    </label>
+    <aside>
+        <form class="converter">
+            <label>
+                Fahrenheit
+                <input type='radio' id='temp-to-f' name="temp" checked/>
+            </label>
+            <label>
+                Celsius
+                <input type='radio' id='temp-to-c' name='temp' />
+            </label>
+        </form>
+    </aside>
+    </header>
+    <main id="location">
+        <article class="current-weather">
+            <p>Choose a location to view the weather.</p>
+        </article>
+        <aside id="three-day"></aside>
+    </main>
+    <aside class="previous">
+        <section>
+            <h4>Previous Searches</h4>
+            <!-- <p>No previous searches</p> -->
+            <select id='list' name='list'>
+                <option value="no-previous">No previous searches</option>
+            </select>
+            <!-- <ul></ul> -->
+        </section>
+    </aside>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,165 @@
+const form = document.querySelector(".request");
+
+const displayArea = document.querySelector(".current-weather");
+const firstP = document.querySelector(".current-weather p");
+
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  const input = event.target.input.value;
+  //   console.log(input);
+  getWeather(input);
+  form.reset();
+});
+
+let weather;
+
+function getWeather(input) {
+  fetch(`https://wttr.in/${input}?format=j1`)
+    .then((res) => res.json())
+    .then((data) => {
+      weather = data;
+      // console.log(weather);
+      displayWeather(weather, input);
+      displayThreeDays(weather);
+
+      // previous code for ul & li
+      //document.querySelector("aside section ul li")
+
+      if (!document.querySelector("aside section select option")) {
+        addListItem(input, weather);
+      } else {
+        removeDulplicateLi(input);
+      }
+
+    });
+}
+
+const area = document.createElement("p");
+const region = document.createElement("p");
+const country = document.createElement("p");
+const currently = document.createElement("p");
+
+function displayWeather(weather, input) {
+  if (
+    input.toLowerCase() ===
+    weather.nearest_area[0].areaName[0].value.toLowerCase()
+  ) {
+    area.innerHTML =
+      "<strong>Area:</strong> " + weather.nearest_area[0].areaName[0].value;
+  } else {
+    area.innerHTML =
+      "<strong>Nearest Area:</strong> " +
+      weather.nearest_area[0].areaName[0].value;
+  }
+
+  region.innerHTML =
+    "<strong>Region: </strong>" + weather.nearest_area[0].region[0].value;
+  country.innerHTML =
+    "<strong>Country: </strong>" + weather.nearest_area[0].country[0].value;
+  currently.innerHTML =
+    "<strong>Currently:</strong> Feels like " +
+    weather.current_condition[0].FeelsLikeF +
+    "\u00B0F";
+
+  if (!document.querySelector("main article h2")) {
+    const h2 = document.createElement("h2");
+    h2.textContent = input;
+    firstP.replaceWith(h2);
+  } else {
+    document.querySelector("main article h2").textContent = input;
+  }
+}
+
+displayArea.append(area, region, country, currently);
+
+const today = document.createElement("article");
+const tomorrow = document.createElement("article");
+const dayAfter = document.createElement("article");
+const threeDay = document.querySelector("#three-day");
+
+threeDay.append(today, tomorrow, dayAfter);
+
+function displayThreeDays(weather) {
+  today.innerHTML = `<strong>Today</strong> <br /><br /> <strong>Average Temperature:</strong> ${weather.weather[0].avgtempF}\u00B0F <br /> <br /><strong>Max Temperature:</strong> ${weather.weather[0].maxtempF}\u00B0F <br /><br /> <strong>Min Temperature:</strong> ${weather.weather[0].mintempF}\u00B0F`;
+
+  today.style.border = "2px solid white";
+  today.style.backgroundColor = "rgb(146, 188, 244)";
+  today.style.borderRadius = "25px";
+
+  tomorrow.innerHTML = `<strong>Tomorrow</strong> <br /><br /> <strong>Average Temperature:</strong> ${weather.weather[1].avgtempF}\u00B0F <br /> <br /><strong>Max Temperature: </strong> ${weather.weather[1].maxtempF}\u00B0F <br /><br /> <strong>Min Temperature: </strong> ${weather.weather[1].mintempF}\u00B0F`;
+
+  tomorrow.style.border = "2px solid white";
+  tomorrow.style.backgroundColor = "rgb(146, 188, 244)";
+  tomorrow.style.borderRadius = "25px";
+
+  dayAfter.innerHTML = `<strong>Day After Tomorrow</strong> <br /><br /> <strong>Average Temperature:</strong> ${weather.weather[2].avgtempF}\u00B0F <br /><br /> <strong>Max Temperature: </strong> ${weather.weather[2].maxtempF}\u00B0F <br /><br /> <strong>Min Temperature: </strong> ${weather.weather[2].mintempF}\u00B0F`;
+
+  dayAfter.style.border = "2px solid white";
+  dayAfter.style.backgroundColor = "rgb(146, 188, 244)";
+  dayAfter.style.borderRadius = "25px";
+}
+
+// const previousList = document.querySelector(".previous ul");
+// const previousP = document.querySelector(".previous p");
+
+const select = document.querySelector('#list');
+const defaultOption = document.querySelector('option');
+
+function addListItem(input, weather) {
+
+  const option = document.createElement('option');
+  option.value = input;
+  option.text = `${input} - ${weather.current_condition[0].FeelsLikeF}\u00B0F`;
+
+  select.append(option);
+  // defaultOption.replaceWith(defaultOption, option);
+
+//previous code for ul & li
+  // const searchLink = document.createElement("a");
+  // const listItem = document.createElement("li");
+
+  // searchLink.innerHTML = `<a href='#'>${input}</a> - ${weather.current_condition[0].FeelsLikeF}\u00B0F`;
+
+  // listItem.append(searchLink);
+  // previousP.remove();
+  // previousList.prepend(listItem);
+
+  // searchLink.addEventListener("click", (event) => {
+  //   getWeather(event.target.textContent);
+  // });
+}
+
+select.addEventListener('change', (event) => {
+  getWeather(event.target.value);
+})
+
+function removeDulplicateLi(input) {
+
+  const searchList = document.querySelectorAll("aside section select option");
+  let hasInput = false;
+
+  searchList.forEach((el) => {
+    if (el.textContent.includes(input)) {
+      hasInput = true;
+    }
+  });
+
+  if (!hasInput) {
+    addListItem(input, weather);
+  }
+
+  //previous code for ul & li
+  // const searchList = document.querySelectorAll("aside section ul li a");
+  // let hasInput = false;
+
+  // searchList.forEach((el) => {
+  //   if (el.textContent.includes(input)) {
+  //     hasInput = true;
+  //   }
+  // });
+
+  // if (!hasInput) {
+  //   addListItem(input, weather);
+  // }
+}
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/style.css b/style.css
@@ -0,0 +1,89 @@
+html {
+  background-image: url("https://wallpaperaccess.com/full/1249894.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: aliceblue;
+  background-attachment: fixed;
+}
+
+body {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  column-gap: 10px;
+  row-gap: 10px;
+  padding: 10px;
+  margin: auto;
+}
+
+.header {
+  background-color: rgb(146, 188, 244);
+  border-radius: 25px;
+  border: 3px solid white;
+  color: black;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  grid-column: 2/7;
+  font-weight: bold;
+  text-align: center;
+  padding: 25px;
+  opacity: 0.8;
+}
+
+#location {
+  grid-column: 2/6;
+  overflow: hidden
+}
+
+.current-weather {
+  border: 2px solid white;
+  border-radius: 25px;
+  color: black;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  background-color: rgb(146, 188, 244);
+  text-align: center;
+  padding: 25px;
+  opacity: 0.8;
+}
+
+.previous {
+  grid-column: 6/7;
+  height: auto;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+}
+
+.request {
+  font-size: large;
+}
+
+#three-day {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  text-align: center;
+  padding: 10px;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  opacity: 0.8;
+  column-gap: 5px;
+}
+
+@media screen and (max-width:768px){
+  #three-day{
+    grid-template-columns: 1fr;
+    row-gap: 5px;
+    min-width: 300px;
+  }
+
+  .previous li{
+    list-style: none;
+    margin-left: -40px;
+    text-align: center;
+  }
+
+  #location{
+    min-width: 300px;
+  }
+
+  header{
+    min-width: 300px;
+  }
+
+}