Full Code of SimonDEvans/notes for AI

Repository: SimonDEvans/notes
Branch: master
Commit: dd384080decd
Files: 8
Total size: 14.6 KB

Directory structure:
gitextract_tctamwz9/

├── README.md
├── css/
│   └── style.css
├── index.html
├── js/
│   ├── app.js
│   ├── cache-polyfill.js
│   └── note-list.js
├── manifest.json
└── sw.js

================================================
FILE CONTENTS
================================================

================================================
FILE: README.md
================================================
# Notes
<img src="https://sii.im/playground/notes/notes-ss.png" alt="Notes app" width='590px'>
<img src="https://sii.im/playground/notes/notes-pwa.png" alt="Notes app PWA score" width='610px'>

A simple, offline-based notepad, based on usage of [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) and [PWA techniques.](https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/)

View the demo [here](https://sii.im/playground/notes) on a [supported device.](http://caniuse.com/#feat=serviceworkers)

## Features

  - Write notes and save them to [localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage)
  - Use [Service Worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) to enable offline viewing
  - "Add To Home Screen" feature on both Android and iOS supported devices


================================================
FILE: css/style.css
================================================
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  font-family: Helvetica Neue, sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(to left, #B24592 , #F15F79);
}

@media screen and (max-width: 500px) {
  body {
    height: auto;
    min-height: 100vh;
    background: none;
  }
}

@keyframes fadein {
  from { 
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  
  to   { 
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 620px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6);
  animation: fadein 1s;
}

@media screen and (max-width: 500px) {
  .wrapper {
    width: 100%;
    height: 100vh;
    margin: 0;
    overflow: scroll;
    box-shadow: none;
    animation: none;
  }
}

  .wrapper__inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

@media screen and (max-width: 500px) {
  .notepad {
    padding: 15px;
  }
}

  .notepad__heading {
    width: 100%;
    padding: 60px 40px 15px;
    border-bottom: 1px solid #f5f4f4;
    color: #5f5f5f;
    font-weight: 400;
  }

  .notepad__form-label {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
  }

  .notepad__form-input {
    border: 0;
    width: 100%;
    line-height: 1.3;
    margin: 0;
    font-size: 19px;
    color: #5f5f5f;
    padding: 30px 40px;
    background-color: transparent;
    transition: background-color 300ms ease;

    @media screen and (max-width: 500px) { 
      .notepad__form-input {
        height: auto;
      }
    }
  }

  .notepad__form-input:focus {
    outline: 0;
    background-color: #f5f5f5;
  }

  .notepad__list {
    height: 365px;
    overflow: scroll;
  }

  @media screen and (max-width: 500px) {
    .notepad__list {
      height: auto;
    }
  }

  .notepad__list-item {
    width: 100%;
    padding: 30px 40px;
    border: 0;
    border-bottom: 1px solid #f5f4f4;
    line-height: 1.3;
    font-size: 19px;
    list-style-type: none;
    color: #5f5f5f;
    background-color: transparent;
  }

  .notepad__list-item:first-of-type {
    border-top: 1px solid #f5f4f4;
  }

  .notepad__clear {
    position: absolute;
    bottom: 0;
    display: none;
    width: 100%;
    padding: 20px;
    border: 0;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-family: Helvetica Neue, sans-serif;
    letter-spacing: 2px;
    transition:
      color 300ms ease,
      background-color 300ms ease;
  }

  .notepad__clear:focus {
    outline: 0;
  }

  .notepad__clear:hover {
    color: #fff;
    background-color: #ea3860;
  }

  .notepad__clear--display {
    display: block;
  }

  @media screen and (max-width: 500px) {
    .notepad__clear {
      position: static;
    }
  }

  .info,
  .twitter {
    position: fixed;
    top: 0;
    right: 0;
    padding: 15px 15px 12px 15px;
    transition:
      background-color 300ms ease;
  }

  .info span,
  .twitter span {
    display: none;
  }

  @media screen and (max-width: 500px) {
    .info,
    .twitter {
      position: absolute;
      z-index: 2;
    }
  }

  @media screen and (max-width: 500px) {
   .info {
    right: 40px;
   } 
  }

  .twitter {
    top: 45px;
  }

  @media screen and (max-width: 500px) {
   .twitter {
    top: 0;
   } 
  }

  .info svg,
  .twitter svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    transition:
      fill 300ms ease;
  }

  @media screen and (max-width: 500px) {
   .info svg,
   .twitter svg {
    width: 20px;
    fill: #333;
   } 
  }

  .info:hover svg,
  .twitter:hover svg {
    fill: #333;
  }


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en-gb">
  <head>
    <title>Notes</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <link href="css/style.css" rel="stylesheet">
    <meta name="application-name" content="Notes" />
    <meta name="theme-color" content="#ffffff">
    <link rel="manifest" href="manifest.json">
  </head>
  <body>
    <a href="https://github.com/SimonDEvans/notes" class="info" aria-label="GitHub">
      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8"/></svg>
      <span>GitHub</span>
    </a>
    <a href="https://twitter.com/siimonevans" class="twitter" aria-label="Twitter">
      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg>
      <span>Twitter</span>
    </a>
    <div class="wrapper">
      <div class="wrapper__inner">
        <div class="notepad">
          <h1 class="notepad__heading">Notes</h1>
          <form class="notepad__form">
            <input class="notepad__form-input" placeholder="Start typing&hellip;" id="form-input" />
            <label class="notepad__form-label" for="form-input">Add an item</label>
          </form>
          <ul class="notepad__list"></ul>
          <button class="notepad__clear">Clear list</button>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/note-list.js"></script>
  </body>
</html>

================================================
FILE: js/app.js
================================================
// Registering ServiceWorker
if ( 'serviceWorker' in navigator ) {
  navigator.serviceWorker.register( 'sw.js' ).then(function(registration) {

    // Registration was successful
    console.log( 'ServiceWorker registration successful. Scope: ' + registration.scope )
  }).catch(function(err) {

    // Registration failed with error
    console.log( 'ServiceWorker registration failed. Error: ' + err);
  });
}

================================================
FILE: js/cache-polyfill.js
================================================
/**
 * Copyright 2015 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 */

(function() {
  var nativeAddAll = Cache.prototype.addAll;
  var userAgent = navigator.userAgent.match(/(Firefox|Chrome)\/(\d+\.)/);

  // Has nice behavior of `var` which everyone hates
  if (userAgent) {
    var agent = userAgent[1];
    var version = parseInt(userAgent[2]);
  }

  if (
    nativeAddAll && (!userAgent ||
      (agent === 'Firefox' && version >= 46) ||
      (agent === 'Chrome'  && version >= 50)
    )
  ) {
    return;
  }

  Cache.prototype.addAll = function addAll(requests) {
    var cache = this;

    // Since DOMExceptions are not constructable:
    function NetworkError(message) {
      this.name = 'NetworkError';
      this.code = 19;
      this.message = message;
    }

    NetworkError.prototype = Object.create(Error.prototype);

    return Promise.resolve().then(function() {
      if (arguments.length < 1) throw new TypeError();

      // Simulate sequence<(Request or USVString)> binding:
      var sequence = [];

      requests = requests.map(function(request) {
        if (request instanceof Request) {
          return request;
        }
        else {
          return String(request); // may throw TypeError
        }
      });

      return Promise.all(
        requests.map(function(request) {
          if (typeof request === 'string') {
            request = new Request(request);
          }

          var scheme = new URL(request.url).protocol;

          if (scheme !== 'http:' && scheme !== 'https:') {
            throw new NetworkError("Invalid scheme");
          }

          return fetch(request.clone());
        })
      );
    }).then(function(responses) {
      // If some of the responses has not OK-eish status,
      // then whole operation should reject
      if (responses.some(function(response) {
        return !response.ok;
      })) {
        throw new NetworkError('Incorrect response status');
      }

      // TODO: check that requests don't overwrite one another
      // (don't think this is possible to polyfill due to opaque responses)
      return Promise.all(
        responses.map(function(response, i) {
          return cache.put(requests[i], response);
        })
      );
    }).then(function() {
      return undefined;
    });
  };

  Cache.prototype.add = function add(request) {
    return this.addAll([request]);
  };
}());

================================================
FILE: js/note-list.js
================================================
$(document).ready(function () {

    var noteList = function() {

      var $notepad          = $(' .notepad' ),
          $noteList         = $(' .notepad__list' ),
          $noteListItem     = $( '.notepad__list-item' ),
          $noteForm         = $( '.notepad__form' ),
          $noteFormInput    = $( '.notepad__form-input' ),
          $clearList        = $( '.notepad__clear' ),
          clearListDisplay  = 'notepad__clear--display',
          noteCount         = 0;

      function displayNotes() {
        for (noteCount = 0; noteCount < localStorage.length; noteCount++) {
          var noteID        = 'task-' + noteCount;

          // Build note list
          $noteList.append("<li class='notepad__list-item' id='" + noteID + "'>" + localStorage.getItem(noteID) + "</li>");

          // Show reset button
          $clearList.addClass( clearListDisplay );
        }
      }

      function storeNote() {
        if ( $noteFormInput.val() !== '' ) {
            var noteID      = 'task-' + noteCount,
                task        = $( '#' + noteID ),
                taskMessage = $noteFormInput.val();

            localStorage.setItem( noteID, taskMessage );

            // Add to note list
            $noteList.append( "<li class='notepad__list-item' id='" + noteID + "'>" + taskMessage + "</li>" );

            // Display reset button
            if ( !$clearList.hasClass( clearListDisplay ) ) {
              $clearList.addClass( clearListDisplay );
            }

            // Reset
            $noteFormInput.val('');
            noteCount++;
        }
      }

      function clearNotes() {

          // Update DOM
          $noteList.empty();
          $clearList.removeClass( clearListDisplay );

          // Clear storage
          localStorage.clear();
          noteCount = 0;
      }

      function bindEvents() {

        // Show any existing notes from localStorage
        displayNotes();

        // Create new note
        $noteForm.on( 'submit', function () {
            storeNote();
            return false;
        });

        // Reset notes
        $clearList.on( 'click', function () {
          clearNotes();
        });
      }

      bindEvents();
    };

    noteList();
});


================================================
FILE: manifest.json
================================================
{
  "short_name": "notes",
  "name": "notes",
  "description" : "An offline-capable notes app, using localStorage and ServiceWorker",
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "index.html",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "img/icon-60.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "img/icon-114.png",
      "sizes": "114x114",
      "type": "image/png"
    },
    {
      "src": "img/icon-152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "img/icon-558.png",
      "sizes": "558x558",
      "type": "image/png"
    }
  ]
}


================================================
FILE: sw.js
================================================
// Polyfill for Chrome caching
importScripts('js/cache-polyfill.js');

// Install the ServiceWorker
self.addEventListener('install', function(event) {
  event.waitUntil(

    // Open a cache
    caches.open('v1').then(function(cache) {

      // Define what we want to cache
      return cache.addAll([
        '/',
        'index.html',
        'js/app.js',
        'js/jquery.min.js',
        'js/note-list.js',
        'css/style.css',
        'favicon.ico',
        'manifest.json',
        'img/icon-60.png',
        'img/icon-114.png',
        'img/icon-152.png',
        'img/icon-558.png'
      ]);
    })
  );
});

// Use ServiceWorker (or not) to fetch data
self.addEventListener('fetch', function(event) {

  event.respondWith(

    // Look for something in the cache that matches the request
    caches.match(event.request).then(function(response) {

      // If we find something, return it
      // Otherwise, use the network instead
      return response || fetch(event.request);
    })
  );
});