From 88ccf416e3e37477230d6db7fafbedc298acb343 Mon Sep 17 00:00:00 2001
From: Sanusi Abdulkadir <94573138+sanusisusi@users.noreply.github.com>
Date: Mon, 10 Oct 2022 14:06:39 +0100
Subject: [PATCH] Add files via upload

---
 html5-local-storage/HTML5 local Storage.html | 38 +++++++++++
 html5-local-storage/README.md                | 12 ++++
 html5-local-storage/Storage.js               | 66 ++++++++++++++++++++
 html5-local-storage/StorageStyle.css         | 29 +++++++++
 4 files changed, 145 insertions(+)
 create mode 100644 html5-local-storage/HTML5 local Storage.html
 create mode 100644 html5-local-storage/README.md
 create mode 100644 html5-local-storage/Storage.js
 create mode 100644 html5-local-storage/StorageStyle.css
diff --git a/html5-local-storage/HTML5 local Storage.html b/html5-local-storage/HTML5 local Storage.html
new file mode 100644
index 0000000..c5e87da
--- /dev/null
+++ b/html5-local-storage/HTML5 local Storage.html	
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+<head>
+	<title>HTML5 localStorage Example</title>
+	<meta charset="UTF-8">
+	<link rel="stylesheet" href="StorageStyle.css">
+	<script src="Storage.js"></script>
+</head>
+<body onload="doShowAll()">
+	<h1>Enter Items And Quantity</h1>
+	<form name=ShoppingList>
+		<div id="PlayArea">
+			<table>
+				<tr>
+					<td><b>Item:</b><input type=text name=name></td>
+					<td><b>Quantity:</b><input type=text name=data></td>
+				</tr>
+				<tr>
+					<td>
+					    <input type=button value="Save"   onclick="SaveItem()"> 
+					    <input type=button value="Modify" onclick="ModifyItem()"> 
+					    <input type=button value="Remove" onclick="RemoveItem()">
+					  </td>
+				</tr>
+			</table>
+		</div>
+		<div id="items_table">
+			<h2>Shopping List</h2>
+			<table id=list></table>
+			<p>
+				<label><input type=button value="Clear" onclick="ClearAll()">
+					<i>* Removes all items</i></label>
+			</p>
+		</div>
+	</form>
+
+</body>
+</html>
diff --git a/html5-local-storage/README.md b/html5-local-storage/README.md
new file mode 100644
index 0000000..2e6ed28
--- /dev/null
+++ b/html5-local-storage/README.md
@@ -0,0 +1,12 @@
+            </> HTML5 LOCAL STORAGE</>
+            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Hello World!
+Welcome to my HTML5 hactoberfest open source contribution
+I created this project (HTML5 Local Storage) as a new tip and trick on session
+storage
+The project consits of 3 files (html,css and javascript)
+
+    Do fork the entire project and contribute
+    thank you
+    # my github repo https://githhub.com/sanusisusi
\ No newline at end of file
diff --git a/html5-local-storage/Storage.js b/html5-local-storage/Storage.js
new file mode 100644
index 0000000..10ed46f
--- /dev/null
+++ b/html5-local-storage/Storage.js
@@ -0,0 +1,66 @@
+function SaveItem() {
+			
+	var name = document.forms.ShoppingList.name.value;
+	var data = document.forms.ShoppingList.data.value;
+	localStorage.setItem(name, data);
+	doShowAll();
+	
+}
+
+function ModifyItem() {
+	var name = document.forms.ShoppingList.name.value;
+	document.forms.ShoppingList.data.value = localStorage.getItem(name);
+	doShowAll();
+}
+
+function RemoveItem() {
+	var name = document.forms.ShoppingList.name.value;
+	document.forms.ShoppingList.data.value = localStorage.removeItem(name);
+	doShowAll();
+}
+
+function ClearAll() {
+	localStorage.clear();
+	doShowAll();
+}
+
+// dynamically draw the table
+
+function doShowAll() {
+	if (CheckBrowser()) {
+		var key = "";
+		var list = "<tr><th>Name</th><th>Value</th></tr>\n";
+		var i = 0;
+		for (i = 0; i <= localStorage.length - 1; i++) {
+			key = localStorage.key(i);
+			list += "<tr><td>" + key + "</td>\n<td>"
+					+ localStorage.getItem(key) + "</td></tr>\n";
+		}
+		if (list == "<tr><th>Name</th><th>Value</th></tr>\n") {
+			list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
+		}
+		document.getElementById('list').innerHTML = list;
+	} else {
+		alert('Cannot store shopping list as your browser do not support local storage');
+	}
+}
+
+/*
+ * Checking the browser compatibility.
+ * 
+ * Alternately can use Modernizr scripts- JavaScript library that helps us to
+ * detect the browser support for HTML5 and CSS features Example - <script
+ * type="text/javascript" src="modernizr.min.js"></script>
+ * 
+ * if (Modernizr.localstorage) { //use localStorage object to store data } else {
+ * alert('Cannot store user preferences as your browser do not support local
+ * storage'); }
+ */
+function CheckBrowser() {
+	if ('localStorage' in window && window['localStorage'] !== null) {
+		// we can use localStorage object to store data
+		return true;
+	} else {
+			return false;
+	}
+}
\ No newline at end of file
diff --git a/html5-local-storage/StorageStyle.css b/html5-local-storage/StorageStyle.css
new file mode 100644
index 0000000..74f9f81
--- /dev/null
+++ b/html5-local-storage/StorageStyle.css
@@ -0,0 +1,29 @@
+td,th {
+	font-family: monospace;
+	padding: 4px;
+	background-color: #ccc;
+}
+
+label {
+	vertical-align: top;
+}
+
+#PlayArea {
+	border: 1px dotted blue;
+	padding: 6px;
+	background-color: #ccc;
+	margin-right: 50%;
+}
+
+#items_table {
+	border: 1px dotted blue;
+	padding: 6px;
+	margin-top: 12px;
+	margin-right: 50%;
+}
+
+#items_table h2 {
+	font-size: 18px;
+	margin-top: 0px;
+	font-family: sans-serif;
+}
\ No newline at end of file
