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

Summary of js execution context and scope

Table of contents Preface text 1. Concepts relate...

Docker installation Nginx tutorial implementation illustration

Let’s install Nginx and try it out. Please note t...

XHTML tags should be used properly

<br />In previous tutorials of 123WORDPRESS....

Solve the problem of running node process in Linux system but unable to kill the process

Let me first introduce to you that the node proce...

Vue-Router installation process and principle detailed

Table of contents 1. Front-end routing implementa...

How to use Celery and Docker to handle periodic tasks in Django

As you build and scale your Django applications, ...

Analysis of the project process in idea packaging and uploading to cloud service

one. First of all, you have to package it in idea...

How to use nginx to block a specified interface (URL)

1. Introduction Sometimes, after the web platform...

How to customize at and cron scheduled tasks in Linux

There are two types of scheduled tasks in Linux s...

A brief discussion on two methods to solve space-evenly compatibility issues

Since its launch in 2009, flex has been supported...

Instructions for using the database connection pool Druid

Replace it with the optimal database connection p...

Win10 install Linux ubuntu-18.04 dual system (installation guide)

I installed a Linux Ubuntu system on my computer....

Detailed explanation of how to use structural pseudo-class selectors and pseudo-element selectors in CSS3

Introduction to structural pseudo-class selectors...

Detailed explanation of system input and output management in Linux

Management of input and output in the system 1. U...

Detailed explanation of front-end security: JavaScript anti-http hijacking and XSS

Table of contents HTTP hijacking, DNS hijacking a...