Jquery UI To Do List Example

jQuery · 11-Apr-2023

When “Jquery UI To Do List Example” moves through design, development and browser testing, learn more here can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

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...