如何使用HTML，CSS，JS和Bootstrap创建ToDo应用？

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

要实现的特征或功能：

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

先决条件： HTML ， CSS ， JavaScript ， jQuery和Bootstrap的基本知识。另外，用户应注意Bootstrap中的网格系统如何工作。

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

• 句法：

  $ touch index.html index.css index.js

  

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

    
  
      
      todo
      
      
      
      
  
    
  
      
          
                  
            TODO APP 
                 
          
          
          
              
                  
                      
                        
                      
                      
                  
                  
                      
                  
              
          
          
              
              
          
      
      
  
    

• 步骤2：现在，将一些CSS属性添加到index.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");
    }
    
  }
  

• 输出：