code-boxx/0-JS-GROCERY.MD

## 0-JS-GROCERY.MD

      
    Raw
  

              0-JS-GROCERY.MD
            
          
    JAVASCRIPT GROCERY LIST PWA

https://code-boxx.com/javascript-grocery-list/
IMAGES


LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## grocery-list.css
/* (A) ENTIRE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
#gro-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

/* (B) ADD ITEM */
#gro-form, input, button {
  font-size: 16px;
  padding: 10px;
}
#gro-form {
  display: flex;
  border: 1px solid #ccc;
  background: #f2f2f2;
}
button, input { border: 0; }
input[type=number] { width: 80px; }
input[type=text] { flex-grow: 1; }
button, input[type=button], input[type=submit] {
  cursor: pointer;
  color: #fff;
  background: #b10b1a;
}

/* (C) ITEMS LIST */
#gro-list { margin-top: 20px; }
.item-row {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.item-row.yes { background: #c6ffc3; }
.item-row.no { background: #ffd7d7; }
.item-name {
  flex-grow: 1;
  padding: 0 10px;
}
.item-ok {
  color: #000;
  background: none;
}

## grocery-list.html
<!DOCTYPE html>
<html>
  <head>
    <title>
      Simple Javascript Grocery List
    </title>
    <meta charset="utf-8">

    <!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
    <link rel="icon" href="favicon.png" type="image/png">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="white">
    <link rel="apple-touch-icon" href="icon-512.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="JS Grocery List">
    <meta name="msapplication-TileImage" content="icon-512.png">
    <meta name="msapplication-TileColor" content="#ffffff">

    <!-- WEB APP MANIFEST -->
    <!-- https://web.dev/add-manifest/ -->
    <link rel="manifest" href="grocery-manifest.json">

    <!-- SERVICE WORKER -->
    <script>
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("grocery-worker.js");
    }
    </script>

    <!-- STYLESHEET + JAVASCRIPT -->
    <!-- https://fonts.google.com/icons?icon.query=delete&icon.style=Filled&icon.set=Material+Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="grocery-list.css" rel="stylesheet">
    <script src="grocery-list.js"></script>
  </head>
  <body>
    <div id="gro-wrap">
      <h1>GROCERY LIST</h1>

      <!-- (A) ADD ITEM -->
      <form id="gro-form">
        <input type="number" id="gro-qty" min="1" value="1" placeholder="Quantity" required disabled>
        <input type="text" id="gro-item" placeholder="Item Name" required disabled>
        <button id="gro-add" class="material-icons" disabled>add</button>
      </form>

      <!-- (B) ITEM LIST -->
      <div id="gro-list"></div>
    </div>
  </body>
</html>

## grocery-list.js
var glist = {
  // (A) INITIALIZE GROCERY LIST
  items : [],   // current grocery list
  hqty : null,  // html add quantity field
  hitem : null, // html add item field
  hlist : null, // html <div> grocery list
  init : () => {
    // (A1) GET HTML ELEMENTS
    glist.hqty = document.getElementById("gro-qty");
    glist.hitem = document.getElementById("gro-item");
    glist.hlist = document.getElementById("gro-list");

    // (A2) ENABLE FORM
    glist.hqty.disabled = false;
    glist.hitem.disabled = false;
    document.getElementById("gro-add").disabled = false;
    document.getElementById("gro-form").onsubmit = glist.add;

    // (A3) RESTORE PREVIOUS GROCERY LIST
    if (localStorage.items == undefined) { localStorage.items = "[]"; }
    glist.items = JSON.parse(localStorage.items);

    // (A4) DRAW HTML GROCERY LIST
    glist.draw();
  },

  // (B) SAVE GROCERY LIST INTO LOCAL STORAGE
  save : () => {
    if (localStorage.items == undefined) { localStorage.items = "[]"; }
    localStorage.items = JSON.stringify(glist.items);
  },

  // (C) ADD NEW ITEM TO THE LIST
  add : evt => {
    // (C1) ADD NEW ITEM TO LIST
    glist.items.push({
      qty  : glist.hqty.value,  // item quantity
      name : glist.hitem.value, // item name
      got  : false              // item accquired
    });
    glist.save();

    // (C2) RESET HTML ADD FORM
    glist.hqty.value = 1;
    glist.hitem.value = "";

    // (C3) REDRAW HTML GROCERY LIST
    glist.draw();
    return false;
  },

  // (D) DELETE SELECTED ITEM
  delete : id => { if (confirm("Remove this item?")) {
    glist.items.splice(id, 1);
    glist.save();
    glist.draw();
  }},

  // (E) TOGGLE ITEM BETWEEN "ACCQUIRED" & "NOT YET"
  toggle : id => {
    glist.items[id].got = !glist.items[id].got;
    glist.save();
    glist.draw();
  },

  // (F) DRAW THE HTML GROCERY LIST
  draw : () => {
    // (F1) RESET HTML LIST
    glist.hlist.innerHTML = "";

    // (F2) NO ITEMS
    if (glist.items.length == 0) {
      glist.hlist.innerHTML = "<div class='item-row item-name'>No items found.</div>";
    }

    // (F3) DRAW ITEMS
    else { for (let i in glist.items) {
      // (F3-1) ITEM ROW
      let row = document.createElement("div");
      row.className = glist.items[i].got ? "item-row yes" : "item-row no";
      glist.hlist.appendChild(row);

      // (F3-2) DELETE BUTTON
      let del = document.createElement("button");
      del.className = "item-del material-icons";
      del.innerHTML = "delete";
      del.onclick = () => glist.delete(i);
      row.appendChild(del);

      // (F3-3) ITEM QUANTITY & NAME
      let name = document.createElement("div");
      name.innerHTML = `${glist.items[i].qty} X ${glist.items[i].name}`;
      name.className = "item-name";
      row.appendChild(name);

      // (F3-4) ITEM ACCQUIRED
      let ok = document.createElement("button");
      ok.className = "item-ok material-icons";
      ok.innerHTML = glist.items[i].got ? "done" : "clear";
      ok.onclick = () => glist.toggle(i);
      row.appendChild(ok);
    }}
  }
};
window.addEventListener("load", glist.init);

## grocery-manifest.json
{
  "short_name": "JS Grocery",
  "name": "JS Grocery",
  "icons": [{
     "src": "favicon.png",
     "sizes": "64x64",
     "type": "image/png"
  }, {
    "src": "icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "start_url": "/grocery-list.html",
  "scope": "/",
  "background_color": "white",
  "theme_color": "white",
  "display": "standalone"
}

## grocery-worker.js
// (A) CREATE/INSTALL CACHE
self.addEventListener("install", evt => {
  self.skipWaiting();
  evt.waitUntil(
    caches.open("JSGrocery")
    .then(cache => cache.addAll([
      "favicon.png",
      "icon-512.png",
      "grocery-list.html",
      "grocery-list.css",
      "grocery-list.js",
      "grocery-manifest.json"
    ]))
    .catch(err => console.error(err))
  );
});

// (B) CLAIM CONTROL INSTANTLY
self.addEventListener("activate", evt => self.clients.claim());

// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
self.addEventListener("fetch", evt => evt.respondWith(
  caches.match(evt.request).then(res => res || fetch(evt.request))
));
	/* (A) ENTIRE PAGE */
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	#gro-wrap {
	max-width: 1000px;
	margin: 0 auto;
	}

	/* (B) ADD ITEM */
	#gro-form, input, button {
	font-size: 16px;
	padding: 10px;
	}
	#gro-form {
	display: flex;
	border: 1px solid #ccc;
	background: #f2f2f2;
	}
	button, input { border: 0; }
	input[type=number] { width: 80px; }
	input[type=text] { flex-grow: 1; }
	button, input[type=button], input[type=submit] {
	cursor: pointer;
	color: #fff;
	background: #b10b1a;
	}

	/* (C) ITEMS LIST */
	#gro-list { margin-top: 20px; }
	.item-row {
	margin: 10px 0;
	display: flex;
	align-items: center;
	}
	.item-row.yes { background: #c6ffc3; }
	.item-row.no { background: #ffd7d7; }
	.item-name {
	flex-grow: 1;
	padding: 0 10px;
	}
	.item-ok {
	color: #000;
	background: none;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>
	Simple Javascript Grocery List
	</title>
	<meta charset="utf-8">

	<!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
	<link rel="icon" href="favicon.png" type="image/png">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="theme-color" content="white">
	<link rel="apple-touch-icon" href="icon-512.png">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="JS Grocery List">
	<meta name="msapplication-TileImage" content="icon-512.png">
	<meta name="msapplication-TileColor" content="#ffffff">

	<!-- WEB APP MANIFEST -->
	<!-- https://web.dev/add-manifest/ -->
	<link rel="manifest" href="grocery-manifest.json">

	<!-- SERVICE WORKER -->
	<script>
	if ("serviceWorker" in navigator) {
	navigator.serviceWorker.register("grocery-worker.js");
	}
	</script>

	<!-- STYLESHEET + JAVASCRIPT -->
	<!-- https://fonts.google.com/icons?icon.query=delete&icon.style=Filled&icon.set=Material+Icons -->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<link href="grocery-list.css" rel="stylesheet">
	<script src="grocery-list.js"></script>
	</head>
	<body>
	<div id="gro-wrap">
	<h1>GROCERY LIST</h1>

	<!-- (A) ADD ITEM -->
	<form id="gro-form">
	<input type="number" id="gro-qty" min="1" value="1" placeholder="Quantity" required disabled>
	<input type="text" id="gro-item" placeholder="Item Name" required disabled>
	<button id="gro-add" class="material-icons" disabled>add</button>
	</form>

	<!-- (B) ITEM LIST -->
	<div id="gro-list"></div>
	</div>
	</body>
	</html>
	var glist = {
	// (A) INITIALIZE GROCERY LIST
	items : [], // current grocery list
	hqty : null, // html add quantity field
	hitem : null, // html add item field
	hlist : null, // html <div> grocery list
	init : () => {
	// (A1) GET HTML ELEMENTS
	glist.hqty = document.getElementById("gro-qty");
	glist.hitem = document.getElementById("gro-item");
	glist.hlist = document.getElementById("gro-list");

	// (A2) ENABLE FORM
	glist.hqty.disabled = false;
	glist.hitem.disabled = false;
	document.getElementById("gro-add").disabled = false;
	document.getElementById("gro-form").onsubmit = glist.add;

	// (A3) RESTORE PREVIOUS GROCERY LIST
	if (localStorage.items == undefined) { localStorage.items = "[]"; }
	glist.items = JSON.parse(localStorage.items);

	// (A4) DRAW HTML GROCERY LIST
	glist.draw();
	},

	// (B) SAVE GROCERY LIST INTO LOCAL STORAGE
	save : () => {
	if (localStorage.items == undefined) { localStorage.items = "[]"; }
	localStorage.items = JSON.stringify(glist.items);
	},

	// (C) ADD NEW ITEM TO THE LIST
	add : evt => {
	// (C1) ADD NEW ITEM TO LIST
	glist.items.push({
	qty : glist.hqty.value, // item quantity
	name : glist.hitem.value, // item name
	got : false // item accquired
	});
	glist.save();

	// (C2) RESET HTML ADD FORM
	glist.hqty.value = 1;
	glist.hitem.value = "";

	// (C3) REDRAW HTML GROCERY LIST
	glist.draw();
	return false;
	},

	// (D) DELETE SELECTED ITEM
	delete : id => { if (confirm("Remove this item?")) {
	glist.items.splice(id, 1);
	glist.save();
	glist.draw();
	}},

	// (E) TOGGLE ITEM BETWEEN "ACCQUIRED" & "NOT YET"
	toggle : id => {
	glist.items[id].got = !glist.items[id].got;
	glist.save();
	glist.draw();
	},

	// (F) DRAW THE HTML GROCERY LIST
	draw : () => {
	// (F1) RESET HTML LIST
	glist.hlist.innerHTML = "";

	// (F2) NO ITEMS
	if (glist.items.length == 0) {
	glist.hlist.innerHTML = "<div class='item-row item-name'>No items found.</div>";
	}

	// (F3) DRAW ITEMS
	else { for (let i in glist.items) {
	// (F3-1) ITEM ROW
	let row = document.createElement("div");
	row.className = glist.items[i].got ? "item-row yes" : "item-row no";
	glist.hlist.appendChild(row);

	// (F3-2) DELETE BUTTON
	let del = document.createElement("button");
	del.className = "item-del material-icons";
	del.innerHTML = "delete";
	del.onclick = () => glist.delete(i);
	row.appendChild(del);

	// (F3-3) ITEM QUANTITY & NAME
	let name = document.createElement("div");
	name.innerHTML = `${glist.items[i].qty} X ${glist.items[i].name}`;
	name.className = "item-name";
	row.appendChild(name);

	// (F3-4) ITEM ACCQUIRED
	let ok = document.createElement("button");
	ok.className = "item-ok material-icons";
	ok.innerHTML = glist.items[i].got ? "done" : "clear";
	ok.onclick = () => glist.toggle(i);
	row.appendChild(ok);
	}}
	}
	};
	window.addEventListener("load", glist.init);
	{
	"short_name": "JS Grocery",
	"name": "JS Grocery",
	"icons": [{
	"src": "favicon.png",
	"sizes": "64x64",
	"type": "image/png"
	}, {
	"src": "icon-512.png",
	"sizes": "512x512",
	"type": "image/png"
	}],
	"start_url": "/grocery-list.html",
	"scope": "/",
	"background_color": "white",
	"theme_color": "white",
	"display": "standalone"
	}
	// (A) CREATE/INSTALL CACHE
	self.addEventListener("install", evt => {
	self.skipWaiting();
	evt.waitUntil(
	caches.open("JSGrocery")
	.then(cache => cache.addAll([
	"favicon.png",
	"icon-512.png",
	"grocery-list.html",
	"grocery-list.css",
	"grocery-list.js",
	"grocery-manifest.json"
	]))
	.catch(err => console.error(err))
	);
	});

	// (B) CLAIM CONTROL INSTANTLY
	self.addEventListener("activate", evt => self.clients.claim());

	// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
	self.addEventListener("fetch", evt => evt.respondWith(
	caches.match(evt.request).then(res => res \|\| fetch(evt.request))
	));