diff --git a/app.js b/app.js index 10ee3b8..e7a5848 100644 --- 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 new file mode 100644 index 0000000..eae2dcd --- /dev/null +++ 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" + } + ] +} \ No newline at end of file diff --git a/icons/logo-1024.png b/icons/logo-1024.png new file mode 100644 index 0000000..b51062f Binary files /dev/null and b/icons/logo-1024.png differ diff --git a/icons/logo-512.png b/icons/logo-512.png new file mode 100644 index 0000000..a69952f Binary files /dev/null and b/icons/logo-512.png differ diff --git a/index.html b/index.html index d1a6f57..293d96e 100644 --- a/index.html +++ b/index.html @@ -2,102 +2,123 @@ - - - + + + + + - - + + + + - - + + - - + + + + + + + + - - - - - Day Planner | Write Your Daily Tasks Here + + + + Day Planner | Write Your Daily Tasks Here - + +
+
+
+
+
+

What Are You Planning To do Today?

+
+
+
+ +
+
- -
+ +
+
+ +
+ -
    - -
+

Things To do Today

+ +
+
+

Can't find your task ? 👀

-
-
-
-
    - -
- -
+
+
-
-
+ +
    + +
+
+
+
+
+
    + +
+ + + +
+
+
+ + - - - + + + diff --git a/screenshot/screenshot1.png b/screenshot/screenshot1.png new file mode 100644 index 0000000..8484fdc Binary files /dev/null and b/screenshot/screenshot1.png differ diff --git a/screenshot/screenshot2.png b/screenshot/screenshot2.png new file mode 100644 index 0000000..7d28950 Binary files /dev/null and b/screenshot/screenshot2.png differ diff --git a/screenshot/screenshot3.png b/screenshot/screenshot3.png new file mode 100644 index 0000000..1686fb4 Binary files /dev/null and b/screenshot/screenshot3.png differ diff --git a/serviceworker.js b/serviceworker.js new file mode 100644 index 0000000..cd192bb --- /dev/null +++ b/serviceworker.js @@ -0,0 +1,31 @@ +// v1 + +// assets + +const assets = ['/','style.css','app.js','https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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/bootstrap@5.0.1/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; + }) + ); +}) \ No newline at end of file diff --git a/style.css b/style.css index 833bf91..b2e0c73 100644 --- 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; + } +} \ No newline at end of file