joinpursuit · JoseC620 · Jan 9, 2023
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,67 @@
+<!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="./main.js"></script>
+</head>
+<body>
+    <header class="header">
+        <h1>Weather App</h1>
+        <form id="location">
+            <label for="location">Pick a Location</label>
+            <input id="inputText"type="text" name="location" value=""/>
+            <input id="submitLocation" type="submit" value="Get Weather" />
+        </form>
+    </header>
+    <aside class="temp-conversion">
+        <form id="conversionForm">
+            <strong><label for="temp-to-convert">Convert the Temperature:</label></strong>
+            <br>
+            <br>
+                <input type="number" name="convert" id="temp-to-convert" />
+                <br>
+                <br>
+                <input type="radio" name="conv" value="C" id="to-c" />
+                <label>Celsius</label>
+            <br>
+                <input type="radio" name="conv" value="F" id="to-f" />
+                <label>Fahrenheit</label>
+            <br>
+            <br>
+                <input type="submit" value="submit" />
+                <h4 id="result"></h4>
+            </form>
+    </aside>
+    <main class="main">
+        <div class="main">
+        <article>
+            Choose a location to view the weather.
+        </article>
+        <img src="" alt="">
+        <ul></ul>
+        <ul></ul>
+        <ul></ul>
+        <ul></ul>
+        <aside class="weatherForecast">
+            <h2></h2>
+            <h2></h2>
+            <h2></h2>
+            <article></article>
+            <article></article>
+            <article></article> 
+        </aside>
+    </main>
+    <aside class="previous">
+        <section>
+            <h4>Previous Searches</h4>
+            <ul>
+                <p>No previous searches.</p>
+            </ul>
+        </section>
+    </aside>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,78 @@
+const article = document.querySelectorAll("article")
+const ul = document.querySelectorAll( "ul")
+const h2 = document.querySelector("bold")
+const aside = document.querySelectorAll("aside")
+const p = document.querySelector("p")
+const array = []
+const image = document.querySelector("img")
+document.querySelector("form").addEventListener("submit", (event) => {
+    event.preventDefault()
+     fetch(`https://wttr.in/${event.target.location.value}?format=j1`)
+     .then(result => {
+        return result.json()
+    }).then(weather => {
+        console.log(weather)
+        function chance(){
+            if(weather.weather[0].hourly[0].chanceofsunshine > 50){
+                image.setAttribute("src", "./assets/icons8-summer.gif")
+                image.setAttribute("alt", "sun")
+            } else if (weather.weather[0].hourly[0].chanceofrain > 50){
+                image.setAttribute("src", "./assets/icons8-torrential-rain.gif")
+                image.setAttribute("alt", "rain")
+            } else if (weather.weather[0].hourly[0].chanceofsnow > 50){
+                image.setAttribute("src", "./assets/icons8-light-snow.gif")
+                image.setAttribute("alt", "snow")
+            }
+        }
+        function get(){
+        let input = document.getElementById('inputText')
+            if(input.value.toLowerCase() === weather.nearest_area[0].areaName[0].value.toLowerCase()){
+                article[0].innerHTML = `<h2>${weather.nearest_area[0].areaName[0].value}<h2>`
+                chance()
+                article[0].innerHTML += `<p><strong>Area</strong>: ${weather.nearest_area[0].areaName[0].value}</p>`
+
+            } else {
+                article[0].innerHTML = `<h2>${input.value}<h2>`
+                chance()
+                article[0].innerHTML += `<p><strong>Nearest Area</strong>: ${weather.nearest_area[0].areaName[0].value}</p>`
+
+            }
+        input.value = "";
+        article[0].innerHTML += `<p><strong>Region</strong>: ${weather.nearest_area[0].region[0].value}</p><p><strong>Country</strong>: ${weather.nearest_area[0].country[0].value}</p><p><strong>Currently</strong>: Feels like ${weather.current_condition[0].FeelsLikeF}°F </p>`
+        article[0].innerHTML += `<p><strong>Chance of Sunshine</strong>: ${weather.weather[0].hourly[0].chanceofsunshine}</p><p><strong>Chance of Rain</strong>: ${weather.weather[0].hourly[0].chanceofrain}</p><p><strong>Chance of Snow</strong>: ${weather.weather[0].hourly[0].chanceofsnow}</p>`
+        const head = document.querySelectorAll('h2')
+        head[2].innerHTML = `<strong>Today</strong>`
+        head[3].innerHTML = `<strong>Tomorrow</strong>` 
+        head[4].innerHTML = `<strong>Day After Tomorrow</strong>`
+        article[1].innerHTML = `<strong>Average Temperature</strong>: ${weather.weather[0].avgtempF}°F<br><br><strong>Max Temperature</strong>: ${weather.weather[0].maxtempF}°F<br><br><strong>Min Temperature</strong>: ${weather.weather[0].mintempF}°F`
+        article[2].innerHTML = `<strong>Average Temperature</strong>: ${weather.weather[1].avgtempF}°F<br><br><strong>Max Temperature</strong>: ${weather.weather[1].maxtempF}°F<br><br><strong>Min Temperature</strong>: ${weather.weather[1].mintempF}°F`
+        article[3].innerHTML = `<strong>Average Temperature</strong>: ${weather.weather[2].avgtempF}°F<br><br><strong>Max Temperature</strong>: ${weather.weather[2].maxtempF}°F<br><br><strong>Min Temperature</strong>: ${weather.weather[2].mintempF}°F`
+        }
+        get()
+        let li = document.createElement('li')
+        if(!array.includes(weather.nearest_area[0].areaName[0].value)){
+            li.innerHTML = `<a href="">${weather.nearest_area[0].areaName[0].value}</a>:${weather.current_condition[0].FeelsLikeF}°F`
+            ul[4].append(li)
+        }
+        p.remove()
+        array.push(weather.nearest_area[0].areaName[0].value)
+        li.addEventListener("click", (event) => {
+            event.preventDefault()
+            get()
+        })
+        const conversion = document.querySelector('#conversionForm');
+        conversion.addEventListener('submit', (event) => {
+        event.preventDefault();
+        let conversion = event.target.convert.value;
+        let toC = document.querySelector('#to-c')
+        let toF = document.querySelector('#to-f')
+        if (toC.checked) {
+        conversion = (conversion - 32) * (5 / 9);
+        document.querySelector('#result').innerHTML = `${conversion.toFixed(2)}°C`;
+         } else {
+        conversion = conversion * (9 / 5) + 32;
+        document.querySelector('#result').innerHTML = `${conversion.toFixed(2)}°F`;
+        }
+        });
+    })
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "cypress": "^9.5.2",
+    "cypress": "^11.2.0",
     "live-server": "^1.2.1"
   }
 }
diff --git a/style.css b/style.css
@@ -0,0 +1,39 @@
+.header {
+    background-color: darkslategrey;
+    grid-area: header;
+}
+
+.main {
+    background-color: rgb(54, 146, 106);
+    text-align: center;
+    grid-area: main;
+}
+
+.previous {
+    background-color: wheat;
+    display: grid;
+    grid-area: previous;
+    text-decoration: underline;
+}
+
+.conversion {
+    background-color: burlywood;
+    display: grid;
+    grid-area: aside;
+}
+.weatherForecast {
+    background-color: beige;
+    display: grid;
+    grid-template-columns: "auto auto auto";
+    grid-template-rows: "auto auto auto";
+    grid-template-areas: "header header header"
+
+}
+body {
+    background-color: rgb(114, 95, 20);
+    display: grid;
+    text-align: center;
+    grid-template-columns: "auto auto auto";
+    grid-template-rows: "auto auto auto";
+    grid-template-areas: "header header header" "aside main previous";
+}