recovering prior commit

.github/workflows/static.yml

@@ -0,0 +1,43 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Hannah Lin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+# Deployment
+
+I've deployed my site here: 
+🚀[https://ht-l1.github.io/weather/](https://ht-l1.github.io/weather/)
+
+Please ensure you allow the browser to know your location as the weather info is user location specific:
+<img src="https://github.com/ht-l1/weather/assets/106502799/ef174ee1-2c50-4b8d-bd4a-44bac7974637" width="30%" height="30%">
+
+# Weather Now
+
+A weather app that shows the current temperature and condition based on user location using the Open-Meteo API. It is built using JavaScript, HTML, and CSS.
+It offers a few key features:
+- a client-side JavaScript snippet that allows a user to see the weather condition based on their own geography
+- a server-side API that fetches the weather information from Open-Meteo.com
+- a web application that displays the captured information for each user
+
+## How to Run
+
+1. Clone this repository.
+2. Open `index.html` in your web browser.
+
+## Project Timeline
+
+Milestone 2: Implementations and Design (Completed by October 28th)
+- Redesigned the home page
+- Added the light dark theme toggle 
+- Added fun facts section
+
+Milestone 1: Framework Setup and API Fetching (Completed by October 4th)
+- Set up the basic framework for the weather app
+- Implemented functionality to fetch temperature and wind speed data from the API
+
+## Website Screenshot
+<img src="https://github.com/ht-l1/weather/assets/106502799/9fc3dd2f-238f-4d7c-8305-aeac43c3fae8" width="30%" >
+<img src="https://github.com/ht-l1/weather/assets/106502799/f38c80e6-e145-4f5b-8106-4d6bf3c3d2b4" width="32.5%" >
+<img src="https://github.com/ht-l1/weather/assets/106502799/a0f41dbb-1912-46a3-b482-a80c101418e1" width="30%" >

index.html

@@ -0,0 +1,59 @@
+<!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="styles.css">
+  <script src="https://kit.fontawesome.com/f2df0e5efa.js" crossorigin="anonymous"></script>
+  <title>Weather App</title>
+</head>
+
+<body>
+  <div id="weather-container">
+    <h1>Weather Now&nbsp;<img src="./public/icon.png" style="width:10%"></h1>
+    <!-- <div id="temperature"></div>
+    <div id="windspeed"></div> -->
+
+    <!-- add toggle for themes -->
+    <button id="theme-toggler">
+      <i id="theme-icon" class="fa-regular fa-sun"></i> Toggle Theme
+    </button>
+    <p></p>
+    <p></p>
+    <!-- re-deisgn the look -->
+    <div class="parent">
+      <div class="children-1">
+        <br>
+        <div class="main-page-icon">
+          <i class="fa-solid fa-temperature-low"></i>
+        </div>
+        <br>
+        <a href="temperature.html">View Temperature</a>
+      </div>
+      <div class="children-2">
+        <br>
+        <div class="main-page-icon">
+          <i class="fa-solid fa-wind"></i>
+        </div>
+        <br>
+        <a href="windspeed.html">View Wind Speed</a>
+      </div>
+    </div>
+    <!-- <img src="https://res.cloudinary.com/dk-find-out/image/upload/q_80,w_1920,f_auto/A-123rf-4377858_m0jrov.jpg" style="width:100%; height:100%;"> -->
+
+  </div>
+  <script src="script.js"></script>
+
+  <!-- test out what info to show here and then hide -->
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      fetchWeatherData('temperature_2m', 'temperature');
+      fetchWeatherData('windspeed_10m', 'windspeed');
+    });
+  </script>
+  <!-- end of hide -->
+
+</body>
+
+</html>

script.js

@@ -0,0 +1,40 @@
+function fetchWeatherData(dataType, elementId) {
+  // Get the user's location
+  navigator.geolocation.getCurrentPosition(position => {
+    const latitude = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    // Make the API request
+    fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&hourly=${dataType}`)
+      .then(response => response.json())
+      .then(data => {
+        const value = data.hourly[dataType][0];
+        const unit = dataType === 'temperature_2m' ? '°C' : 'm/s';
+
+        // Display the data
+        document.getElementById(elementId).innerHTML = `${dataType === 'temperature_2m' ? 'Temperature' : 'Wind Speed'}: ${value} ${unit}`;
+      })
+      .catch(error => {
+        console.error("Error fetching weather data: ", error);
+      });
+  });
+}
+
+
+// theme toggle
+document.getElementById('theme-toggler').addEventListener('click', function () {
+  const body = document.body;
+  const themeIcon = document.getElementById('theme-icon');
+
+  if (body.classList.contains('light-theme')) {
+    body.classList.remove('light-theme');
+    body.classList.add('dark-theme');
+    themeIcon.classList.remove('fa-regular', 'fa-sun');
+    themeIcon.classList.add('fa-regular', 'fa-moon');
+  } else {
+    body.classList.remove('dark-theme');
+    body.classList.add('light-theme');
+    themeIcon.classList.remove('fa-regular', 'fa-moon');
+    themeIcon.classList.add('fa-regular', 'fa-sun');
+  }
+});

styles.css

@@ -0,0 +1,117 @@
+body {
+  font-family: Arial, sans-serif;
+  /* background-color: #f0f0f0; */
+  background-color: #222222;
+  padding: 20px;
+  color: #DEE4E7;
+  /* toggle theme */
+  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+/* toggle theme */
+.light-theme {
+  background-color: white;
+  color: black;
+}
+
+.dark-theme {
+  background-color: black;
+  color: white;
+}
+
+#fun-fact {
+  color: grey;
+}
+
+hr {
+  border: none;
+  background-color: #333;
+  height: 2px;
+  width: 50%;
+  margin: 20px auto;
+}
+
+
+#temperature-data,
+#windspeed-data {
+  color: lightcoral;
+  font-weight: bold;
+}
+
+#message {
+  font-style: oblique;
+}
+
+#weather-container {
+  /* background-color: #fff; */
+  background-color: #37474F;
+  border-radius: 10px;
+  padding: 20px;
+  max-width: 400px;
+  margin: auto;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+a {
+  display: block;
+  margin: 10px 0;
+  text-align: center;
+  text-decoration: none;
+  color: #0066cc;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.parent {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.children-1 {
+  width: 50%;
+  text-align: center;
+}
+
+
+.main-page-icon {
+  font-size: 400%;
+}
+
+.children-2 {
+  width: 50%;
+  text-align: center;
+  /* overflow-y: hidden; */
+}
+
+/* For the hyperlinks */
+
+a:link {
+  color: green;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:visited {
+  color: pink;
+  background-color: transparent;
+  text-decoration: none;
+}
+
+a:hover {
+  color: red;
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+a:active {
+  color: yellow;
+  background-color: transparent;
+  text-decoration: underline;
+}

temperature.html

@@ -0,0 +1,53 @@
+<!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="styles.css">
+  <script src="https://kit.fontawesome.com/f2df0e5efa.js" crossorigin="anonymous"></script>
+  <title>Temperature</title>
+</head>
+
+<body>
+  <!-- <div id="temperature-container"> -->
+  <div id="weather-container">
+    <h1><i class="fa-solid fa-temperature-low"></i>&nbsp;Temperature</h1>
+    In your location: <p></p>
+    <div id="temperature-data"></div>
+    <p id="message"><i class="fa-regular fa-message"></i>&nbsp;Hope it's nice out there for ya!</p>
+    <!-- <img src="https://img.freepik.com/premium-vector/meteorology-thermometers-measuring-temperature-concept_198530-930.jpg" style="width:100%;height:100%;"> -->
+
+    <!-- fun fact section -->
+    <hr>
+    <div id="fun-fact">
+      Would you like learning some <a
+        href="https://mocomi.com/facts-about-temperature/#:~:text=57.8%20%C2%B0C%20(136%20%C2%B0,Antarctica%20on%20July%2021%2C%201983."
+        style="display: inline;">fun
+        facts</a> of Temperature?
+      <ul>
+        <li>57.8 °C (136 °F) is the hottest temperature ever recorded on Earth. It was recorded on September 13, 1922 in
+          Al ‘Aziziyah located in Libya.</li>
+        <li>−89.2 °C (−128.6 °F) is the coldest temperature ever recorded on Earth. It was recorded at Vostok Station
+          located in Antarctica on July 21, 1983.</li>
+      </ul>
+    </div>
+
+    <a href="index.html"><i class="fa-solid fa-land-mine-on"></i>&nbsp;Back to Home</a>
+    <a href="windspeed.html"><i class="fa-solid fa-wind"></i>&nbsp;View Wind Speed</a>
+  </div>
+
+
+
+
+
+
+  <script src="script.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      fetchWeatherData('temperature_2m', 'temperature-data');
+    });
+  </script>
+</body>
+
+</html>