JS implements a simple todoList (notepad) effect

The notepad program is implemented using the three major front-end frameworks of HTML+CSS+JavaScript.

Implemented the basic functions of adding, completing and deleting to-do items in the notepad.

The following is the complete code of the program:

1. Achieve effect display

2. HTML code

<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
//Import CSS file <link rel="stylesheet" href="todoList.css" >
</head>
<body>
<div class="myhead">
   <h2>My ToDo List</h2>
  <table>
    <tr>
      <td><input type="text" placeholder="Please enter your to-do items..." id="things"></td>
      <td> <span id="add" onclick="addElement()">add</span></td>
    </tr>
  </table>
</div>
 
//To-do list section, content is dynamically generated<ul></ul>
 
<div class="test2"></div>
</body>
<!--Put the JavaScript element at the end, otherwise when JavaScript is executed, the DOM tree has not been built yet, and unexpected errors will occur-->
<script src="todoList.js" type="text/javascript"></script>
</html>

3. CSS code

@font-face {
  font-family: 'iconfont'; /* Project id 2680005 */
  src: url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff2?t=1626424842361') format('woff2'),
  url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff?t=1626424842361') format('woff'),
  url('//at.alicdn.com/t/font_2680005_2v81j5og00f.ttf?t=1626424842361') format('truetype');
}
 
body {
  margin: 0;
  padding: 0;
}
*{
  box-sizing: border-box;
}
.myhead{
   background-color: lightpink;
   text-align: center;
   padding: 5px 0px 10px 0px;
   color: aliceblue;
 }
  table{
  margin: 0 auto;
}
 #things{
   width: 180px;
   height: 30px;
   border-radius: 3px;
   outline: none;
   border: solid 1px white;
 }
 #add{
   display: inline-block;
   width: 80px;
   height: 30px;
   background-color: gainsboro;
   color: grey;
   border-radius: 3px;
   line-height: 30px;
 }
  #add:hover{
    cursor: pointer;
    background-color: darkgrey ;
    color: grey;
  }
ul{
  margin: 0px;
  padding: 0px;
}
  ul li{
    list-style: none;
    /*text-align: center;*/
    position: relative;
    padding-left:40px;
    height: 40px;
    line-height: 40px;
  }
  ul li:nth-child(odd) {
  background-color: #f9f9f9;
}
  ul li:hover{
  cursor: pointer;
  background-color: #dddddd;
}
 
  ul li.check{
  background-color: #888888;
  text-decoration: line-through;
  color: #f9f9f9;
}
  ul li.check::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;
}
.close{
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 0px 20px;
  font-size: 16px;
}
.close:hover{
  background-color: #f44336;
  color: white;
}

4. Javascript code

//1. Add a close node after each span var myNodelist = document.getElementsByTagName ("li")
 
for (var 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);
 
}
 
//2. Handle deletion event var close = document.getElementsByClassName("close")
for (var i=0;i<close.length;i++)
{
  close[i].onclick=function () {
    //parentElement means returning the parent element node of the current node var div = this.parentElement
    div.style.display="none"
  }
}
 
//3. Processing task completion event var list = document.querySelector ("ul")
console.log(list)
list.addEventListener('click',function (ev) {
//The event.target attribute can be used to implement event delegation, for example, binding an event to ul, but it can be triggered when li is clicked //tagName is the tag name of the element if (ev.target.tagName === 'LI')
{
  //The toggle method switches between hide() and show() on the selected element //classList continues to operate on the element's class ev.target.classList.toggle('check')
}
},false);
 
//4. Process click add button and add a to-do item to the list function addElement(){
  var things = document.getElementById('things').value
 
 // alert(localStorage.setItem("mutodolist",JSON.stringify(things)))
 
  var li = document.createElement('li')
 
  var t = document.createTextNode(things)
 
  if (things == '')
  {
    alert("Please enter the pending events")
  }
  else
  {
    list.appendChild(li)
    li.appendChild(t)
  }
 
  var span = document.createElement('span')
  var txt = document.createTextNode('\u00D7')
 
  span.className='close'
  span.appendChild(txt)
  li.appendChild(span)
 
  for (var i=0;i<close.length;i++)
  {
    close[i].onclick=function () {
      var div = this.parentElement
      div.style.display="none"
    }
  }
}

When I was implementing the program, I found that I could understand the meaning of some codes, but when I started writing them myself, I couldn’t think of how to complete them.

I think the bottom line is that I haven't practiced coding enough, and I can't draw inferences from what I have learned and integrate it into my own thinking.

Therefore, if you want to create a notepad effect after reading this article, it is recommended that you try typing it yourself. After all, only by typing the code yourself can you know where the defects and errors are.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: