joinpursuit · laura-williams-1 · Jan 20, 2023 · Jan 23, 2023 · Jan 23, 2023 · Jan 23, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,11 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/integration/test-app.js → cypress/e2e/test-app.cy.js b/cypress/integration/test-app.js → cypress/e2e/test-app.cy.js
diff --git a/cypress/support/index.js → cypress/support/e2e.js b/cypress/support/index.js → cypress/support/e2e.js
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <script defer src="main1.js"></script>
+  </head>
+  <body>
+    <header class="header">
+      <h1>Weather App</h1>
+      <form id="weather-form">
+        <label for="location">Pick a Location</label>
+        <input type="text" id="user-input" name="location" />
+        <input type="submit" value="Get Weather" />
+      </form>
+    </header>
+    <aside class="aside">
+      <!-- I am Aside -->
+
+      <form  hidden 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>
+    <main class="main">
+      <p id="start-message">Choose a location to view the weather.</p>
+      <aside>
+        <div hidden id="main-display">
+        <article id="current">
+          <img />
+          <h3 id="location-header"></h3>
+          <p id="input-location"></p>
+          <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>
+        </div>
+        </article>
+        <div id="Avg-temps">
+        <article hidden id="today">
+          <h3>Today</h2>
+          <p id="today-avg"></p>
+          <p id="today-max"></p>
+          <p id="today-min"></p>
+        </article>
+        <article hidden id="tomorrow">
+          <h3>Tomorrow</h2>
+          <p id="tomorrow-avg"></p>
+          <p id="tomorrow-max"></p>
+          <p id="tomorrow-min"></p>
+        </article>
+        <article hidden id="day-after">
+          <h3>Day After Tomorrow</h2>
+          <p id="after-avg"></p>
+          <p id="after-max"></p>
+          <p id="after-min"></p>
+
+        </article>
+      </div>
+      </aside>
+    </main>
+    <aside class="previous">
+      <section>
+        <h4>Previous Searches</h4>
+        <ul id="list">
+          <p id="previous-start"> No previous searches.</p>
+        </ul>
+      </section>
+    </aside>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,147 @@
+document.querySelector("form").addEventListener("submit", (event) => {
+  event.preventDefault();
+  let inputSearch = document.getElementById("user-input").value;
+  // console.log(inputSearch[0].current_condition);
+
+  console.log(
+    `https://v3.wttr.in/${inputSearch}?format=j1`,
+    "HELLO FROM THE OTHER SIDE"
+  );
+  fetch(`https://v3.wttr.in/${event.target.location.value}?format=j1`)
+    .then((result) => {
+      console.log("Fetch was successful");
+      return result.json();
+    })
+    .then((weather) => {
+      //article for current search
+      let current = document.getElementById("current");
+      //event.target.weather_submit.value;
+      // console.log(current);
+      document.getElementById("current");
+
+      let currentHeading = document.createElement("h2");
+      currentHeading.innerHTML = `<b>${weather.nearest_area[0].areaName[0].value}</b>`;
+
+      //area for current search w. html
+      let searchArea = document.createElement("p");
+      // searchArea with HTML
+      searchArea.innerHTML = `<b>Area: </b>${weather.nearest_area[0].areaName[0].value}`;
+
+      //create region element
+      let searchRegion = document.createElement("p");
+      //region innerHTML
+      searchRegion.innerHTML = `<b>Region: </b>${weather.nearest_area[0].region[0].value}`;
+
+      // create country HTML
+      let searchCounty = document.createElement("p");
+      searchCounty.innerHTML = `<b>Country: </b>${weather.nearest_area[0].country[0].value}`;
+
+      //Create currently & currently inner html
+      let searchCurrentF = document.createElement("p");
+      searchCurrentF.innerHTML = `<b> Currently: </b> Feels Like ${weather.weather[2].mintempF}° F`;
+
+      //joininga all elements in current article
+      current.append(
+        currentHeading,
+        searchArea,
+        searchRegion,
+        searchCounty,
+        searchCurrentF
+      );
+
+      //-----adding CHANCE OF SUN + RAIN + SNOW-----
+
+      //creating chance of sun element + adding text
+      let chanceOfSun = document.createElement("p");
+      chanceOfSun.innerHTML = `<b> Chance of Sunshine: </b>${weather.weather[0].hourly[0].chanceofsunshine}`;
+      console.log(chanceOfSun.innerHTML);
+      //creating chance of rain element + adding text
+      let chanceOfRain = document.createElement("p");
+      chanceOfRain.innerHTML = `<b> Chance of Rain: </b>${weather.weather[0].hourly[0].chanceofrain}`;
+
+      //creating chance of snow element + adding text
+      let chanceOfSnow = document.createElement("p");
+      chanceOfSnow.innerHTML = `<b> Chance of Snow: </b>${weather.weather[0].hourly[0].chanceofsnow}`;
+
+      //adding all those to first article,
+      current.append(chanceOfSun, chanceOfRain, chanceOfSnow);
+      //-------Aritcle for Today section ---
+
+      //gets article for today section
+      let article = document.getElementById("today");
+      //adds an header for "today" + adding text
+      let articleHeader = document.createElement("h2");
+      articleHeader.innerHTML = `<b> Today </b>`;
+
+      // creating TodayAvgTemp + inner HTML
+      let todayAvgTemp = document.createElement("p");
+      todayAvgTemp.innerHTML = `<b> Average Temperature: </b> ${weather.weather[0].avgtempF}°F`;
+
+      // creating TodayMaxTemp + inner HTML
+      let todayMaxTemp = document.createElement("p");
+      todayMaxTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[0].maxtempF}°F`;
+
+      // creating TodayMinTemp + inner HTML
+      let todayMinTemp = document.createElement("p");
+      todayMinTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[0].mintempF}°F`;
+
+      // joining all lelemnts for today section
+      article.append(articleHeader, todayAvgTemp, todayMaxTemp, todayMinTemp);
+
+      //--------------Article for TOMORROW-----------
+      //gets article for TOMORROW  section
+      let tomorrow = document.getElementById("tomorrow");
+
+      //adds an header for "TOMORROW" + adding text
+      let tomorrowHeader = document.createElement("h2");
+      tomorrowHeader.innerHTML = `<b>Tomorrow</b>`;
+
+      // creating TomorrowAvgTemp + inner HTML
+      let tmmAvgTemp = document.createElement("p");
+      tmmAvgTemp.innerHTML = `<b> Average Temperature: </b> ${weather.weather[1].avgtempF}°F`;
+
+      // creating TomorrowMaxTemp + inner HTML
+      let tmmMaxTemp = document.createElement("p");
+      tmmMaxTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[1].maxtempF}°F`;
+
+      // creating TomorrowMinTemp + inner HTML
+      let tmmMinTemp = document.createElement("p");
+      tmmMinTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[1].mintempF}°F`;
+
+      // joining all elements into TOMORROW'S article
+      tomorrow.append(tomorrowHeader, tmmAvgTemp, tmmMaxTemp, tmmMinTemp);
+
+      //--------------DAY AFTER TOMOROW-----------
+
+      //gets article for TOMORROW  section
+      let dayAfter = document.getElementById("day-after");
+      //adds an header for "day after" + adding text
+      let dayAferHeading = document.createElement("h2");
+      dayAferHeading.innerHTML = `<b>Day After Tomorrow</b>`;
+
+      // creating dayAfterAvgTemp + inner HTML
+      let dayAfteryAvgTemp = document.createElement("p");
+      dayAfteryAvgTemp.innerHTML = `<b> Average Temperature: </b> ${weather.weather[2].avgtempF}°F`;
+
+      // creating dayAfterMaxTemp + inner HTML
+      let dayAfterMaxTemp = document.createElement("p");
+      dayAfterMaxTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[2].maxtempF}°F`;
+
+      // creating dayAfterMinTemp + inner HTML
+      let dayAfterMinTemp = document.createElement("p");
+      dayAfterMinTemp.innerHTML = `<b> Max Temperature: </b> ${weather.weather[2].mintempF}°F`;
+      // joining all element into day after article
+      dayAfter.append(
+        dayAferHeading,
+        dayAfteryAvgTemp,
+        dayAfterMaxTemp,
+        dayAfterMinTemp
+      );
+      //------Creatung Aside ----
+      console.log(weather, "Finally properly formatted weather");
+    });
+});
+
+// const inputSearch = document.querySelector(input[(type = "text")]);
+
+// console.log(inputSearch);