version2.0

warwickbuilds · May 28, 2020 · 457941d · 457941d
1 parent dab7d5c
commit 457941d
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 
 * Fonts: Google Fonts: Open Sans
 
-#### Design
+#### Design & Development
 
 Full Page Image inspiration from Brad Traversy: https://www.youtube.com/watch?v=Gx_7GQtSdpc
 Ken Burns Effect - https://www.youtube.com/watch?v=XiEiVZFUfa8
@@ -21,9 +21,30 @@ Page Scrolling -  https://www.youtube.com/watch?v=oUSvlrDTLi4
 Easing - http://gizma.com/easing/
 Font-Awesome - https://cdnjs.com/libraries/font-awesome
 Google-Font - 
+https://htmlhead.dev/
 
-#### Hosting 
-Hosted on github pages with a custom url
+Optimisation Tools
+TinyPNG.com - 
+
+#### Hosting & Deployment
+
+* Hosting: GitHub Pages w/ custom URL
+* Domain Register: Namecheap
+* Analytics: Google Analytics - https://analytics.google.com/analytics
+
+Optimisation Testing
+* Search: Google Search Console, URL Inspection, Index Report - https://search.google.com/search-console
+* Google URL Inspection Tool - https://support.google.com/webmasters
+* Google Page Speed Insights - https://developers.google.com/speed
+* Google Lighthouse (Web page quality tester)- https://developers.google.com/web/tools/lighthouse/
+* Mobile Friendly Test - https://search.google.com/test/mobile-friendly
+* Web Page Test - https://www.webpagetest.org/
+* Pingdom Website Speed Test - https://tools.pingdom.com/
+
+Promotion
+* SpaceX Data App List - 
+* Reddit /r/spacex - 
+*
 
 ## Deploy
 
@@ -52,11 +73,13 @@ npm run deploy
   * Style from style.css
   * Single Page from index.html
   * JavaScript to fetch and push items into DOM in app.js 
-  * Google Analytics Tag
   * PWA Compatibility
   * Social header tag
   * Additional Header tags
   * Icons
+  * apple touch icons
+  * favicon
+  * no js
 
 * Testing
   * Lighthouse
@@ -67,9 +90,25 @@ npm run deploy
   * Switch to using GraphQL API 
   * Switch to a framework Vue or React
 
-#### Version 0.1
+#### Version 1.0
+
+* Features
+  * Mobile optimisted layout
+  * Header meta tags
+
+* Fixes
+  * AD Logo clarity
+
+#### Version 1.0
+
+* Features
+  * SpaceX API Data for Next Launch
+  * SpaceX API Data for upcoming launches
+  * Deployment to gh-pages
+  * Custom URL https://whenisthenextspacexlaunch.com
+
 
-Features
+* Fixes
 
 ## References
 

diff --git a/dist/app.js b/dist/app.js
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 // Chevron click smoothscroll
-document.querySelector('.fa-chevron-down').addEventListener('click', () => {
+document.querySelector('.down-arrow').addEventListener('click', () => {
     ui.smoothScroll('.upcoming', 1000);
 });
 
@@ -27,7 +27,7 @@ function getNextLaunch() {
     http.get('https://api.spacexdata.com/v3/launches/next')
         .then(response => {
             //log response 
-            console.log(response);
+            //console.log(response);
 
             // Add launch details to UI
             ui.paintNextLaunchDetails(response);
@@ -46,7 +46,7 @@ function getUpcomingLaunches() {
             //log response
             //console.log(response);
             response.forEach(element => {
-                console.log(element);
+                //console.log(element);
 
                 // Add launch to list
                 ui.addUpcomingLaunchToList(element);

diff --git a/dist/img/awarddigital-logo_black.png b/dist/img/awarddigital-logo_black.png
diff --git a/dist/img/day_dragon.jpg b/dist/img/day_dragon.jpg
diff --git a/dist/img/nasa-logo-trans.png b/dist/img/nasa-logo-trans.png
diff --git a/dist/img/spacex-logo-trans.png b/dist/img/spacex-logo-trans.png
diff --git a/dist/index.html b/dist/index.html
@@ -2,6 +2,8 @@
 <html lang="en">
 
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123153435-3"></script>
     <script>
@@ -14,29 +16,45 @@
 
         gtag('config', 'UA-123153435-3');
     </script>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
     <title>whenisthenextspacexlaunch.com</title>
+    <meta name="description" content="Free Web tutorials">
+    <meta name="keywords" content="HTML, CSS, XML, JavaScript">
+    <meta name="author" content="John Doe">
+    <meta property="og:image" content="https://whenisthenextspacexlaunch.com/img/awarddigital-logo_black.png">
+    <meta property="og:description" content="If you want to know when is the next SpaceX launch of a rocket into space this is the site.
+    Next launch detailed along with the target dates for all upcoming launches.">
+    <meta property="og:title" content="When is the next SpaceX Launch">
+    <meta name="twitter:title" content="When is the next SpaceX Launch">
+    <meta name="robots" content="index,follow">
+    <meta name="googlebot" content="index,follow">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
+    <noscript>
+        <!-- No JS alternative -->
+    </noscript>
 </head>
 
 <body>
+    <header>
+        <h1>when is the next spacex launch</h1>
+    </header>
     <section class="showcase">
         <div class="image-container">
             <div class="image"></div>
-
         </div>
         <div class="launch-container">
             <div class="launch-top">
                 <div class="launch-stats">
                     <div class="launch-countdown">
                         <div class="countdown-top">
+                            <div class="countdown-tminus">T-</div>
                             <div class="countdown-days"><span class="days"></span></div>
                             <div class="countdown-hours"><span class="hours"></span></div>
                             <div class="countdown-minutes"></div>
                             <div class="countdown-seconds"></div>
                         </div>
                         <div class="countdown-bottom">
+                            <div></div>
                             <div>DAYS</div>
                             <div>HOURS</div>
                             <div>MINS</div>
@@ -58,13 +76,13 @@
             <thead>
                 <tr>
                     <th id="patchheader">Patch</th>
-                    <th>Mission Name</th>
+                    <th>Mission</th>
                     <th class="mobile-hide">Launch Site</th>
-                    <th>Rocket</th>
+                    <th class="mobile-hide">Rocket</th>
                     <th class="mobile-hide">Payload</th>
                     <th class="mobile-hide">Orbit</th>
                     <th class="mobile-hide">Customer</th>
-                    <th>Target Launch Time (Your)</th>
+                    <th class="mobile-hide">Target Launch Time (Your)</th>
                 </tr>
             </thead>
             <tbody id="launch-list"></tbody>
@@ -81,8 +99,6 @@
         </div>
 
     </section>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
     <script src="storage.js"></script>
     <script src="ui.js"></script>
     <script src="http.js"></script>

diff --git a/dist/style.css b/dist/style.css
@@ -16,6 +16,7 @@ body {
     font-family: 'Open Sans', sans-serif;
     line-height: 1.5;
     font-weight: 300;
+    letter-spacing: 1px;
 }
 
 html {
@@ -34,6 +35,10 @@ h1 {
     margin-bottom: 15px;
 }
 
+header {
+    display: none;
+}
+
 .showcase {
     position: relative;
     height: calc(100vh - 2px);
@@ -116,7 +121,7 @@ h1 {
 }
 
 .launch-stats {
-    flex: 75%;
+    flex: 65%;
     text-align: left;
 }
 
@@ -125,7 +130,11 @@ h1 {
 }
 
 .launch-image {
-    flex: 25%;
+    flex: 35%;
+}
+
+.launch-image img {
+    width: 100%;
 }
 
 .launch-details {
@@ -230,7 +239,6 @@ h1 {
 }
 
 .launches-list {
-    max-width: 1200px;
     margin: auto;
     text-align: left;
     border-collapse: collapse
@@ -242,7 +250,7 @@ h1 {
 
 .launches-list td,
 .launches-list th {
-    padding: 2px 10px;
+    padding: 10px 10px;
 }
 
 .launches-list img {
@@ -267,9 +275,22 @@ h1 {
     color: whitesmoke;
 }
 
+.mobile-hide {
+    display: table-cell;
+}
+
+.mobile-show {
+    display: none;
+}
+
+#logo-awarddigital {
+    width: 200px;
+}
+
 @media only screen and (max-width: 800px) {
     .launch-top {
         display: inline-block;
+        width: 100%;
     }
 
     .launch-stats {
@@ -292,4 +313,57 @@ h1 {
     .mobile-hide {
         display: none;
     }
+
+    .mobile-show {
+        display: table-cell;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .showcase {
+        position: relative;
+        height: fit-content;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 15px;
+        width: 100%;
+    }
+
+    .launch-stats {
+        font-size: 15px;
+        letter-spacing: 0.4px;
+    }
+
+    .launch-image img {
+        min-height: 283px;
+    }
+
+    .launch-container {
+        z-index: 10;
+        position: relative;
+        top: 0;
+        left: 0;
+        transform: none;
+        background: rgba(0, 0, 0, 0.59);
+        padding: 15px;
+        min-height: fit-content;
+        width: 100%;
+        color: white;
+    }
+
+    .down-arrow {
+        display: none;
+    }
+
+    .upcoming {
+        padding: 20px 0;
+    }
+
+    .mobile-show {
+        display: table-cell;
+    }
+
 }
diff --git a/dist/ui.js b/dist/ui.js
@@ -115,13 +115,19 @@ class UI {
 
         row.innerHTML = `
             <td id="patchtd">${patchLink}</td>
-            <td>${launch.mission_name}</td>
+            <td>
+                ${launch.mission_name}
+                <p class=mobile-show>
+                ${launch.rocket.rocket_name} | ${launch.rocket.second_stage.payloads[0].payload_type}<br>
+                ${moment(launch.launch_date_local).format('llll')}<br>
+                </p>
+            </td>
             <td class="mobile-hide">${launch.launch_site.site_name}</td>
-            <td>${launch.rocket.rocket_name}</td>
+            <td class="mobile-hide">${launch.rocket.rocket_name}</td>
             <td class="mobile-hide">${launch.rocket.second_stage.payloads[0].payload_type}</td>
             <td class="mobile-hide">${launch.rocket.second_stage.payloads[0].orbit}</td>
             <td class="mobile-hide">${launch.rocket.second_stage.payloads[0].customers[0]}</td>
-            <td>${moment(launch.launch_date_local).format('llll')}</td>
+            <td class="mobile-hide">${moment(launch.launch_date_local).format('llll')}</td>
         `;
         list.append(row);
     }

diff --git a/node_modules/gh-pages/.cache/github.com!warwickofthegh!whenisthenextspacexlaunch.com.git b/node_modules/gh-pages/.cache/github.com!warwickofthegh!whenisthenextspacexlaunch.com.git