Jquery UI To Do List Example

11-Apr-2023

.

Admin

Jquery UI To Do List Example

Hi guys,

In this blog, I will create To Do List using jquery ui. We will show you To Do List in jquery ui.you can easliy make to do list example in jquery ui.

I will give you full example of Jquery UI To Do List Example.

Example


<!DOCTYPE html>

<html>

<head>

<title>Jquery UI To Do List Example</title>

<style type="text/css">

body {

margin: 0;

min-width: 250px;

}

/* Include the padding and border in an element's total width and height */

* {

box-sizing: border-box;

}

/* Remove margins and padding from the list */

ul {

margin: 0;

padding: 0;

}

/* Style the list items */

ul li {

cursor: pointer;

position: relative;

padding: 12px 8px 12px 40px;

list-style-type: none;

background: #eee;

font-size: 18px;

transition: 0.2s;

/* make the list items unselectable */

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

/* Set all odd list items to a different color (zebra-stripes) */

ul li:nth-child(odd) {

background: #f9f9f9;

}

/* Darker background-color on hover */

ul li:hover {

background: #ddd;

}

/* When clicked on, add a background color and strike out text */

ul li.checked {

background: #888;

color: #fff;

text-decoration: line-through;

}

/* Add a "checked" mark when clicked on */

ul li.checked::before {

content: '';

position: absolute;

border-color: #fff;

border-style: solid;

border-width: 0 2px 2px 0;

top: 10px;

left: 16px;

transform: rotate(45deg);

height: 15px;

width: 7px;

}

/* Style the close button */

.close {

position: absolute;

right: 0;

top: 0;

padding: 12px 16px 12px 16px;

}

.close:hover {

background-color: #f44336;

color: white;

}

/* Style the header */

.header {

background-color: #000;

padding: 30px 40px;

color: white;

text-align: center;

}

/* Clear floats after the header */

.header:after {

content: "";

display: table;

clear: both;

}

/* Style the input */

input {

margin: 0;

border: none;

border-radius:5px 0px 0px 5px;

width: 75%;

padding: 10px;

float: left;

font-size: 16px;

}

/* Style the "Add" button */

.addBtn {

padding: 10px;

width: 25%;

border-radius:0px 5px 5px 0px;

background: green;

color: #fff;

float: left;

text-align: center;

font-size: 16px;

cursor: pointer;

transition: 0.3s;

}

.addBtn:hover {

background-color: #bbb;

}

.container{

border:1px solid #000;

width: 50%;

margin:120px auto;

}

</style>

</head>

<body>

<div class="container">

<div id="myDIV" class="header">

<h2 style="margin:5px">My To Do List</h2>

<input type="text" id="myInput" placeholder="Title...">

<span onclick="newElement()" class="addBtn">Add</span>

</div>

<ul id="myUL">

<li>Hit the gym</li>

<li class="checked">Pay bills</li>

<li>Meet George</li>

<li>Buy eggs</li>

<li>Read a book</li>

<li>Organize office</li>

</ul>

</div>

<script type="text/javascript">

// Create a "close" button and append it to each list item

var myNodelist = document.getElementsByTagName("LI");

var i;

for (i = 0; i < myNodelist.length; i++) {

var span = document.createElement("SPAN");

var txt = document.createTextNode("\u00D7");

span.className = "close";

span.appendChild(txt);

myNodelist[i].appendChild(span);

}

// Click on a close button to hide the current list item

var close = document.getElementsByClassName("close");

var i;

for (i = 0; i < close.length; i++) {

close[i].onclick = function() {

var div = this.parentElement;

div.style.display = "none";

}

}

// Add a "checked" symbol when clicking on a list item

var list = document.querySelector('ul');

list.addEventListener('click', function(ev) {

if (ev.target.tagName === 'LI') {

ev.target.classList.toggle('checked');

}

}, false);

// Create a new list item when clicking on the "Add" button

function newElement() {

var li = document.createElement("li");

var inputValue = document.getElementById("myInput").value;

var t = document.createTextNode(inputValue);

li.appendChild(t);

if (inputValue === '') {

alert("You must write something!");

} else {

document.getElementById("myUL").appendChild(li);

}

document.getElementById("myInput").value = "";

var span = document.createElement("SPAN");

var txt = document.createTextNode("\u00D7");

span.className = "close";

span.appendChild(txt);

li.appendChild(span);

for (i = 0; i < close.length; i++) {

close[i].onclick = function() {

var div = this.parentElement;

div.style.display = "none";

}

}

}

</script>

</body>

</html>

It will help you...

#Jqury UI