joinpursuit · AdrianBurke1 · Jan 4, 2023 · Jan 9, 2023 · Jan 9, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!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>
+            <label for="location">Pick a Location</label>
+            <input type="text" name="location"/>
+            <input type="submit" value="Get Weather"/>
+        </form>
+    </header>
+    <aside class="aside">
+
+    </aside>
+    <main class="main">
+        <article>
+            Choose a location to view the weather.
+        </article>
+        <aside>
+            <!-- give articals names Today, Tomorrow, Day After  -->
+            <article class="today">  </article>
+            <article class="tomorrow">  </article>
+            <article class="dayaftertomorrow">  </article>
+        </aside>
+    </main>
+
+    <aside class="previous">
+        <section>
+            <h4>Previous Searches</h4>
+            <ul class="searches">
+                <p>No previous searches.</p>
+                <!-- search name and feels like temperature goes here -->
+            </ul>
+
+        </section>
+    </aside>
+
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,331 @@
+document.querySelector("form").addEventListener("submit", (event) => {
+
+    event.preventDefault()
+
+    console.log(`https://v3.wttr.in/${event.target.location.value}?format=j1`, "HELLO FROM THE OTHER SIDE")
+
+    fetch(`https://wttr.in/${event.target.location.value}?format=j1`).then(result => {
+
+        console.log("Fetch was successful")
+
+        return result.json()
+
+    }).then(weather => {
+
+        // we need to return what we right inside submit box
+        // event.target would be form we selected & location would be specific text .value would be whats in the text
+        let searchLocation = event.target.location.value
+        // setting value to empty string / after searching previous search is delted from search bar
+         event.target.location.value = ""
+
+        // storing article from HTML / Just getting the empty article
+         let searchResult = document.querySelector("article") 
+        // set to be empty 
+        searchResult.innerHTML = ""
+        let h2 = document.createElement("h2")
+        // h2 tag put search location as text
+        h2.textContent = searchLocation
+        // attached search to article we've made
+        searchResult.append(h2)
+
+        // data from Api (AREA NAME )
+        let area = weather.nearest_area[0].areaName[0].value
+        // creating empty P tag 
+        let areaP = document.createElement("p")
+        // setting the text content to be equaled data 
+            areaP.textContent = `Area: ${area}`
+        // attaching P tag to article 
+        searchResult.append(areaP)
+
+        //  data from Api (REGION)
+        let region = weather.nearest_area[0].region[0].value
+
+        // Creating empty P tag for Region
+        let regionP = document.createElement("p")
+
+        // setting the text content to be equaled data  
+        regionP.textContent = `Region: ${region}`
+       // attaching P tag to article 
+        searchResult.append(regionP)
+
+        //  data from Api (Country)
+        let country = weather.nearest_area[0].country[0].value
+
+        // Creating empty P tag for Country
+        let countryP = document.createElement("p")
+
+        // setting the text content to be equaled data  
+        countryP.textContent = `Country: ${country}`
+       // attaching P tag to article 
+        searchResult.append(countryP)
+
+        let feelsLike = weather.current_condition[0].FeelsLikeF
+
+        let feelsLikeP = document.createElement("p")
+
+        feelsLikeP.textContent = `Currently: Feels Like ${feelsLike}°F`
+
+        searchResult.append(feelsLikeP)
+
+        let firstAvg = weather.weather[0].avgtempF
+
+        let firstAvgP = document.createElement("p")
+
+        firstAvgP.textContent = `Average Temperature: ${firstAvg}°F`
+
+        //  selecting empty articles in HTML 
+        let today = document.querySelector(".today")
+        let tomorrow = document.querySelector(".tomorrow")
+        let dayaftertomorrow = document.querySelector(".dayaftertomorrow")
+
+        // put this HTML in the HTML file
+        // _________________________________________________
+        today.innerHTML = "<h2> Today </h2>"
+
+        today.append(firstAvgP)
+
+        let firstMax = weather.weather[0].maxtempF
+
+        let firstMaxP = document.createElement("p")
+
+        firstMaxP.textContent = `Max Temperature: ${firstMax}°F`
+
+        today.append(firstMaxP)
+
+        let firstMin = weather.weather[0].mintempF
+
+        let firstMinP = document.createElement("p")
+
+        firstMinP.textContent = `Min Temperature: ${firstMin}°F`
+
+        today.append(firstMinP)
+// _________________________________________________________
+    tomorrow.innerHTML = "<h2> Tomorrow </h2>"
+
+        let secondMax = weather.weather[1].maxtempF
+
+        let secondMaxP = document.createElement("p")
+
+        secondMaxP.textContent = `Max Temperature: ${secondMax}°F`
+
+        tomorrow.append(secondMaxP)
+
+        let secondAvg = weather.weather[1].avgtempF
+
+        let secondAvgP = document.createElement("p")
+
+        secondAvgP.textContent = `Average Temperature: ${secondAvg}°F`
+
+        tomorrow.append(secondAvgP)
+
+        let secondMin = weather.weather[1].mintempF
+
+        let secondMinP = document.createElement("p")
+
+        secondMinP.textContent = `Min Temperature: ${secondMin}°F`
+
+        tomorrow.append(secondMinP)
+
+        // _________________________________________________
+
+        dayaftertomorrow.innerHTML = "<h2> Day After Tomorrow </h2>"
+
+        let thirdMax = weather.weather[2].maxtempF
+
+        let thirdMaxP = document.createElement("p")
+
+        thirdMaxP.textContent = `Max Temperature: ${thirdMax}°F`
+
+        dayaftertomorrow.append(thirdMaxP)
+
+        let thirdAvg = weather.weather[2].avgtempF
+
+        let thirdAvgP = document.createElement("p")
+
+        thirdAvgP.textContent = `Average Temperature: ${thirdAvg}°F`
+
+        dayaftertomorrow.append(thirdAvgP)
+
+        let thirdMin = weather.weather[2].mintempF
+
+        let thirdMinP = document.createElement("p")
+
+        thirdMinP.textContent = `Min Temperature: ${thirdMin}°F`
+
+        dayaftertomorrow.append(thirdMinP)
+
+        let searchedList = document.querySelector(".searches");
+        // search for P tag in searches class
+        // .remove() removes tag within class
+        if(document.querySelector(".searches p")){
+        document.querySelector(".searches p").remove() 
+        }
+         if (!searchedList.textContent.includes(searchLocation)) {
+        // creating empty list item
+         let pSearch = document.createElement("li")
+        // reads HTML but dosent show in document 
+         pSearch.innerHTML = `<a class="recent">${searchLocation}</a>-${feelsLike}`
+
+         searchedList.append(pSearch)
+       // take this element with recent class and on line 173 adding click event to elemmnt with class of recent 
+         let recentLink = document.querySelector(".recent")
+
+         recentLink.addEventListener("click" , () => {
+            // take this link and search instead
+            fetch(`https://wttr.in/${recentLink.textContent}?format=j1`).then(result => {
+
+                console.log("Fetch was successful")
+
+                return result.json()
+
+            }).then(weather => {
+
+                // we need to return what we right inside submit box
+                // recentLink.textContent would be form we selected & location would be specific text .value would be whats in the text
+                let searchLocation = recentLink.textContent
+                // setting value to empty string / after searching previous search is delted from search bar
+                //  event.target.location.value = ""
+
+                // storing article from HTML / Just getting the empty article
+                 let searchResult = document.querySelector("article") 
+                // set to be empty 
+                searchResult.innerHTML = ""
+                let h2 = document.createElement("h2")
+                // h2 tag put search location as text
+                h2.textContent = searchLocation
+                // attached search to article we've made
+                searchResult.append(h2)
+
+                // data from Api (AREA NAME )
+                let area = weather.nearest_area[0].areaName[0].value
+                // creating empty P tag 
+                let areaP = document.createElement("p")
+                // setting the text content to be equaled data 
+                    areaP.textContent = `Area: ${area}`
+                // attaching P tag to article 
+                searchResult.append(areaP)
+
+                //  data from Api (REGION)
+                let region = weather.nearest_area[0].region[0].value
+
+                // Creating empty P tag for Region
+                let regionP = document.createElement("p")
+
+                // setting the text content to be equaled data  
+                regionP.textContent = `Region: ${region}`
+               // attaching P tag to article 
+                searchResult.append(regionP)
+
+                //  data from Api (Country)
+                let country = weather.nearest_area[0].country[0].value
+
+                // Creating empty P tag for Country
+                let countryP = document.createElement("p")
+
+                // setting the text content to be equaled data  
+                countryP.textContent = `Country: ${country}`
+               // attaching P tag to article 
+                searchResult.append(countryP)
+
+                let feelsLike = weather.current_condition[0].FeelsLikeF
+
+                let feelsLikeP = document.createElement("p")
+
+                feelsLikeP.textContent = `Currently: Feels Like ${feelsLike}°F`
+
+                searchResult.append(feelsLikeP)
+
+                let firstAvg = weather.weather[0].avgtempF
+
+                let firstAvgP = document.createElement("p")
+
+                firstAvgP.textContent = `Average Temperature: ${firstAvg}°F`
+
+                //  selecting empty articles in HTML 
+                let today = document.querySelector(".today")
+                let tomorrow = document.querySelector(".tomorrow")
+                let dayaftertomorrow = document.querySelector(".dayaftertomorrow")
+
+                // put this HTML in the HTML file
+                // _________________________________________________
+                today.innerHTML = "<h2> Today </h2>"
+
+                today.append(firstAvgP)
+
+                let firstMax = weather.weather[0].maxtempF
+
+                let firstMaxP = document.createElement("p")
+
+                firstMaxP.textContent = `Max Temperature: ${firstMax}°F`
+
+                today.append(firstMaxP)
+
+                let firstMin = weather.weather[0].mintempF
+
+                let firstMinP = document.createElement("p")
+
+                firstMinP.textContent = `Min Temperature: ${firstMin}°F`
+
+                today.append(firstMinP)
+        // _________________________________________________________
+            tomorrow.innerHTML = "<h2> Tomorrow </h2>"
+
+                let secondMax = weather.weather[1].maxtempF
+
+                let secondMaxP = document.createElement("p")
+
+                secondMaxP.textContent = `Max Temperature: ${secondMax}°F`
+
+                tomorrow.append(secondMaxP)
+
+                let secondAvg = weather.weather[1].avgtempF
+
+                let secondAvgP = document.createElement("p")
+
+                secondAvgP.textContent = `Average Temperature: ${secondAvg}°F`
+
+                tomorrow.append(secondAvgP)
+
+                let secondMin = weather.weather[1].mintempF
+
+                let secondMinP = document.createElement("p")
+
+                secondMinP.textContent = `Min Temperature: ${secondMin}°F`
+
+                tomorrow.append(secondMinP)
+
+                // _________________________________________________
+
+                dayaftertomorrow.innerHTML = "<h2> Day After Tomorrow </h2>"
+
+                let thirdMax = weather.weather[2].maxtempF
+
+                let thirdMaxP = document.createElement("p")
+
+                thirdMaxP.textContent = `Max Temperature: ${thirdMax}°F`
+
+                dayaftertomorrow.append(thirdMaxP)
+
+                let thirdAvg = weather.weather[2].avgtempF
+
+                let thirdAvgP = document.createElement("p")
+
+                thirdAvgP.textContent = `Average Temperature: ${thirdAvg}°F`
+
+                dayaftertomorrow.append(thirdAvgP)
+
+                let thirdMin = weather.weather[2].mintempF
+
+                let thirdMinP = document.createElement("p")
+
+                thirdMinP.textContent = `Min Temperature: ${thirdMin}°F`
+
+                dayaftertomorrow.append(thirdMinP)
+         })
+    })
+        // takes item and if it has class of recent remove it 
+        recentLink.classList.toggle("recent")
+}
+
+});
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,6 @@
   "license": "ISC",
   "devDependencies": {
     "cypress": "^9.5.2",
-    "live-server": "^1.2.1"
+    "live-server": "^1.1.0"
   }
 }