enable PWA and bug fixes

package.json

@@ -1,14 +1,14 @@
 {
-  "name": "wtf-webpack-starterkit",
+  "name": "hydrapp",
   "version": "1.0.1",
-  "description": "WTF Webpack starterkit",
+  "description": "hydrapp",
   "main": "index.js",
   "private": true,
   "scripts": {
     "start": "webpack-dev-server --config webpack.dev.js --mode development",
     "build": "webpack --config webpack.prod.js --mode production",
     "publish": "npm run build && gh-pages -d dist",
-    "generate-icons": "npx pwa-asset-generator ./src/assets/img/logo.svg public/pwa -i ./src/pages/index.html -m ./public/manifest.json  --path-override pwa --type png -b \"#2D2241\""
+    "generate-icons": "npx pwa-asset-generator ./src/assets/img/glass_with_water.svg public/pwa -i ./src/pages/index.html -m ./public/manifest.json  --path-override pwa --type png -b \"#fff\""
   },
   "keywords": [
     "Webpack",

public/manifest.json

@@ -1,12 +1,12 @@
 {
-  "name": "WTF: PWA",
-  "short_name": "WTF: PWA",
-  "theme_color": "#2D2241",
-  "background_color": "#2D2241",
+  "name": "hydrapp",
+  "short_name": "hydrapp",
+  "theme_color": "#fff",
+  "background_color": "#fff",
   "display": "standalone",
   "orientation": "portrait",
-  "scope": "/wtf-webpack-starter/",
-  "start_url": "/wtf-webpack-starter/",
+  "scope": "/hydrapp/",
+  "start_url": "/htdrapp/",
   "icons": [
     {
       "src": "pwa/manifest-icon-192.png",

src/js/index.js

@@ -1,8 +1,8 @@
 import '../scss/main.scss';
 
 // uncomment the lines below to enable PWA
-// import {registerSW} from './pwa.js';
-// registerSW();
+import {registerSW} from './pwa.js';
+registerSW();
 
 const add = document.querySelector('.flex__add--js');
 const subtract = document.querySelector('.flex__subtract--js');
@@ -20,9 +20,9 @@ let counterSelector = document.querySelectorAll('.main-counter--js');
 let counter = 0;
 let percentage;
 
-const key = new Date().toISOString().slice(0, 10);
-const keyDay = key.slice(8, 10);
-const keyMonth = key.slice(5, 7);
+const key = new Date().toLocaleString().slice(0, 10);
+const keyDay = key.slice(0, 2);
+const keyMonth = key.slice(3, 5);
 
 hamburger.addEventListener('click', () => {
   // hamburger animation trigger
@@ -35,7 +35,6 @@ const percentageCalc = () => {
   for (let i = 0; i < percentCounter.length; i++) {
     percentCounter[i].innerHTML = `${Math.round(percentage)}%`;
   }
-  // percentCounter.innerHTML = `${Math.round(percentage)}%`;
 };
 const updateUI = () => {
   if (counter >= 0) {
@@ -56,11 +55,11 @@ const updateUI = () => {
   }
 };
 const increment = () => {
-  counter += 1;
+  counter++;
   updateUI();
 };
 const decrement = () => {
-  counter -= 1;
+  counter--;
   updateUI();
 };
 
@@ -77,7 +76,14 @@ if (entry) {
     percentageCalc();
   } else {
     // if there is nothing in key, value = '0' (new day)
-    counter = 0;
+    localStorage.setItem(
+      key,
+      JSON.stringify({
+        day: keyDay,
+        month: keyMonth,
+        value: 0,
+      })
+    );
   }
 } else {
   for (let i = 0; i < counterSelector.length; i++) {
@@ -179,13 +185,12 @@ for (let [key, value] of storageArrayEntries) {
       return Math.round(percentage);
     };
     historyArticles = `<article class="navigation__history-element"><h2 class="navigation__history-element-header">${key.slice(
-      8,
-      10
+      0,
+      2
     )}.${key.slice(
-      5,
-      7
+      3,
+      5
     )}</h2><p class="navigation__history-element-text"> Cups drunk: <span class="cups-count--js">${cupsAmount}</span></p><p class="navigation__history-element-text">Daily water intake: <span class="percentage--js">${calc()}%</span></p></article>`;
     historyElements.insertAdjacentHTML('beforeend', historyArticles);
   }
 }
-// localStorage.clear();

src/pages/index.html

@@ -16,15 +16,15 @@
       content="Hydrapp lets you count and manage how many glasses of water you should drink everyday."
     />
     <!-- full url with http(s) ie. https://maciejkorsan.github.io/my-repo/ -->
-    <meta property="og:url" content="" />
+    <meta property="og:url" content="https://konneki.github.io/hydrapp/" />
     <!-- full url to the image with http(s) ie. https://maciejkorsan.github.io/my-repo/assets/img/fb.png. Facebook suggests at least 1200 x 630. -->
     <meta
       property="og:image"
-      content="https://maciejkorsan.com/wtf-gulp-starter/assets/img/cover.png"
+      content="https://konneki.github.io/hydrapp/public/og.png"
     />
 
     <!-- uncomment the line below to enable PWA  -->
-    <!-- <link rel="manifest" href="manifest.json" /> -->
+    <link rel="manifest" href="manifest.json" />
 
     <link
       rel="apple-touch-icon"
@@ -160,8 +160,8 @@
         viewBox="0 0 64 64"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        xml:space="preserve"
+        xlink="http://www.w3.org/1999/xlink"
+        space="preserve"
         xmlns:serif="http://www.serif.com/"
         style="
           fill-rule: evenodd;
@@ -254,8 +254,8 @@
           viewBox="0 0 78 77"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          xml:space="preserve"
+          xlink="http://www.w3.org/1999/xlink"
+          space="preserve"
           xmlns:serif="http://www.serif.com/"
           style="
             fill-rule: evenodd;
@@ -290,8 +290,8 @@ <h1 class="flex__main-counter main-counter--js">1</h1>
             viewBox="0 0 422 672"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            xml:space="preserve"
+            xlink="http://www.w3.org/1999/xlink"
+            space="preserve"
             xmlns:serif="http://www.serif.com/"
             style="
               fill-rule: evenodd;
@@ -329,8 +329,8 @@ <h1 class="flex__main-counter main-counter--js">1</h1>
           viewBox="0 0 152 151"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          xml:space="preserve"
+          xlink="http://www.w3.org/1999/xlink"
+          space="preserve"
           xmlns:serif="http://www.serif.com/"
           style="
             fill-rule: evenodd;