version 1.4

README.md

@@ -55,6 +55,7 @@ TinyPNG.com -
   * Pingdom Website Speed Test - https://tools.pingdom.com/
   * SS Labs
   * Site checker
+  * Facebook Sharing Debugger - https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwhenisthenextspacexlaunch.com%2F
 
 * Promotion
   * SpaceX Data App List - 
@@ -86,6 +87,8 @@ npm run deploy
   * Local storage
   * Only poll api if updates or per period
   * PWA Compatibility and Configuration
+  * Update AD Logo to text to allow for dark mode
+  * Use flickr image from response if avilable
 
 * Testing
   * Lighthouse
@@ -96,6 +99,16 @@ npm run deploy
   * Switch to using GraphQL API 
   * Switch to a framework Vue or React
 
+#### Version 1.4
+
+* Features
+  * No launch image use a local default
+  * System detected dark mode
+  * No patch available placeholder
+
+* Fixes
+  * Missing Mission details check (hide)
+
 #### Version 1.3
 
 * Features
@@ -106,6 +119,7 @@ npm run deploy
     * Favicon
   * Facebook Metadata
   * Start of PWA Configuration
+    * Install as App in Windows
 
 #### Version 1.2
 

dist/app.js

@@ -3,7 +3,7 @@ const storage = new Storage();
 const ui = new UI();
 const http = new HTTP();
 
-// Get Weather on DOM Loan
+// DOM Load Event
 document.addEventListener('DOMContentLoaded', () => {
     //getNextLaunch();
     getUpcomingLaunches();
@@ -16,10 +16,13 @@ document.querySelector('.down-arrow').addEventListener('click', () => {
 
 // Get upcoming launches
 function getUpcomingLaunches() {
-    // call http apo
+    // call http api
     http.get('https://api.spacexdata.com/v3/launches/upcoming')
         .then(response => {
 
+            // Console Log response
+            console.log(response);
+
             // Add next launch details to UI
             ui.paintNextLaunchDetails(response[0]);
 

dist/style.css

@@ -3,22 +3,38 @@
 
 /* root scope variable */
 :root {
-    --primary-color: #3a4062;
+    --clr-light: #fff;
+    --clr-dark: #141313;
+
+    --foreground: var(--clr-dark);
+    --background: var(--clr-light);
+
+    --scrollbarBG: rgb(22, 22, 22);
+    --thumbBG: rgb(63, 63, 63);
+}
+
+/* Detect system dark mode setting */
+@media(prefers-color-scheme: dark) {
+    :root {
+        --foreground: var(--clr-light);
+        --background: var(--clr-dark);
+    }
 }
 
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    outline: none;
 }
 
 html {
     scroll-behavior: smooth;
-    --scrollbarBG: rgb(22, 22, 22);
-    --thumbBG: rgb(63, 63, 63);
 }
 
 body {
+    background: var(--background);
+    color: var(--foreground);
     font-family: 'Open Sans', sans-serif;
     line-height: 1.5;
     font-weight: 300;
@@ -44,7 +60,7 @@ body::-webkit-scrollbar-thumb {
 
 a {
     text-decoration: none;
-    color: var(--primary-color);
+    color: var(--clr-foreground);
 }
 
 h1 {
@@ -77,7 +93,7 @@ header {
     height: 100%;
     overflow: hidden;
     /* low res before large loads */
-    background: var(--primary-color) url('https://live.staticflickr.com/65535/49934682271_fd6a31becc_o.jpg') no-repeat center center/cover;
+    background: var(--background) url('img/day_dragon.jpg') no-repeat center center/cover;
 }
 
 .image-container .image {
@@ -86,7 +102,7 @@ header {
     object-fit: cover;
     position: absolute;
     overflow: hidden;
-    background: url('https://live.staticflickr.com/65535/49934682271_fd6a31becc_o.jpg') no-repeat center center/cover;
+    background: url('img/day_dragon.jpg') no-repeat center center/cover;
     top: 0;
     left: 0;
     /* transform: translate(-50%, -50%); */

dist/ui.js

@@ -33,7 +33,11 @@ class UI {
 
         let detailsHtml = '';
 
-        detailsHtml += `${item.details}`;
+        // check for detail available
+        detailsHtml += (item.details === null) ?
+            "" :
+            item.details;
+
         detailsHtml += `<p>`;
         // insert video link if available
         if (item.links.video_link) {
@@ -111,7 +115,7 @@ class UI {
         // check to patch
         const patchLink = (launch.links.mission_patch_small) ?
             `<img src="${launch.links.mission_patch_small}">` :
-            `<i class="fas fa-circle patch"></i>`;
+            `<img src="img/nopatch-60x60.png">`;
 
         row.innerHTML = `
             <td id="patchtd">${patchLink}</td>