Add files

ThreatMatrix · Aug 5, 2021 · 8317a8d · 8317a8d
1 parent e8e1cb0
commit 8317a8d
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Javascript + Dom</title>
+	<link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+	<h1>To do List</h1>
+	<input id="userinput" type="text" placeholder="Enter Items">
+	<button id="enter">Add to list!</button>
+	<ul>
+
+	</ul>
+<script type="text/javascript" src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,61 @@
+var input = document.getElementById("userinput");
+var button = document.getElementById("enter");
+var ul = document.querySelector("ul");
+var listItems=document.getElementsByTagName("li"); 
+
+
+function inputLength(){
+	return input.value.length;
+}
+
+
+function createListElement(){
+	var li=document.createElement("li");
+	li.appendChild(document.createTextNode(input.value));
+	ul.appendChild(li);
+	input.value="";
+
+		var btn = document.createElement("button");
+		btn.appendChild(document.createTextNode("Delete"));
+		li.appendChild(btn);
+		btn.onclick = removeParent;
+}
+
+function addListAfterClick(){
+	if(inputLength() > 0){
+		createListElement();
+	}
+}
+
+function addListAfterKeypress(event){
+	if(inputLength() > 0 && event.keyCode === 13){
+		createListElement();
+	}
+}
+
+button.addEventListener("click",addListAfterClick);
+
+input.addEventListener("keypress",addListAfterKeypress);
+
+ul.onclick=function(event){
+	var target=event.target;
+	target.classList.toggle("done");
+}
+
+function listLength(){
+	return listItems.length;
+}
+
+function deleteButton(){
+	var btn=document.createElement("button");
+btn.appendChild(document.createTextNode("Delete!"));
+listItems[i].appendChild(btn);
+btn.onclick=removeParent;}
+
+for(i=0;i<listLength();i++){
+	deleteButton();
+}
+
+function removeParent(evt){
+	evt.target.parentNode.remove();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,15 @@
+body{
+	background-color: yellow;
+	justify-content: center;
+	text-align: center;
+}
+
+
+
+.done {
+  text-decoration: line-through;
+} 
+
+li {
+	list-style: none;
+}