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

Nginx content cache and common parameter configuration details

Use scenarios: The project's pages need to lo...

Implementation of fuzzy query like%% in MySQL

1, %: represents any 0 or more characters. It can...

JavaScript setinterval delay one second solution

When using setinterval, it is found that it will ...

Summary of important components of MySQL InnoDB

Innodb includes the following components 1. innod...

win10 mysql 5.6.35 winx64 free installation version configuration tutorial

mysql 5.6.35 winx64 free installation version con...

HTML simple shopping quantity applet

This article shares a simple HTML shopping quanti...

In-depth understanding of Vue-cli4 routing configuration

Table of contents Preface - Vue Routing 1. The mo...

Implementation example of Docker deployment of front-end and back-end separation projects

Table of contents 1. Environmental Preparation 2....

Reasons and optimization solutions for slow MySQL limit paging with large offsets

In MySQL, we usually use limit to complete the pa...

Steps to install MySQL using Docker under Linux

As a tester, you may often need to install some s...

Docker online and offline installation and common command operations

1. Test environment name Version centos 7.6 docke...

Implement MaterialUI button click animation based on CSS and encapsulate it into a React component

Preface As a heavy user of front-end frameworks, ...

Reasons for the sudden drop in MySQL performance

Sometimes you may encounter a situation where a S...

Learn to deploy microservices with docker in ten minutes

Since its release in 2013, Docker has been widely...

Introduction and usage summary of React-Native screenshot component react-native-view-shot

Table of contents 1. Phenomenon 2. Solution 3. Su...