📜  如何使用HTML,CSS,JS和Bootstrap创建ToDo应用?

📅  最后修改于: 2021-05-25 17:07:59             🧑  作者: Mango

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

要实现的特征或功能:

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

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