code-boxx/0-JS-ADDRESS-BOOK.MD

## 0-JS-ADDRESS-BOOK.MD

      
    Raw
  

              0-JS-ADDRESS-BOOK.MD
            
          
    JAVASCRIPT ADDRESS BOOK

https://code-boxx.com/javascript-address-book/
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-address.html
<!DOCTYPE html>
<html>
  <head>
    <!-- TITLE + CHARSET + DESCRIPTION + VIEWPORT + FAVICON -->
    <title>JS Address Book</title>
    <meta charset="utf-8">
    <meta name="description" content="Address Book">
    <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="Address Book">
    <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="3-manifest.json">

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

    <!-- STYLESHEET + JAVASCRIPT -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="2-address.css">
    <script src="2-address.js"></script>
  </head>
  <body>
    <!-- (A) ADD/EDIT ENTRY FORM -->
    <div id="abForm"><form onsubmit="return ab.save()">
      <div id="abClose" class="material-icons" onclick="ab.toggle(false)">
        close
      </div>
      <input type="hidden" id="abID">
      <label>Name</label>
      <input type="text" id="abName" required>
      <label>Email</label>
      <input type="email" id="abEmail">
      <label>Tel</label>
      <input type="text" id="abTel">
      <label>Address</label>
      <input type="text" id="abAddr">
      <input type="submit" value="Save" id="abGo">
    </form></div>

    <!-- (B) ENTRIES LIST -->
    <div id="abWrap">
      <div id="abHead">
        <h2>ADDRESS BOOK</h2>
        <div id="abAdd" class="material-icons" onclick="ab.toggle(true)">
          add
        </div>
      </div>
      <div id="abList"></div>
    </div>
  </body>
</html>

## 2-address.css
/* (A) WHOLE PAGE */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
}

/* (B) ADD/EDIT FORM WRAPPER */
#abForm {
  /* (B1) FULL PAGE */
  position: fixed; top: 0; left: 0;
  z-index: 999; width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.7);

  /* (B2) CENTER FORM ON SCREEN */
  display: flex;
  align-items: center;
  justify-content: center;

  /* (B3) HIDDEN BY DEFAULT */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
#abForm.show {
  visibility: visible;
  opacity: 1;
}

/* (C) SHARED */
#abAdd, #abClose {
  color: #fff;
  background: #4f5fb3;
  font-size: 20px;
  padding: 10px;
  font-weight: 700;
}
#abClose {
  position: absolute;
  top: 0; right: 0;
}
input[type=button], input[type=submit], #abAdd, #abClose { cursor: pointer; }

/* (D) ADD/EDIT FORM */
#abForm form {
  position: relative;
  border-radius: 10px;
  padding: 20px;
  width: 400px;
  border: 1px solid #000;
  background: #f5f5f5;
}
#abForm label, #abForm input {
  display: block;
  width: 100%;
}
#abForm label { margin: 10px 0; }
#abForm input {
  padding: 10px;
  border: 1px solid #ccc;
}
#abForm input[type=submit] {
  margin-top: 20px;
  border: 0;
  color: #fff;
  background: #4f5fb3;
}

/* (E) LIST WRAPPER */
#abWrap {
  margin: 0 auto;
  padding: 10px;
  max-width: 1000px;
}
#abHead {
  display: flex;
  align-items: center;
}
#abHead h2 { flex-grow: 1; }

/* (F) LIST ENTRIES */
#abList .row {
  display: flex;
  margin: 10px 0;
  border: 1px solid #dfdfdf;
  background: #f7f7f7;
}
#abList .info {
  padding: 10px;
  flex-grow: 1;
  line-height: 28px;
}
i.tag {
  color: #c3c3c3;
  font-size: 18px;
  margin-right: 5px;
}
.row input[type=button] {
  font-size: 30px;
  padding: 0 10px;
  border: 0;
  background: 0;
  color: #4f5fb3;
}

## 2-address.js
var ab = {
  // (A) INIT
  hForm : null, // html add/edit form
  hID : null, hName : null, hEmail : null, hTel : null, hAddr : null,
  data : [], // address book entries
  hList : null, // html entries list
  init : () => {
    // (A1) GET HTML ELEMENTS
    ab.hID = document.getElementById("abID");
    ab.hForm = document.getElementById("abForm");
    ab.hName = document.getElementById("abName");
    ab.hEmail = document.getElementById("abEmail");
    ab.hTel = document.getElementById("abTel");
    ab.hAddr = document.getElementById("abAddr");
    ab.hList = document.getElementById("abList");

    // (A2) LOAD ENTRIES FROM LOCAL STORAGE
    let data = localStorage.getItem("ab");
    if (data != null) { ab.data = JSON.parse(data); }

    // (A3) DRAW ADDRESS ENTRIES
    ab.draw();
  },

  // (B) TOGGLE SHOW/HIDE ENTRY FORM
  toggle : id => {
    // (B1) CLOSE & HIDE
    if (id === false) {
      ab.hID.value = "";
      ab.hName.value = "";
      ab.hEmail.value = "";
      ab.hTel.value = "";
      ab.hAddr.value = "";
      ab.hForm.classList.remove("show");
    }

    // (B2) SHOW
    else {
      // (B2-1) EDIT MODE
      if (Number.isInteger(id)) {
        ab.hID.value = id;
        ab.hName.value = ab.data[id]["n"];
        ab.hEmail.value = ab.data[id]["e"];
        ab.hTel.value = ab.data[id]["t"];
        ab.hAddr.value = ab.data[id]["a"];
      }

      // (B2-2) SHOW ADD/EDIT FORM
      ab.hForm.classList.add("show");
    }
  },

  // (C) SAVE ADDRESS ENTRY
  save : () => {
    // (C1) ENTRY DATA
    let data = {
      n : ab.hName.value,
      e : ab.hEmail.value,
      t : ab.hTel.value,
      a : ab.hAddr.value
    };

    // (C2) ADD/UPDATE ENTRY
    if (ab.hID.value == "") { ab.data.push(data); }
    else { ab.data[ab.hID.value] = data; }

    // (C3) UPDATE LOCAL STORAGE
    localStorage.setItem("ab", JSON.stringify(ab.data));
    ab.toggle(false);
    ab.draw();
    return false;
  },

  // (D) DELETE ADDRESS ENTRY
  del : id => { if (confirm("Delete Entry?")) {
    ab.data.splice(id, 1);
    localStorage.setItem("ab", JSON.stringify(ab.data));
    ab.draw();
  }},

  // (E) DRAW ADDRESS BOOK ENTRIES
  draw : () => {
    ab.hList.innerHTML = "";
    for (let i in ab.data) {
      let row = document.createElement("div");
      row.className = "row";
      row.innerHTML = `<div class="info">
        <div><i class="tag material-icons">person</i> ${ab.data[i]["n"]}</div>
        <div>
          <i class="tag material-icons">email</i> ${ab.data[i]["e"]}
          <i class="material-icons tag">call</i> ${ab.data[i]["t"]}
        </div>
        <div><i class="tag material-icons">home</i> ${ab.data[i]["a"]}</div>
      </div>
      <input type="button" class="material-icons" value="delete" onclick="ab.del(${i})">
      <input type="button" class="material-icons" value="edit" onclick="ab.toggle(${i})">`;
      ab.hList.appendChild(row);
    }
  }
};
window.addEventListener("load", ab.init);

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

## 4-worker.js
// (A) CREATE/INSTALL CACHE
self.addEventListener("install", evt => {
  self.skipWaiting();
  evt.waitUntil(
    caches.open("AddressBook")
    .then(cache => cache.addAll([
      "favicon.png",
      "icon-512.png",
      "1-address.html",
      "2-address.js",
      "2-address.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 Address Book</title>
	<meta charset="utf-8">
	<meta name="description" content="Address Book">
	<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="Address Book">
	<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="3-manifest.json">

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

	<!-- STYLESHEET + JAVASCRIPT -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="2-address.css">
	<script src="2-address.js"></script>
	</head>
	<body>
	<!-- (A) ADD/EDIT ENTRY FORM -->
	<div id="abForm"><form onsubmit="return ab.save()">
	<div id="abClose" class="material-icons" onclick="ab.toggle(false)">
	close
	</div>
	<input type="hidden" id="abID">
	<label>Name</label>
	<input type="text" id="abName" required>
	<label>Email</label>
	<input type="email" id="abEmail">
	<label>Tel</label>
	<input type="text" id="abTel">
	<label>Address</label>
	<input type="text" id="abAddr">
	<input type="submit" value="Save" id="abGo">
	</form></div>

	<!-- (B) ENTRIES LIST -->
	<div id="abWrap">
	<div id="abHead">
	<h2>ADDRESS BOOK</h2>
	<div id="abAdd" class="material-icons" onclick="ab.toggle(true)">
	add
	</div>
	</div>
	<div id="abList"></div>
	</div>
	</body>
	</html>
	/* (A) WHOLE PAGE */
	* {
	font-family: arial, sans-serif;
	box-sizing: border-box;
	}
	body {
	padding: 0;
	margin: 0;
	}

	/* (B) ADD/EDIT FORM WRAPPER */
	#abForm {
	/* (B1) FULL PAGE */
	position: fixed; top: 0; left: 0;
	z-index: 999; width: 100vw; height: 100vh;
	background: rgba(0, 0, 0, 0.7);

	/* (B2) CENTER FORM ON SCREEN */
	display: flex;
	align-items: center;
	justify-content: center;

	/* (B3) HIDDEN BY DEFAULT */
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
	}
	#abForm.show {
	visibility: visible;
	opacity: 1;
	}

	/* (C) SHARED */
	#abAdd, #abClose {
	color: #fff;
	background: #4f5fb3;
	font-size: 20px;
	padding: 10px;
	font-weight: 700;
	}
	#abClose {
	position: absolute;
	top: 0; right: 0;
	}
	input[type=button], input[type=submit], #abAdd, #abClose { cursor: pointer; }

	/* (D) ADD/EDIT FORM */
	#abForm form {
	position: relative;
	border-radius: 10px;
	padding: 20px;
	width: 400px;
	border: 1px solid #000;
	background: #f5f5f5;
	}
	#abForm label, #abForm input {
	display: block;
	width: 100%;
	}
	#abForm label { margin: 10px 0; }
	#abForm input {
	padding: 10px;
	border: 1px solid #ccc;
	}
	#abForm input[type=submit] {
	margin-top: 20px;
	border: 0;
	color: #fff;
	background: #4f5fb3;
	}

	/* (E) LIST WRAPPER */
	#abWrap {
	margin: 0 auto;
	padding: 10px;
	max-width: 1000px;
	}
	#abHead {
	display: flex;
	align-items: center;
	}
	#abHead h2 { flex-grow: 1; }

	/* (F) LIST ENTRIES */
	#abList .row {
	display: flex;
	margin: 10px 0;
	border: 1px solid #dfdfdf;
	background: #f7f7f7;
	}
	#abList .info {
	padding: 10px;
	flex-grow: 1;
	line-height: 28px;
	}
	i.tag {
	color: #c3c3c3;
	font-size: 18px;
	margin-right: 5px;
	}
	.row input[type=button] {
	font-size: 30px;
	padding: 0 10px;
	border: 0;
	background: 0;
	color: #4f5fb3;
	}
	var ab = {
	// (A) INIT
	hForm : null, // html add/edit form
	hID : null, hName : null, hEmail : null, hTel : null, hAddr : null,
	data : [], // address book entries
	hList : null, // html entries list
	init : () => {
	// (A1) GET HTML ELEMENTS
	ab.hID = document.getElementById("abID");
	ab.hForm = document.getElementById("abForm");
	ab.hName = document.getElementById("abName");
	ab.hEmail = document.getElementById("abEmail");
	ab.hTel = document.getElementById("abTel");
	ab.hAddr = document.getElementById("abAddr");
	ab.hList = document.getElementById("abList");

	// (A2) LOAD ENTRIES FROM LOCAL STORAGE
	let data = localStorage.getItem("ab");
	if (data != null) { ab.data = JSON.parse(data); }

	// (A3) DRAW ADDRESS ENTRIES
	ab.draw();
	},

	// (B) TOGGLE SHOW/HIDE ENTRY FORM
	toggle : id => {
	// (B1) CLOSE & HIDE
	if (id === false) {
	ab.hID.value = "";
	ab.hName.value = "";
	ab.hEmail.value = "";
	ab.hTel.value = "";
	ab.hAddr.value = "";
	ab.hForm.classList.remove("show");
	}

	// (B2) SHOW
	else {
	// (B2-1) EDIT MODE
	if (Number.isInteger(id)) {
	ab.hID.value = id;
	ab.hName.value = ab.data[id]["n"];
	ab.hEmail.value = ab.data[id]["e"];
	ab.hTel.value = ab.data[id]["t"];
	ab.hAddr.value = ab.data[id]["a"];
	}

	// (B2-2) SHOW ADD/EDIT FORM
	ab.hForm.classList.add("show");
	}
	},

	// (C) SAVE ADDRESS ENTRY
	save : () => {
	// (C1) ENTRY DATA
	let data = {
	n : ab.hName.value,
	e : ab.hEmail.value,
	t : ab.hTel.value,
	a : ab.hAddr.value
	};

	// (C2) ADD/UPDATE ENTRY
	if (ab.hID.value == "") { ab.data.push(data); }
	else { ab.data[ab.hID.value] = data; }

	// (C3) UPDATE LOCAL STORAGE
	localStorage.setItem("ab", JSON.stringify(ab.data));
	ab.toggle(false);
	ab.draw();
	return false;
	},

	// (D) DELETE ADDRESS ENTRY
	del : id => { if (confirm("Delete Entry?")) {
	ab.data.splice(id, 1);
	localStorage.setItem("ab", JSON.stringify(ab.data));
	ab.draw();
	}},

	// (E) DRAW ADDRESS BOOK ENTRIES
	draw : () => {
	ab.hList.innerHTML = "";
	for (let i in ab.data) {
	let row = document.createElement("div");
	row.className = "row";
	row.innerHTML = `<div class="info">
	<div><i class="tag material-icons">person</i> ${ab.data[i]["n"]}</div>
	<div>
	<i class="tag material-icons">email</i> ${ab.data[i]["e"]}
	<i class="material-icons tag">call</i> ${ab.data[i]["t"]}
	</div>
	<div><i class="tag material-icons">home</i> ${ab.data[i]["a"]}</div>
	</div>
	<input type="button" class="material-icons" value="delete" onclick="ab.del(${i})">
	<input type="button" class="material-icons" value="edit" onclick="ab.toggle(${i})">`;
	ab.hList.appendChild(row);
	}
	}
	};
	window.addEventListener("load", ab.init);
	{
	"short_name": "Address",
	"name": "Address Book",
	"icons": [{
	"src": "favicon.png",
	"sizes": "64x64",
	"type": "image/png"
	}, {
	"src": "icon-512.png",
	"sizes": "512x512",
	"type": "image/png"
	}],
	"start_url": "1-address.html",
	"scope": "/",
	"background_color": "white",
	"theme_color": "white",
	"display": "standalone"
	}
	// (A) CREATE/INSTALL CACHE
	self.addEventListener("install", evt => {
	self.skipWaiting();
	evt.waitUntil(
	caches.open("AddressBook")
	.then(cache => cache.addAll([
	"favicon.png",
	"icon-512.png",
	"1-address.html",
	"2-address.js",
	"2-address.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))
	));