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

📅  最后修改于: 2021-10-31 05:03:55             🧑  作者: Mango

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

要实现的特性或功能:

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

先决条件: HTMLCSSJavaScriptjQueryBootstrap 的基本知识。此外,用户应该了解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");
      }
      
    }
    
  • 输出: