joinpursuit · SamuelBAlba · Jan 8, 2023 · Jan 8, 2023 · Jan 9, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,60 @@
+<!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 id="inputText"type="text" name="location"/>
+            <input type="submit" value="Get Weather"/>
+        </form>
+    </header>
+    <aside class="conversion">
+        <form id="conversionForm">
+            <strong> <label for="temp-to-convert">Convert the Tempature</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>
+            <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">
+        <article>
+            Choose a location to view the weather.
+        </article>
+        <aside class="forecast">
+            <article class="today"></article>
+            <article class="tomorrow"></article>
+            <article class="day"></article>
+        </aside>
+    </main>
+    <aside>
+        <section>
+            <h4>Previous Searches</h4>
+            <ul>
+                <p class="previous">No previous searches.</p>
+            </ul>
+        </section>
+    </aside>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,157 @@
+
+let array = []
+
+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 => {
+
+        document.getElementById('inputText').value = "";
+
+        let mainArticle = document.querySelector('article')
+        function getWeather(){
+        mainArticle.innerHTML =
+        `<h1 class='city'> ${weather.nearest_area[0].areaName[0].value}</h1>`
+
+        let newPTag = document.createElement('p')
+
+        newPTag.innerHTML =
+        `<span class="details"><strong>Area:</strong> ${weather.nearest_area[0].areaName[0].value}</span>
+        <br>
+        <span class="details"><strong>Region:</strong> ${weather.nearest_area[0].region[0].value}</span>
+        <br>
+        <span class="details"><strong>Country:</strong> ${weather.nearest_area[0].country[0].value}</span>
+        <br>
+        <span class="details"><strong>Currently:</strong> Feels Like ${weather.current_condition[0]['FeelsLikeF']} &#8457;</span>`
+
+        mainArticle.append(newPTag)
+
+
+        let todayTag = document.querySelector('.today')
+        let tomorrowTag = document.querySelector('.tomorrow')
+        let dayTag = document.querySelector('.day')
+
+        todayTag.innerHTML = `<h2>Today</h2>`
+
+        let pToday = document.createElement('p')
+
+        pToday.innerHTML = 
+        `<span class="today"><strong>Average Tempature:</strong> ${weather.weather[0].avgtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Max Temperature:</strong> ${weather.weather[0].maxtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Min Temperature:</strong> ${weather.weather[0].mintempF} &#8457</span>`
+
+        todayTag.append(pToday)
+
+
+        tomorrowTag.innerHTML = `<h2>Tomorrow</h2>`
+
+        let pTom = document.createElement('p')
+
+        pTom.innerHTML =
+        `<span class="today"><strong>Average Tempature:</strong> ${weather.weather[1].avgtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Max Temperature:</strong> ${weather.weather[1].maxtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Min Temperature:</strong> ${weather.weather[1].mintempF} &#8457</span>`
+
+        tomorrowTag.append(pTom)
+
+
+        dayTag.innerHTML = `<h2>Day After Tomorrow</h2>`
+
+        let dayAfterP = document.createElement('p')
+
+        dayAfterP.innerHTML = 
+        `<span class="today"><strong>Average Tempature:</strong> ${weather.weather[2].avgtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Max Temperature:</strong> ${weather.weather[2].maxtempF} &#8457</span>
+        <br>
+        <span class="today"><strong>Min Temperature:</strong> ${weather.weather[2].mintempF} &#8457</span>`
+
+        dayTag.append(dayAfterP)
+    }
+        getWeather()
+
+        let ul = document.querySelector('ul')
+        let previous = document.querySelector(".previous")
+        let li = document.createElement('li')
+
+
+        if (previous){
+            previous.remove()
+
+            li.innerHTML = `<a href="">${weather.nearest_area[0].areaName[0].value}</a> -${weather.current_condition[0]['FeelsLikeF']} &#8457;`
+        ul.append(li)
+        }
+
+        else if(!array.includes(weather.nearest_area[0].areaName[0].value)) {
+            // let li = document.createElement('li')
+
+            li.innerHTML = `<a href="">${weather.nearest_area[0].areaName[0].value}</a> -${weather.current_condition[0]['FeelsLikeF']} &#8457;`
+        ul.append(li)
+        }
+
+        array.push(weather.nearest_area[0].areaName[0].value)
+
+
+        li.addEventListener("click", (event) => {
+            event.preventDefault()
+            getWeather()
+        })
+        })
+    })
+
+
+    let conversion = document.querySelector('#conversionForm')
+    conversion.addEventListener('submit', (event) => {
+        event.preventDefault()
+
+        let convInput = event.target.convert.value
+        let toF = document.querySelector('#to-f')
+        let toC = document.querySelector('to-c')
+
+
+        if (toF.checked) {
+            convInput = convInput * (9 / 5) + 32
+            document.querySelector('#result').innerHTML = `${convInput.toFixed(2)}°F`
+
+        }else {
+            convInput = (convInput - 32) * (5 / 9)
+            document.querySelector('#result').innerHTML = `${convInput.toFixed(2)}°C`
+        }
+    })
+
+
+// article main city & area :weather.nearest_area[0].areaName[0].value 
+// Region: weather.nearest_area[0].region[0].value
+// country: weather.nearest_area[0].country[0].value
+// currently: weather.current_condition[0].FeelsLikeF
+
+// Today
+// Average Tempature: weather.weather[0].avgtempF
+// Max Tempature: weather.weather[0].maxtempF
+// Min Tempature: weather.weather[0].mintempF
+
+// Tomorrow
+
+// Average Tempature: weather.weather[1].avgtempF
+// Max Tempature: weather.weather[1].maxtempF
+// Min Tempature: weather.weather[1].mintempF
+
+// Day After Tomorrow 
+
+// Average Tempature: weather.weather[2].avgtempF
+// Max Tempature: weather.weather[2].maxtempF
+// Min Tempature: weather.weather[2].mintempF
+
+// Previous Searches
+
+//weather.nearest_area[0].areaName[0].value
+// weather.weather[0].avgtempF
+
+//https://v3.wttr.in/?format=j1
diff --git a/style.css b/style.css
@@ -0,0 +1,41 @@
+.header{
+    background-color: rgb(0, 136, 255);
+    grid-area: header;
+}
+
+.main {
+    background-color: rgb(193, 102, 246);
+    grid-area: main;
+}
+
+.previous {
+    background-color: rgb(14, 151, 44);
+    grid-area: previous;
+    text-align: center;
+}
+
+.conversion {
+    background-color: bisque;
+    grid-area: aside;
+    display: grid;
+
+}
+
+body {
+    background-color: rgb(212, 216, 208);
+    display: grid;
+    grid-template-columns: auto auto auto;
+    text-align: center;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: 
+    "header header header"
+    "aside main previous";
+}
+
+.forecast {
+    background-color: rgb(76, 226, 176);
+    display: grid;
+    grid-template-columns: "auto auto auto";
+    grid-template-rows: "auto auto auto";
+    grid-template-areas: "header header header";
+}