Technigo · zoe-lindqvist · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 24, 2024
diff --git a/README.md b/README.md
@@ -1,13 +1,20 @@
 # Weather App
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+This project is a weather application that fetches and displays real-time weather data from the OpenWeatherMap API. Users can search for the current weather in a specific city or allow the app to use their location via the Geolocation API. The app shows key information such as temperature, weather description, sunrise and sunset times, and a 5-day weather forecast.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The task was to create a responsive weather app that retrieves data from an external API and presents it in a user-friendly format. The goal was also to implement a feature that fetches the user's current location and displays the weather based on that.
+
+- Technologies: I used the following tools and technologies to build the app:
+
+HTML and CSS for structuring and styling the interface.
+JavaScript for fetching data using the fetch() API and manipulating the DOM to display the weather information.
+OpenWeatherMap API to retrieve the weather data for the specified city or current location.
+Responsive Design techniques to ensure the app works across various screen sizes.
+
+- Challenges: The main challenge was ensuring the weather data (including background images) loaded efficiently, and formatting the dates (e.g., sunrise and sunset) into a user-friendly format.
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://weather-free-api.netlify.app/
diff --git a/assets/design-2/noun_Cloud_1188486.svg b/assets/design-2/noun_Cloud_1188486.svg
diff --git a/assets/design-2/noun_Sunglasses_2055147.svg b/assets/design-2/noun_Sunglasses_2055147.svg
diff --git a/assets/design-2/noun_Umbrella_2030530.svg b/assets/design-2/noun_Umbrella_2030530.svg
diff --git a/images/cloudy.png b/images/cloudy.png
diff --git a/images/default.png b/images/default.png
diff --git a/images/dust.png b/images/dust.png
diff --git a/images/mist.png b/images/mist.png
diff --git a/images/rain.png b/images/rain.png
diff --git a/images/snowy.png b/images/snowy.png
diff --git a/images/sunny.png b/images/sunny.png
diff --git a/images/thunderstorm.png b/images/thunderstorm.png
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Weather App</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <!-- Preload: Ensures that weather-images load faster by preloading them before they are needed-->
+    <link rel="preload" href="./images/thunderstorm.png" as="image" />
+    <link rel="preload" href="./images/rain.png" as="image" />
+    <link rel="preload" href="./images/snowy.png" as="image" />
+    <link rel="preload" href="./images/mist.png" as="image" />
+    <link rel="preload" href="./images/dust.png" as="image" />
+    <link rel="preload" href="./images/cloudy.png" as="image" />
+    <link rel="preload" href="./images/sunny.png" as="image" />
+    <link rel="preload" href="./images/default.png" as="image" />
+  </head>
+  <body>
+    <!-- Loading message that appears while the app is fetching weather data -->
+    <div id="loadingMessage">
+      <div class="spinner"></div><!-- A spinner graphic indicating loading -->
+      <p>Fetching weather data...</p>
+    </div>
+     <!-- An error message container to show errors if needed, initially hidden -->
+    <div id="errorMessage" style="display:none;"></div>
+  <!-- Main app content, initially hidden until data is loaded -->
+  <div id="appContent" style="display:none;">
+    <!-- Hidden div to preload background images -->
+    <div id="preload"></div>
+    <!-- Main container to hold all the content -->
+    <div class="container">
+      <!-- Navigation with the search box and button -->
+      <nav id="navSearch" class="nav">
+        <!-- <button type="button" class="search-button" id="searchMenu"></button> -->
+        <div class="search box" id="search-box">
+           <!-- Input field where the user can type the city name to search for weather information -->
+          <input
+            type="text"
+            class="search-bar"
+            id="inputField"
+            placeholder="Search"
+          />
+          <button type="submit" class="search-button" id="searchBtn">
+            <!-- Search button icon (SVG format) -->
+            <svg
+              stroke="currentColor"
+              fill="currentColor"
+              viewBox="0 0 1024 1024"
+              height="1.5em"
+              width="1.5em"
+            >
+              >
+              <path
+                d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </nav>
+
+    <!-- Main section to display the current weather data -->
+      <main class="mainWrapper">
+        <div class="tempText">
+          <h1 class="tempNumber" id="tempToday"></h1>
+        </div>
+          <!-- Display the city name -->
+        <h2 class="cityText" id="cityName"></h2>
+         <!-- Display the local time in the selected city -->
+        <h3 class="local-time" id="localTime"></h3>
+        <!-- Display the weather description (e.g., "sunny", "rainy") and weather icon -->
+        <div class="description-icon">
+          <h3 class="describeText" id="weatherDescription"></h3>
+          <div id="mainIcon"></div>
+        </div>
+        <!-- Section to show sunrise and sunset times -->
+        <section id="sunriseSunset" class="sun-position">
+          <div id="sunriseText"></div>
+          <div id="sunsetText"></div>
+        </section>
+      </main>
+      <!-- A table to display the upcoming weather forecast (e.g., for 5 days) -->
+      <table id="weatherForecast" class="weather-forecast"></table>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/pull_request_template.md b/pull_request_template.md