projectshft · colormethanh · Jun 11, 2024 · Jun 12, 2024 · Jun 12, 2024
diff --git a/README.md b/README.md
@@ -3,3 +3,30 @@
 This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.
 
 If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
+
+# What is it?
+
+A weather app that fetches weather data using the [open weather api](https://openweathermap.org/).
+
+## Features
+
+- Search weather of a city using a text input (current and 5 day forecast)
+  ![startup modal](./static/weatherDataImage.png)
+- Search weather of current location using JS's [geolocation api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition)
+- Set a default location that
+  ![set default location](./static/setDefaultSuccessImage.png)
+- Responsive components
+  ![Responsive component example](./static/responsiveImage.png)
+
+## Files/Folder overview
+
+- index.html: main html file
+- main.js: houses all classes and js functions
+- style.css: houses custom css
+- static: houses screenshots of project
+
+## Technology used
+
+- Plain old JS
+- Bootstrap v5
+- Jquery
diff --git a/index.html b/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <script
+      src="https://code.jquery.com/jquery-3.7.1.min.js"
+      integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+    <title>Weather Project</title>
+  </head>
+  <body>
+    <article>
+      <nav
+        class="navbar navbar-expand-lg navbar-light bg-light navbar-brand-center mb-3"
+      >
+        <a class="navbar-brand ms-3" href="#">Weather project</a>
+        <ul class="navbar-nav mx-auto">
+          <li class="nav-item navbar-text" id="default-city-text">
+            Default location: Not set
+          </li>
+        </ul>
+        <a
+          class="nav-link me-3"
+          type="button"
+          class="btn btn-primary"
+          id="cur-loc-btn"
+          href="#"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-geo-alt"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A32 32 0 0 1 8 14.58a32 32 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10"
+            />
+            <path
+              d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4m0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6"
+            />
+          </svg>
+        </a>
+      </nav>
+      <section class="container">
+        <div class="row justify-content-center">
+          <div class="col col-9">
+            <form id="search-form">
+              <div class="mb-3 d-flex justify-content-between">
+                <input
+                  type="text"
+                  id="search-input"
+                  class="form-control"
+                  placeholder="Search a city"
+                />
+                <button type="submit" class="btn btn-primary">Search</button>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div id="weather-panel-container" class="row">
+          <div
+            class="col col-12 weather-panel text-center d-flex justify-content-around"
+          ></div>
+        </div>
+      </section>
+      <div class="modal fade" id="project-modal" tabindex="-1">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Modal title</h5>
+              <button
+                type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <div class="modal-body">
+              <p>Modal body text goes here.</p>
+            </div>
+            <div class="modal-footer">
+              <button
+                type="button"
+                class="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Okay
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    <script src="main.js"></script>
+  </body>
+</html>