vipul0425 · vipul0425 · Jan 6, 2022
diff --git a/app.js b/app.js
@@ -8,6 +8,8 @@ const search = document.querySelector('#search');
 const collection = document.querySelector('#collection');
 const collectionDone = document.querySelector('#collection-done');
 const clearAllBtn = document.querySelector('#clearall');
+const shareAllBtn = document.querySelector('#shareall');
+const installApp = document.querySelector('#installapp');
 
 setInterval(clockFunction,1000);
 loadEventListeners();
@@ -117,6 +119,14 @@ function loadEventListeners(){
 
     search.addEventListener('keyup', searchItem);
 
+    // share all
+
+    shareAllBtn.addEventListener('click',share);
+
+    // install app
+
+    installApp.addEventListener('click',install);
+
 }
 
 // get tasks from local stroge 
@@ -263,3 +273,42 @@ function searchItem(e){
 
 }
 
+// share 
+
+function share() {
+    let notes = "";
+    if (localStorage.getItem('tasks')) {
+        notes = JSON.parse(localStorage.getItem('tasks'));
+        navigator.share({
+            title : "Day Planner",
+            text : notes
+        });
+    } else{
+        alert("Please add something to the list.")
+    }
+
+}
+
+
+// insatll app
+let bip = null;
+window.addEventListener('beforeinstallprompt',event =>{
+    event.preventDefault();
+    bip = event;
+});
+
+function install() {
+    if (bip) {
+        bip.prompt();
+        console.log(bip);
+    } else {
+      alert(
+          `
+           1. Click on 3 dots at top right corner of your browser.
+           2. Find install app.
+           3. Click on it.
+          `
+      )
+    }
+}
+
diff --git a/app.webmanifest b/app.webmanifest
@@ -0,0 +1,45 @@
+{
+    "name": "Day Planner",
+    "short_name": "Day Planner",
+    "start_url": "./",
+    "orientation": "any",
+    "theme_color": "#da2d2d",
+    "scope": "./",
+    "display": "standalone",
+    "description" : "This app helps you to plan your day by writing down the task and marking as done when you complete it.",
+    "icons" : [
+        {
+            "src": "icons/logo-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+          "src" : "icons/logo-1024.png",
+          "sizes": "1024x1024",
+          "type": "image/png"
+        },
+        {
+            "src": "icons/logo-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ],
+    "screenshots" : [
+        {
+          "src": "screenshot/screenshot1.png",
+          "sizes": "563x1218",
+          "type": "image/png"
+        },
+        {
+            "src" : "screenshot/screenshot2.png",
+            "sizes" : "563x1218",
+            "type" : "image/png"
+        },
+        {
+            "src" : "screenshot/screenshot3.png",
+            "sizes" : "563x1218",
+            "type" : "image/png"
+        }
+    ]
+}
diff --git a/icons/logo-1024.png b/icons/logo-1024.png
diff --git a/icons/logo-512.png b/icons/logo-512.png
diff --git a/index.html b/index.html
@@ -2,102 +2,123 @@
 <html lang="en">
 
 <head>
-    <!-- Required meta tags -->
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Required meta tags -->
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <!-- theme-color -->
+  <meta name="theme-color" content="#da2d2d">
 
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+  <!-- manifest -->
+  <link rel="manifest" href="app.webmanifest">
+  <!-- Bootstrap CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
-    <!-- My Css-->
-    <link rel="stylesheet" href="style.css">
+  <!-- My Css-->
+  <link rel="stylesheet" href="style.css">
 
-    <!-- Font Awesome-->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
-        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- Font Awesome-->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
+    integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Raleway:ital@1&display=swap"
+    rel="stylesheet">
+  <!-- apple-touch-icon -->
+  <link rel="apple-touch-icon" href="icons/logo-512.png">
 
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Raleway:ital@1&display=swap"
-        rel="stylesheet">
 
-    <title>Day Planner | Write Your Daily Tasks Here</title>
+  <!-- Script -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register("serviceworker.js");
+    }
+  </script>
+
+  <title>Day Planner | Write Your Daily Tasks Here</title>
 </head>
 
 <body>
 
-    <nav>
-        <div class="container-fluid">
-          <div class="row">
-            <div class="col-4 col-lg-3 mt-2"><p class="fs-6"><span id="date"></span><br>
-              <span id="day"></span></p></div>
-            <div class="col-4 col-lg-6"><a class="navbar-brand text-center fs-1 text-white" href="#">
-              <h1><span>DAY</span> PLANNER</h1>
-            </a></div>
-            <div class="col-4 col-lg-3 d-flex justify-content-end mt-2"><p class="fs-5"><span id="time"></span></p></div>
-          </div>
+  <nav>
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-4 col-lg-3 mt-2">
+          <p class="fs-6"><span id="date"></span><br>
+            <span id="day"></span>
+          </p>
         </div>
-      </nav>
-
-      <div class="container">
-         <div class="row">
-           <div class="col-12">
-            <div class="card text-center">
-                <div class="card-header">
-                    <h4 class="card-title my-3"><span class="mark-heading">What Are You Planning To do Today?</span></h4>
-                </div>
-                <div class="card-body">
-                    <div class="container">
-
-                    <form id="task-form">
-                      <div class="d-lg-flex justify-content-evenly">
-                          <div>
-                              <input type="text" name="Task" id="task" class="form-control task-input" placeholder="Add a Task">
-                            </div>
-                        <div>
-                        <button type="submit" class="btn btn-submit my-lg-0 my-4">Add To List </button>
-                    </div>
-                      </div>
-                    </form>
-
-                  <h4 class="card-title my-3 my-lg-5"><span class="mark-heading">Things To do Today</span></h4>
-
-                  <div class="d-lg-flex justify-content-evenly my-4">
-                    <div>
-                        <p class="text-muted mt-3">Can't find your task ? 👀</p>
-                      </div>
+        <div class="col-4 col-lg-6"><a class="navbar-brand text-center fs-1 text-white" href="#">
+            <h1><span>DAY</span> PLANNER</h1>
+          </a></div>
+        <div class="col-4 col-lg-3 d-flex justify-content-end mt-2">
+          <p class="fs-5"><span id="time"></span></p>
+        </div>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="card text-center">
+          <div class="card-header">
+            <h4 class="card-title my-3"><span class="mark-heading">What Are You Planning To do Today?</span></h4>
+          </div>
+          <div class="card-body">
+            <div class="container">
+
+              <form id="task-form">
+                <div class="d-lg-flex justify-content-evenly">
                   <div>
-                    <input type="text" name="Search" id="search" class="form-control task-input" placeholder="Search Here 🔎">
-              </div>
+                    <input type="text" name="Task" id="task" class="form-control task-input" placeholder="Add a Task">
+                  </div>
+                  <div>
+                    <button type="submit" class="btn btn-submit my-lg-0 my-4">Add To List </button>
+                  </div>
                 </div>
+              </form>
 
-                  <ul class="list-group list-group-flush" id="collection">
-
-                  </ul>
+              <h4 class="card-title my-3 my-lg-5"><span class="mark-heading">Things To do Today</span></h4>
+
+              <div class="d-lg-flex justify-content-evenly my-4">
+                <div>
+                  <p class="text-muted mt-3">Can't find your task ? 👀</p>
                 </div>
-            </div>
-                <div class="card-footer text-muted">
-                    <div class="container">
-                    <ul class="list-group list-group-flush" id="collection-done">
-
-                      </ul>
-                      <button class="btn btn-submit my-4" id="clearall">Clear List</button>
-                    </div>
+                <div>
+                  <input type="text" name="Search" id="search" class="form-control task-input"
+                    placeholder="Search Here 🔎">
                 </div>
               </div>
-           </div>
-         </div>
+
+              <ul class="list-group list-group-flush" id="collection">
+
+              </ul>
+            </div>
+          </div>
+          <div class="card-footer text-muted">
+            <div class="container">
+              <ul class="list-group list-group-flush" id="collection-done">
+
+              </ul>
+              <button class="btn btn-submit my-4" id="clearall">Clear List</button>
+              <button class="btn btn-submit my-4" id="shareall">Share List</button>
+              <button class="btn btn-submit my-4" id="installapp">Install App</button>
+            </div>
+          </div>
+        </div>
       </div>
+    </div>
+  </div>
 
 
-    <!--  Bootstrap Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
-        crossorigin="anonymous"></script>
-    <script src="app.js"></script>
+  <!--  Bootstrap Bundle with Popper -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
+    crossorigin="anonymous"></script>
+  <script src="app.js"></script>
 
 </body>
 

diff --git a/screenshot/screenshot1.png b/screenshot/screenshot1.png
diff --git a/screenshot/screenshot2.png b/screenshot/screenshot2.png
diff --git a/screenshot/screenshot3.png b/screenshot/screenshot3.png
diff --git a/serviceworker.js b/serviceworker.js
@@ -0,0 +1,31 @@
+// v1
+
+// assets
+
+const assets = ['/','style.css','app.js','https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css','https://fonts.googleapis.com/css2?family=Raleway:ital@1&display=swap','https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Raleway:ital@1&display=swap','https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'];
+
+// cache assets
+self.addEventListener('install',event=>{
+    event.waitUntill(
+        caches.open("assets_todo").then(cache =>{
+            cache.addAll(assets);
+        })
+    );
+});
+
+// serve cache
+self.addEventListener('fetch',event=>{
+    event.respondWith(
+        caches.match(event.request)
+        .then(cachedResponse=>{
+            const fetchPromise = fetch(event.request).then(
+                networkResponse => {
+                    caches.open("assets_todo").then( cache => {
+                        cache.put(event.request,networkResponse.clone());
+                        return networkResponse;
+                    } );
+                });
+                return cachedResponse || fetchPromise;
+        })
+        );
+})
diff --git a/style.css b/style.css
@@ -5,10 +5,14 @@ body{
 }
 h1,h2,h3,h4,h5,h6 {
     font-family: 'Caveat', cursive;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .navbar{
     background-color: #272822 !important;
+
 }
 .navbar-brand span{
     font-weight: bolder;
@@ -94,3 +98,8 @@ h1,h2,h3,h4,h5,h6 {
      background: transparent;
      border: 1px solid rgb(82 82 82 / 32%)
     }
+@media (display-mode: standalone),(display-mode:minimal-ui){
+    #installapp{
+        display: none;
+    }
+}