Add files via upload

bp117 · Feb 12, 2024 · 2fe7fb8 · 2fe7fb8
1 parent 3a23756
commit 2fe7fb8
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 0 deletions.
diff --git a/todo.css b/todo.css
@@ -0,0 +1,95 @@
+body {
+	background: #0f0c29;  /* fallback for old browsers */
+	background: -webkit-linear-gradient(left, #24243e, #302b63, #0f0c29);
+	background: -o-linear-gradient(left, #24243e, #302b63, #0f0c29);
+	background: linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+	font-family: Roboto;
+}
+
+h3 {
+	text-align: center;
+	color: #CFD60A;
+}
+
+h2 {
+	color: rgb(123,230,123);
+}
+
+.fa-plus {
+	float: right;
+}
+
+.container {
+	width: 400px;
+	margin: 100px auto;
+}
+
+ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	position: relative;
+}
+
+li {
+	height: 40px;
+	line-height: 40px;
+	color: rgb(230,230,12);
+}
+
+li:nth-child(2n) {
+	background: rgba(123,123,123,0.5);
+}
+
+.left {
+	background: #e74c3c;
+	height: 40px;
+	text-align: center;
+	color: white;
+	display: inline-block;
+	width: 0; 
+	opacity: 0;
+	transition: 0.2s linear;
+}
+
+.right {
+	background: #e74c3c;
+	height: 40px;
+	text-align: center;
+	color: white;
+	display: inline-block;
+	width: 0; 
+	opacity: 0;
+	transition: 0.2s linear;
+	position: absolute;
+	right: 0px;
+}
+
+li:hover span{
+	width: 35px;
+	opacity: 1;
+}
+
+.todoinput {
+	width: 100%;
+	font-size: 18px;
+	padding: 10px 10px 10px 15px;
+	outline: none;
+	/*box-sizing: border-box; <-- This isn't really required for our code*/
+}
+
+.editinput {
+	height: 100%;
+	width: 100%;
+	outline: none;
+}
+
+input:focus {
+	/*border: 1px solid black;*/
+	/*Coz it's not really required though.*/
+}
+
+.completed {
+	text-decoration: line-through;
+	color: gray;
+}
diff --git a/todo.html b/todo.html
@@ -0,0 +1,55 @@
+
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>To-Do List</title>
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
+    <link href="todo.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+</head>
+<body>
+    <div class="container">
+        <h3>Find the <a href="https://github.com/sinharaksh1t/jquery-todo-list"><i class="fa fa-code" aria-hidden="true"></i>
+            at <i class="fa fa-github" aria-hidden="true"></a></i>
+        </h3>
+        <h2>To-Do List <i class="fa fa-plus"></i></h2>
+        <input type="text" placeholder="Enter To-Do" class="todoinput">
+        <ul>
+            <li>
+                <span class="left">
+                    <i class="fa fa-trash"></i>
+                </span> 
+                <span class="text">
+                    Buy bananas
+                </span>
+                <span class="right">
+                    <i class="fa fa-pencil"></i>
+                </span>
+            </li>
+            <li>
+                <span class="left">
+                    <i class="fa fa-trash"></i>
+                </span> 
+                <span class="text">
+                    Call Bakery
+                </span>
+                <span class="right"><i class="fa fa-pencil"></i>
+                </span>
+            </li>
+            <li>
+                <span class="left">
+                    <i class="fa fa-trash"></i>
+                </span>
+                <span class="text">
+                    Print list
+                </span>
+                <span class="right">
+                    <i class="fa fa-pencil"></i>
+                </span>
+            </li>
+        </ul>
+    </div>
+    <script src="todo.js"></script>
+</body>
+</html>
diff --git a/todo.js b/todo.js
@@ -0,0 +1,41 @@
+$(".todoinput").keypress(function(event) {
+	if(event.which === 13) {
+		if($(this).val()==="") return;
+		$("ul").prepend("<li><span class='left'><i class='fa fa-trash'></i></span>  "+$(this).val()+"<span class='right'><i class='fa fa-pencil'></li>");
+		$(this).val("");
+	}
+});
+
+$(".fa-plus").on("click", function() {
+	$("input").slideToggle();
+});
+
+$("ul").on("click", "span.text", function(event) {
+	$(this).toggleClass("completed");
+});
+
+$("ul").on("click", "span.left", function(event) {
+	$(this).parent().fadeOut(500, function(){
+		$(this).remove();
+	});
+	event.stopPropagation();
+});
+
+$("ul").on("click", "span.right", function(event) {
+	var parent = $(this).parent();
+	var oldVal = parent.text();
+	parent.html("<input type='text' class='editinput'>");
+	$(".editinput").keypress(function(e) {
+		if(e.which === 13) {
+			if($(this).val() === "") {
+				parent.html("<span class='left'><i class='fa fa-trash'></i></span><span class='text'>  "+oldVal+"</span><span class='right'><i class='fa fa-pencil'>");	
+			}
+			else {
+				var newVal = $(this).val();
+				parent.html("<span class='left'><i class='fa fa-trash'></i></span><span class='text'>  "+newVal+"</span><span class='right'><i class='fa fa-pencil'>");
+			}
+		}
+		e.stopPropagation();
+	});
+	event.stopPropagation();
+});