joinpursuit · Angiepmunoz · Jan 5, 2023 · Jan 5, 2023 · Jan 5, 2023 · Jan 5, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/assets/Spinning_global1.gif b/assets/Spinning_global1.gif
diff --git a/assets/clear_weather.gif b/assets/clear_weather.gif
diff --git a/assets/fog.gif b/assets/fog.gif
diff --git a/assets/four_seasons.gif b/assets/four_seasons.gif
diff --git a/assets/mist.gif b/assets/mist.gif
diff --git a/assets/overcast.gif b/assets/overcast.gif
diff --git a/assets/partly_cloudy.gif b/assets/partly_cloudy.gif
diff --git a/assets/rain.gif b/assets/rain.gif
diff --git a/assets/snow.gif b/assets/snow.gif
diff --git a/assets/spinning_globe.gif b/assets/spinning_globe.gif
diff --git a/assets/sunny.gif b/assets/sunny.gif
diff --git a/assets/thunder.gif b/assets/thunder.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!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>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+    <script defer src="main.js"></script>
+    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
+</head>
+<body >
+
+
+        <header id="user_search_base">
+            <h1>Weather App</h1>
+            <form id="form">
+              <label id="picked_location" for="submit">Pick a location: </label>
+              <input type="text" id="search" name="search" autocomplete="on" />
+              <input type="submit" id="submit" name="submit" value="Submit" />
+            </form>
+            <input type="submit" id="target-dark-mode" name="dark-mode" onclick="myFunction()" value="Dark Mode"></input>
+          </header>
+
+<div class="container">
+    <aside class="move_to_the_right">
+        <section >
+            <p  class="hidden previous">Previous Searches</p>
+            <ul id="previous">
+                <p class="remove">No previous searches</p>
+
+            </ul>
+
+        </section>
+        </aside>
+
+        </div>
+
+        <div>
+        <aside class="convert">
+        <form id="convertTemps">
+          <label for="temp">Convert the Temperature</label>
+          <input type="number" name="temp-to-convert" id="temp-to-convert"/>
+
+          <label for="temp_c">To Celsius</label>
+          <input type="radio" name="temp" id="to-c" value="c" />
+
+          <label for="temp_f">To Fahrenheit</label>
+          <input type="radio" name="temp" id="to-f" value="f" />
+
+          <input id="cursor" type="submit" value="Submit" />
+        </form>
+        <h4 id="temperatureConvert"></h4>
+      </aside>
+</div>
+
+      <main id="background">
+        <p class="remove location">Choose a location to view the weather</p>
+        <article class="main_content">
+            <h2 id="LocationName"></h2>
+            <span class="gif_container">
+                <img id="weatherImage" src="" alt="" />
+            </span>
+            <p> <strong id="area"></strong></p>
+            <p> <strong id="region"></strong> </p>
+            <p><strong id="country"></strong></p>
+            <p><strong id="currentTemperature"></strong></p>
+            <p> <strong id="sunshine"></strong></p>
+            <p><strong id="rain"></strong></p>
+            <p><strong id="snow"></strong></p>
+        </article>
+        <aside id="three_day_forcast">
+            <article class="today">
+                <h2 id="today"> <strong>Today</strong> </h2>
+                <p id="todayAvg"></p>
+                <p id="todayMax"></p>
+                <p id="todayMin"></p>
+            </article>
+
+            <article class="tomorrow">
+                <h2 id="tomorrow"> <strong>Tomorrow</strong> </h2>
+                <p id="tomorrowAvg"></p>
+                <p id="tomorrowMax"></p>
+                <p id="tomorrowMin"></p>
+            </article>
+
+            <article class="dayAfterTomorrow">
+                <h2 id="TwoDaysLater"> <strong>Two Days Later</strong> </h2>
+                <p id="TwoDaysLaterAvg"></p>
+                <p id="TwoDaysLaterMax"></p>
+                <p id="TwoDaysLaterMin"></p>
+            </article>
+        </aside>
+      </main>
+
+</body>
+</html>