JS implements a simple todoList (notepad) effect

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:
  • Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)
  • Native JavaScript to implement todolist function
  • Vue.js todolist implementation code
  • JavaScript Example ODO List Analysis

<<:  Common scenarios and avoidance methods for index failure in MySQL

>>:  GZIP compression Tomcat and improve web performance process diagram

Recommend

CSS3 realizes the glowing border effect

Operation effect: html <!-- This element is no...

Solution to nacos not being able to connect to mysql

reason The mysql version that nacos's pom dep...

VMware virtual machine three connection methods example analysis

NAT In this way, the virtual machine's networ...

Introduction to the B-Tree Insertion Process

In the previous article https://www.jb51.net/arti...

Learn more about the most commonly used JavaScript events

Table of contents JavaScript events: Commonly use...

Use PHP's mail() function to send emails

Sending emails using PHP's mail function The ...

Detailed explanation of Docker data management (data volumes & data volume containers)

When using Docker in a production environment, da...

A simple way to clear the CSS, JavaScript and background image cache in the browser

In the actual project development process, the pag...

A brief introduction to mysql mycat middleware

1. What is mycat A completely open source large d...

Summary of some common writing methods that cause MySQL index failure

Preface Recently, I have been busy dealing with s...

Detailed tutorial for installing mysql5.7.21 under Windows

This article shares the installation tutorial of ...

Recommended plugins and usage examples for vue unit testing

Table of contents frame First-class error reporti...

Graphic tutorial on installing MySQL database and configuring environment variables on Mac

Table of contents Install mysql Configuring envir...

CSS3 sample code to achieve element arc motion

How to use CSS to control the arc movement of ele...

How to implement Vue timer

This article example shares the specific code of ...