code-boxx/0-JS-BOOKS-LIST.MD

## 0-JS-BOOKS-LIST.MD

      
    Raw
  

              0-JS-BOOKS-LIST.MD
            
          
    JAVASCRIPT BOOKS LIST WEB APP

https://code-boxx.com/simple-books-list-javascript/
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.

  
## 1-book-list.html
<!DOCTYPE html>
<html>
  <head>
    <!-- TITLE + CHARSET + DESCRIPTION + VIEWPORT + FAVICON -->
    <title>JS Book List</title>
    <meta charset="utf-8">
    <meta name="description" content="Books List">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
    <link rel="icon" href="favicon.png" type="image/png">

    <!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
    <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="Books 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="3a-manifest.json">

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

    <!-- STYLESHEET + JAVASCRIPT -->
    <link rel="stylesheet" href="2-book-list.css">
    <script src="2-book-list.js"></script>
  </head>
  <body>
    <!-- (A) BOOK LIST -->
    <div id="wrap">
      <div id="list"></div>
      <div id="dummy" onclick="bl.toggle(true)">ADD BOOK</div>
    </div>

    <!-- (B) BOOK FORM -->
    <div id="form"><form onsubmit="return bl.save()">
      <div id="fClose" onclick="bl.toggle(false)">X</div>
      <input type="hidden" id="fID">
      <label>Title</label>
      <input type="text" id="fTitle" required>
      <label>Author</label>
      <input type="text" id="fAuthor" required>
      <label>ISBN (optional)</label>
      <input type="text" id="fISBN">
      <input type="submit" value="Save">
    </form></div>
  </body>
</html>

## 2-book-list.css
/* (A) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
body {
  background: #ededed;
  padding: 10px;
}
#dummy, .rDel, .rEdit, #fClose, #form input[type=submit] { cursor: pointer; }

/* (B) BOOKS LIST */
/* (B1) LIST WRAPPER */
#wrap {
  max-width: 500px;
  margin: 0 auto;
}

/* (B2) SHARED ROWS */
#dummy, .row {
  padding: 15px;
  border-radius: 10px;
}

/* (B2) ADD NEW BOOK */
#dummy {
  text-align: center;
  font-weight: 700;
  color: #7e7e7e;
  border: 2px dashed #aaa;
}

/* (B3) LIST ITEMS */
.row {
  display: flex;
  align-items: center;
  margin: 15px 0;
  background: #fff;
}
.rDel, .rTxt, .rEdit { padding: 5px; }
.rDel, .rEdit { font-size: 20px; }
.rDel { color: #9f1d1d; }
.rTxt { flex-grow: 1; }
.rTitle { font-weight: 700; }
.rAuthor {
  margin-top: 5px;
  color: #7e7e7e;
  font-size: 14px;
}

/* (C) BOOK FORM */
/* (C1) FORM WRAPPER */
#form {
  /* (C1-1) FULL PAGE */
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.5);

  /* (C1-2) CENTERED */
  display: flex;
  justify-content: center;
  align-items: center;

  /* (C1-3) HIDDEN */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}

/* (C1-4) SHOW */
#form.show {
  opacity: 1;
  visibility: visible;
}

/* (C2) FORM */
#form form {
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  position: relative;
}

/* (C3) FORM FIELDS */
#fClose {
  position: absolute;
  top: 0; right: 0;
  padding: 10px;
  font-weight: 700;
  color: #fff;
  background: #9f1d1d;
}
#form input, #form label {
  display: block;
  width: 100%;
}
#form input { padding: 10px; }
#form label { padding: 10px 0; }
#form input[type=submit] {
  margin-top: 20px;
  color: #fff;
  background: #2142bb;
  border: 0;
}

## 2-book-list.js
var bl = {
  // (A) INIT
  data : null, // books list
  hList : null, // html books list
  hForm : null, // html book form
  fID : null, fTitle : null, fAuthor : null, fISBN : null, // html form fields
  init : () => {
    // (A1) GET HTML ELEMENTS
    bl.hList = document.getElementById("list");
    bl.hForm = document.getElementById("form");
    bl.fID = document.getElementById("fID");
    bl.fTitle = document.getElementById("fTitle");
    bl.fAuthor = document.getElementById("fAuthor");
    bl.fISBN = document.getElementById("fISBN");

    // (A2) LOAD ENTRIES
    bl.data = localStorage.getItem("books");
    if (bl.data==null) { bl.data = []; }
    else { bl.data = JSON.parse(bl.data); }

    // (A3) DRAW ENTRIES
    bl.draw();
  },

  // (B) TOGGLE FORM
  toggle : id => {
    if (id===false) {
      bl.fID.value = "";
      bl.fTitle.value = "";
      bl.fAuthor.value = "";
      bl.fISBN.value = "";
      bl.hForm.classList.remove("show");
    } else {
      if (Number.isInteger(id)) {
        bl.fID.value = id;
        bl.fTitle.value = bl.data[id].t;
        bl.fAuthor.value = bl.data[id].a;
        bl.fISBN.value = bl.data[id].i;
      }
      bl.hForm.classList.add("show");
    }
  },

  // (C) DRAW BOOKS HTML
  draw : () => {
    let row;
    bl.hList.innerHTML = "";
    bl.data.forEach((book, i) => {
      row = document.createElement("div");
      row.className = "row";
      row.innerHTML = `<div class="rDel" onclick="bl.del(${i})">X</div>
      <div class="rTxt">
        <div class="rTitle">${book.t}${(book.i?" ("+book.i+")":"")}</div>
        <div class="rAuthor">${book.a}</div>
      </div>
      <div class="rEdit" onclick="bl.toggle(${i})">&#9998;</div>`;
      bl.hList.appendChild(row);
    });
  },

  // (D) SAVE BOOK
  save : () => {
    // (D1) GET DATA
    let data = {
      t : bl.fTitle.value,
      a : bl.fAuthor.value,
      i : bl.fISBN.value
    };

    // (D2) UPDATE DATA ARRAY
    if (bl.fID.value=="") { bl.data.push(data); }
    else { bl.data[parseInt(bl.fID.value)] = data; }
    localStorage.setItem("books", JSON.stringify(bl.data));

    // (D3) UPDATE HTML INTERFACE
    bl.toggle(false);
    bl.draw();
    return false;
  },

  // (E) DELETE BOOK
  del : id => { if (confirm("Delete book?")) {
    bl.data.splice(id, 1);
    localStorage.setItem("books", JSON.stringify(bl.data));
    bl.draw();
  }}
};
window.onload = bl.init;

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

## 3b-worker.js
// (A) CREATE/INSTALL CACHE
self.addEventListener("install", evt => {
  self.skipWaiting();
  evt.waitUntil(
    caches.open("JSBooks")
    .then(cache => cache.addAll([
      "favicon.png",
      "icon-512.png",
      "1-book-list.html",
      "2-book-list.js",
      "2-book-list.css"
    ]))
    .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))
));
	<!DOCTYPE html>
	<html>
	<head>
	<!-- TITLE + CHARSET + DESCRIPTION + VIEWPORT + FAVICON -->
	<title>JS Book List</title>
	<meta charset="utf-8">
	<meta name="description" content="Books List">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
	<link rel="icon" href="favicon.png" type="image/png">

	<!-- ANDROID + CHROME + APPLE + WINDOWS APP -->
	<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="Books 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="3a-manifest.json">

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

	<!-- STYLESHEET + JAVASCRIPT -->
	<link rel="stylesheet" href="2-book-list.css">
	<script src="2-book-list.js"></script>
	</head>
	<body>
	<!-- (A) BOOK LIST -->
	<div id="wrap">
	<div id="list"></div>
	<div id="dummy" onclick="bl.toggle(true)">ADD BOOK</div>
	</div>

	<!-- (B) BOOK FORM -->
	<div id="form"><form onsubmit="return bl.save()">
	<div id="fClose" onclick="bl.toggle(false)">X</div>
	<input type="hidden" id="fID">
	<label>Title</label>
	<input type="text" id="fTitle" required>
	<label>Author</label>
	<input type="text" id="fAuthor" required>
	<label>ISBN (optional)</label>
	<input type="text" id="fISBN">
	<input type="submit" value="Save">
	</form></div>
	</body>
	</html>
	/* (A) WHOLE PAGE */
	* {
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	}
	body {
	background: #ededed;
	padding: 10px;
	}
	#dummy, .rDel, .rEdit, #fClose, #form input[type=submit] { cursor: pointer; }

	/* (B) BOOKS LIST */
	/* (B1) LIST WRAPPER */
	#wrap {
	max-width: 500px;
	margin: 0 auto;
	}

	/* (B2) SHARED ROWS */
	#dummy, .row {
	padding: 15px;
	border-radius: 10px;
	}

	/* (B2) ADD NEW BOOK */
	#dummy {
	text-align: center;
	font-weight: 700;
	color: #7e7e7e;
	border: 2px dashed #aaa;
	}

	/* (B3) LIST ITEMS */
	.row {
	display: flex;
	align-items: center;
	margin: 15px 0;
	background: #fff;
	}
	.rDel, .rTxt, .rEdit { padding: 5px; }
	.rDel, .rEdit { font-size: 20px; }
	.rDel { color: #9f1d1d; }
	.rTxt { flex-grow: 1; }
	.rTitle { font-weight: 700; }
	.rAuthor {
	margin-top: 5px;
	color: #7e7e7e;
	font-size: 14px;
	}

	/* (C) BOOK FORM */
	/* (C1) FORM WRAPPER */
	#form {
	/* (C1-1) FULL PAGE */
	position: fixed;
	top: 0; left: 0; z-index: 999;
	width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.5);

	/* (C1-2) CENTERED */
	display: flex;
	justify-content: center;
	align-items: center;

	/* (C1-3) HIDDEN */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s;
	}

	/* (C1-4) SHOW */
	#form.show {
	opacity: 1;
	visibility: visible;
	}

	/* (C2) FORM */
	#form form {
	width: 400px;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	position: relative;
	}

	/* (C3) FORM FIELDS */
	#fClose {
	position: absolute;
	top: 0; right: 0;
	padding: 10px;
	font-weight: 700;
	color: #fff;
	background: #9f1d1d;
	}
	#form input, #form label {
	display: block;
	width: 100%;
	}
	#form input { padding: 10px; }
	#form label { padding: 10px 0; }
	#form input[type=submit] {
	margin-top: 20px;
	color: #fff;
	background: #2142bb;
	border: 0;
	}
	var bl = {
	// (A) INIT
	data : null, // books list
	hList : null, // html books list
	hForm : null, // html book form
	fID : null, fTitle : null, fAuthor : null, fISBN : null, // html form fields
	init : () => {
	// (A1) GET HTML ELEMENTS
	bl.hList = document.getElementById("list");
	bl.hForm = document.getElementById("form");
	bl.fID = document.getElementById("fID");
	bl.fTitle = document.getElementById("fTitle");
	bl.fAuthor = document.getElementById("fAuthor");
	bl.fISBN = document.getElementById("fISBN");

	// (A2) LOAD ENTRIES
	bl.data = localStorage.getItem("books");
	if (bl.data==null) { bl.data = []; }
	else { bl.data = JSON.parse(bl.data); }

	// (A3) DRAW ENTRIES
	bl.draw();
	},

	// (B) TOGGLE FORM
	toggle : id => {
	if (id===false) {
	bl.fID.value = "";
	bl.fTitle.value = "";
	bl.fAuthor.value = "";
	bl.fISBN.value = "";
	bl.hForm.classList.remove("show");
	} else {
	if (Number.isInteger(id)) {
	bl.fID.value = id;
	bl.fTitle.value = bl.data[id].t;
	bl.fAuthor.value = bl.data[id].a;
	bl.fISBN.value = bl.data[id].i;
	}
	bl.hForm.classList.add("show");
	}
	},

	// (C) DRAW BOOKS HTML
	draw : () => {
	let row;
	bl.hList.innerHTML = "";
	bl.data.forEach((book, i) => {
	row = document.createElement("div");
	row.className = "row";
	row.innerHTML = `<div class="rDel" onclick="bl.del(${i})">X</div>
	<div class="rTxt">
	<div class="rTitle">${book.t}${(book.i?" ("+book.i+")":"")}</div>
	<div class="rAuthor">${book.a}</div>
	</div>
	<div class="rEdit" onclick="bl.toggle(${i})">✎</div>`;
	bl.hList.appendChild(row);
	});
	},

	// (D) SAVE BOOK
	save : () => {
	// (D1) GET DATA
	let data = {
	t : bl.fTitle.value,
	a : bl.fAuthor.value,
	i : bl.fISBN.value
	};

	// (D2) UPDATE DATA ARRAY
	if (bl.fID.value=="") { bl.data.push(data); }
	else { bl.data[parseInt(bl.fID.value)] = data; }
	localStorage.setItem("books", JSON.stringify(bl.data));

	// (D3) UPDATE HTML INTERFACE
	bl.toggle(false);
	bl.draw();
	return false;
	},

	// (E) DELETE BOOK
	del : id => { if (confirm("Delete book?")) {
	bl.data.splice(id, 1);
	localStorage.setItem("books", JSON.stringify(bl.data));
	bl.draw();
	}}
	};
	window.onload = bl.init;
	{
	"short_name": "Books",
	"name": "Books List",
	"icons": [{
	"src": "favicon.png",
	"sizes": "64x64",
	"type": "image/png"
	}, {
	"src": "icon-512.png",
	"sizes": "512x512",
	"type": "image/png"
	}],
	"start_url": "1-books-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("JSBooks")
	.then(cache => cache.addAll([
	"favicon.png",
	"icon-512.png",
	"1-book-list.html",
	"2-book-list.js",
	"2-book-list.css"
	]))
	.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))
	));