add app

christyanbrayan · Sep 2, 2020 · 47e8f57 · 47e8f57
commit 47e8f57
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title> To-Do </title>
+	<link rel="stylesheet" href="./main.css">
+</head>
+<body>
+	<div id="app">
+		<h1> To-Do </h1>
+		<ul>
+
+		</ul>
+		<input type="text" placeholder="Type anything">
+		<button> Add </button>
+	</div>
+	<script src="script.js"></script>
+	<p>
+		Developed by Christyan Brayan
+	</p>
+</body>
+</html>
diff --git a/main.css b/main.css
diff --git a/script.js b/script.js
@@ -0,0 +1,53 @@
+var listElement = document.querySelector('#app ul');
+var inputElement = document.querySelector('#app input');
+var buttonElement = document.querySelector('#app button');
+
+var toDos = JSON.parse(localStorage.getItem('list_toDos')) || [];
+
+function renderToDos() {
+	listElement.innerHTML = '';
+
+	for (toDo of toDos) {
+		var toDoElement = document.createElement('li');
+		var toDoText = document.createTextNode(toDo);
+
+		var linkElement = document.createElement('a');
+
+		linkElement.setAttribute('href', '#');
+
+		var pos = toDos.indexOf(toDo);
+		linkElement.setAttribute('onclick', 'deleteToDo(' + pos + ')');
+
+		var linkText = document.createTextNode('Delete');
+
+		linkElement.appendChild(linkText);
+
+		toDoElement.appendChild(toDoText);
+		toDoElement.appendChild(linkElement);
+
+		listElement.appendChild(toDoElement);
+	}
+}
+
+renderToDos();
+
+function addToDo() {
+	var toDoText = inputElement.value;
+
+	toDos.push(toDoText);
+	inputElement.value = '';
+	renderToDos();
+	saveToStorage();
+}
+
+buttonElement.onclick = addToDo;
+
+function deleteToDo(pos) {
+	toDos.splice(pos, 1);
+	renderToDos();
+	saveToStorage();
+}
+
+function saveToStorage() {
+	localStorage.setItem('list_toDos', JSON.stringify(toDos));
+}