如何使用 HTML、CSS、JS 和 Bootstrap 创建 ToDo 应用程序？

我们将创建一个基本的 todo 应用程序来了解 JavaScript 的基础知识。在此 Web 应用程序中，您可以创建待办事项列表并可以从列表中删除特定元素。

要实现的特性或功能：

• 交互式和响应式设计
• 响应式网格系统
• 存储和删除项目

先决条件： HTML 、 CSS 、 JavaScript 、 jQuery和Bootstrap 的基本知识。此外，用户应该了解Bootstrap 中的网格系统是如何工作的。

设置：为 HTML、CSS 和 JavaScript 创建三个文件。要创建这些文件，请运行以下命令：

• 句法：

  $ touch index.html index.css index.js

  

• 第 1 步：现在编辑index.html文件。

    
  
      
      todo
      
      
      
      
  
    
  
      
          
                  
            TODO APP 
                 
          
          
          
              
                  
                      
                        
                      
                      
                  
                  
                      
                  
              
          
          
              
              
          
      
      
  
    

• 第 2 步：现在，向 index.css文件添加一些 CSS 属性。

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: cursive;
    }
      
    body {
      background: #f2f2f2;
      overflow: auto;
    }
      
    h1{
       text-align: center;
       margin: 5%;
       font-size: 3rem;
       text-decoration: underline;
    }
      
    ul {
      text-align: lleft;
      padding-left: 10%;
      padding: 7%;
      font-size: 2rem;
      list-style: circle;
    }
      
    li:hover{
      color:red;
      margin: 4%;
      transition: 1.5s ease;
      cursor: pointer;
    }
     
  

• 第 3 步：编辑index.js文件并添加一些功能。

  // Function called while clicking add button
  function add_item() {
    
    // Getting box and ul by selecting id;
    let item = document.getElementById("box");
    let list_item = document.getElementById("list_item");
    if(item.value != ""){
    
        // Creating element and adding value to it
        let make_li = document.createElement("LI");
        make_li.appendChild(document.createTextNode(item.value));
    
        // Adding li to ul
        list_item.appendChild(make_li);
    
        // Reset the value of box
        item.value=""
          
        // Delete a li item on click 
        make_li.onclick = function(){
          this.parentNode.removeChild(this);
        }
    
    }
    else{
    
      // Alert msg when value of box is "" empty.
      alert("plz add a value to item");
    }
    
  }
  

• 输出：