joinpursuit · Shani4-1 · Jan 4, 2023 · Jan 4, 2023 · Jan 7, 2023 · Jan 7, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width">
+       <title>Weather App</title>
+       <link rel="stylesheet" href="./style.css"/>
+       <script defer src="weather.js"></script>
+    </head>
+    <body>
+        <header>
+            <h1>Weather App</h1> 
+            <!-- <a href="https://wttr.in/">wttr.in</a> -->
+            <form>
+                <label>Pick a location</label>
+                <input id="location" name="-search-bar" type="text" required/>
+                <button type="submit">Get Weather</button> 
+            </form>
+        </header>
+        <aside></aside>
+        <main id="current" class="current"> 
+            <article id="location-info">
+
+            </article>
+            <aside class="forecast"> 
+                <article id="one">
+                    <h4 id="today"></h3>
+                        <br>
+                </article>
+                <article id="two">
+                    <h4 id="tomorrow"></h4>
+                    <br>
+                </article>
+                <article id="three">
+                    <h4 id="day-after-tomorrow"></h4>
+                    <br>
+                </article>
+            </aside>
+        </main>
+        <aside class="side-bar">
+            <section></section>
+            <h4>Previous Searches</h4>
+            <ul class="previous-searches"> </ul>
+        </aside>
+
+
+
+    </body>
+</html>
+
diff --git a/style.css b/style.css
@@ -0,0 +1,79 @@
+header {
+    background-color: rgb(104, 241, 216);
+    text-align: center;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: black;
+    height: 200px;
+    width: 75%;
+    margin: 10px auto;
+
+
+
+}
+h1 {
+    /* padding-top: 20px; */
+    font-size: 60px;
+}
+
+form {
+    font-size: 25px;
+}
+form input {
+    height: 25px;
+    width: 180px;
+}
+form button {
+    height:30px;
+    width: 125px;
+    font-size: 15px;
+
+}
+main {
+    display: grid;
+    block-size: fit-content;
+    position: fixed;
+    background-color: rgb(244, 245, 237);
+    box-sizing: border-box;
+    margin-left: 15%;
+    min-height: 100px;
+    max-height: 50%;
+    width: 50%;
+    font-size: 25px;
+    text-align: center;
+    border: 1px solid  rgb(104, 241, 216);
+
+}
+.previous-searches link {
+    list-style-type: circle;
+}
+/* main article {
+    padding-top: 15px;
+} */
+
+.side-bar {
+
+    box-sizing: border-box;
+    font-size: 25px;
+    text-align: right;
+    margin: 10px 200px;
+
+
+}
+.heading {
+    font-size: 50px;
+    font-weight: bold;
+}
+.forecast {
+    display: grid;
+    position: fixed;
+    bottom: 0px;
+    width: auto;
+    grid-template-columns: repeat(3, 250px);
+    grid-auto-rows: minmax(100px, auto);
+    margin: 100px 100px;
+}
+
+
+
+
diff --git a/weather.js b/weather.js
@@ -0,0 +1,119 @@
+const BASE_URL = "https://wttr.in"
+const form = document.querySelector("form");
+const sidebar = document.querySelector(".side-bar")
+const userInput = document.querySelector("input")
+const main = document.querySelector("main");
+const todayArticle = document.querySelector("#one");
+const tomorrowArticle = document.querySelector("#two");
+const dayAfterArticle = document.querySelector("#three")
+const current = document.querySelector("#current #location-info")
+const heading = document.createElement("h2");
+current.innerHTML = "Choose a location to view the weather."
+const previousSearches = document.querySelector(".previous-searches")
+const ul = document.querySelector(".previous-searches")
+const getToday = document.querySelector("#today");
+const getTomorrow = document.querySelector("#tomorrow");
+const getDayAfter = document.querySelector("#day-after-tomorrow")
+
+form.addEventListener("submit", (event)=> {
+    event.preventDefault();
+    const location = userInput.value
+
+
+    // heading.textContent = label
+
+    getWeatherByLocation(location);
+
+
+
+
+    form.reset();
+})
+
+
+
+function getWeatherByLocation(location) {
+
+    fetch(`${BASE_URL}/${location}?format=j1`)
+    .then((response) => 
+
+    response.json()
+
+    )
+    .then((location) => {
+        // const heading = document.querySelector(h2);
+        const p = document.createElement("p");
+        p.setAttribute("class", "heading")
+        const p1 = document.createElement("p");
+        const p2 = document.createElement("p");
+        const p3 = document.createElement("p");
+        const p4 = document.createElement("p");
+
+        const areaName = location.nearest_area[0].areaName;
+        const region = location.nearest_area[0].region;
+        const country = location.nearest_area[0].country[0].value;
+        const feelsLike = location.current_condition[0].FeelsLikeF;
+
+        const today = location.weather[0];
+        const todayAverageTemp = today.avgtempF
+        const todayMaxTemp = today.maxtempF
+        const todayMinTemp = today.mintempF
+        const tomorrow = location.weather[1];
+        const tomorrowAverageTemp = tomorrow.avgtempF;
+        const tomorrowMaxTemp = tomorrow.maxtempF;
+        const tomorrowMinTemp = tomorrow.mintempF;
+        const dayAfter = location.weather[2];
+        const dayAfterAverageTemp = dayAfter.avgtempF;
+        const dayAfterMaxTemp = dayAfter.maxtempF;
+        const dayAfterMinTemp = dayAfter.mintempF;
+        todayArticle.append(`Average Temperature: ${todayAverageTemp}\u2109`);
+        todayArticle.append(`Max Temperature: ${todayMaxTemp}\u2109`);
+        todayArticle.append(`Min Temperature: ${todayMinTemp}\u2109`);
+        tomorrowArticle.append(`Average Temperature: ${tomorrowAverageTemp}\u2109`);
+        tomorrowArticle.append(`Max Temperature: ${tomorrowMaxTemp}\u2109`);
+        tomorrowArticle.append(`Min Temperature: ${tomorrowMinTemp}\u2109`);
+        dayAfterArticle.append(`Average Temperature: ${dayAfterAverageTemp}\u2109`);
+        dayAfterArticle.append(`Max Temperature: ${dayAfterMaxTemp}\u2109`);
+        dayAfterArticle.append(`Min Temperature: ${dayAfterMinTemp}\u2109`);
+        getToday.innerText = "Today";
+        getTomorrow.innerText = "Tomorrow"
+        getDayAfter.innerText = "Day After Tomorrow"
+
+
+
+
+
+
+        main.append(p);
+        p.append(`${areaName[0].value}`)
+        main.append(p1);
+        main.append(p2);
+        main.append(p3);
+        main.append(p4);
+        p1.append(`Area: ${areaName[0].value}`);
+        p2.append(`Region: ${region[0].value}`);
+        p3.append(`Country: ${country}`);
+        p4.append(`Currently: Feels Like ${feelsLike}\u2109`)/n;
+        const li = document.createElement('li')
+        ul.append(li)
+        const link = document.createElement("a");
+        link.setAttribute("href", `${BASE_URL}/${areaName[0].value}.htm`);
+        link.innerText = `${areaName[0].value} `;
+
+        li.innerText = feelsLike + "\u2109";
+
+        li.prepend(link);
+
+
+        console.log(location.current_condition[0].FeelsLikeF)
+
+        })
+
+
+    .catch((error) => 
+    console.log(error))
+} 
+
+
+
+