Merge pull request #13 from aidan-yip/v2.0.0

Re-upload repo files

README.md

@@ -0,0 +1,27 @@
+# Weather 64
+A clean minimal weather app.
+
+# Powered by
+
+<ul>
+  <li>The ©OpenWeather API</li>
+  <li>Google Maps - Map Data ©Google</li>
+</ul>
+
+# Features
+<ul>
+  <li>Installable as a web app</li>
+  <li>City search by user text input</li>
+  <li>Current location (w/search function)</li>
+  <li>Current temperature</li>
+  <li>Current condition description</li>
+  <li>12 hour real time clock</li>
+  <li>Current date</li>
+  <li>Interactive map</li>
+</ul>
+
+# Credits
+
+## Original Idea: https://dev.to/iamcymentho/building-a-complete-weather-app-from-scratch-with-html-css-and-javascript-a-step-by-step-guide-30h4
+## OpenWeather API: https://openweathermap.org
+## Google Maps: https://www.google.ca/maps

dark_mode.css

@@ -0,0 +1,71 @@
+@media (prefers-color-scheme: dark) {
+  #background {
+    background-image: url("https://raw.githubusercontent.com/aidan-yip/weather_64/main/public/moon.jpg");
+  }
+
+  .container {
+    background: linear-gradient(
+      137deg,
+      rgba(93, 93, 93, 0.4) 0%,
+      rgba(0, 0, 0, 0.4) 100%
+    );
+    border: solid 1px #515151;
+    box-shadow: 0px 0px 80px #eaeaea3b;
+  }
+
+  .side_block {
+    background: linear-gradient(
+      137deg,
+      rgba(93, 93, 93, 0.6) 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    );
+    border: solid 1px #6e6e6e;
+    box-shadow: 0px 0px 50px #eaeaea3b;
+  }
+
+  #inner {
+    background: linear-gradient(
+      137deg,
+      rgba(93, 93, 93, 0.6) 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    );
+    border: solid 1px #6e6e6e;
+    box-shadow: 0px 0px 50px #eaeaea3b;
+  }
+
+  h1 {
+    color: #ffffff;
+  }
+
+  #date {
+    color: #ffffff;
+  }
+
+  #location {
+    color: #ffffff;
+  }
+
+  #temperature {
+    color: #ffffff;
+  }
+
+  #description {
+    color: #ffffff;
+  }
+
+  input[type="text"] {
+    color: #0a78ff;
+  }
+
+  #clock {
+    color: #ffffff;
+  }
+
+  a {
+    color: #ffffff;
+  }
+
+  a:visited {
+    color: #ffffff;
+  }
+}

manifest.json

@@ -0,0 +1,37 @@
+{
+    "name": "Weather 64",
+    "short_name": "Weather 64",
+    "start_url": "https://weather-64.pages.dev",
+    "display": "standalone",
+    "x-robots-tag": "index",
+    "background_color": "#0052bc",
+    "theme_color": "#0052bc",
+    "description": "A clean minimal open source weather app.",
+    "icons": [
+      {
+        "src": "./public/icons/icon.png",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "any"
+      },
+      {
+        "src": "./public/splash/manifest-icon-192.maskable.png",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "maskable"
+      },
+      {
+        "src": "./public/splash/manifest-icon-512.maskable.png",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "any"
+      },
+      {
+        "src": "./public/splash/manifest-icon-512.maskable.png",
+        "sizes": "512x512",
+        "type": "image/png",
+        "purpose": "maskable"
+      }
+    ]
+  }
+

script.js

@@ -0,0 +1,68 @@
+// Clock
+
+function currentTime() {
+    let date = new Date(); 
+    let hh = date.getHours();
+    let mm = date.getMinutes();
+    let ss = date.getSeconds();
+    let session = "AM";
+
+    if(hh == 0){
+        hh = 12;
+    }
+    if(hh > 12){
+        hh = hh - 12;
+        session = "PM";
+     }
+
+     hh = (hh < 10) ? "0" + hh : hh;
+     mm = (mm < 10) ? "0" + mm : mm;
+     ss = (ss < 10) ? "0" + ss : ss;
+
+     let time = hh + ":" + mm + ":" + ss + " " + session;
+
+    document.getElementById("clock").innerText = time; 
+    let t = setTimeout(function(){ currentTime() }, 1000);
+  }
+  currentTime();
+
+// Date
+
+const date = new Date();
+const dateWithoutTime = date.toDateString();
+
+document.getElementById("date").innerHTML = dateWithoutTime;
+
+//OPEN WEATHER API
+
+ const apiKey = '2bfdac11a6fb05bc2347f9f0f01e3031';
+ const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';
+
+const locationInput = document.getElementById('locationInput');
+const searchButton = document.getElementById('searchButton');
+const locationElement = document.getElementById('location');
+const temperatureElement = document.getElementById('temperature');
+const descriptionElement = document.getElementById('description');
+
+searchButton.addEventListener('click', () => {
+    const location = locationInput.value;
+    if (location) {
+        fetchWeather(location);
+    }
+});
+
+function fetchWeather(location) {
+    const url = `${apiUrl}?q=${location}&appid=${apiKey}&units=metric`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            locationElement.textContent = data.name;
+            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
+            descriptionElement.textContent = data.weather[0].description;
+        })
+        .catch(error => {
+            console.error('Error fetching weather data:', error);
+            alert("Please enter a valid city");
+        });
+}