如何使用HTML，Bootstrap和JavaScript在网站上创建笔记？

我们将创建一个网站，该网站将记录我们的笔记，并使用HTML，CSS和JavaScript将其保存以备将来使用。

先决条件：

• 基本了解HTML，Bootstrap和JavaScript。

方法：

• HTML：我们将使用HTML创建网站的基本框架。
• Bootstrap：与CSS相比，使我们的工作更加轻松。因此，我们使用了Bootstrap来美化我们的框架。
• JavaScript：保存注释并删除它们的基本逻辑是在index.js文件中。

示例：在这里，我们首先设计项目的结构，然后为功能进行编码。

index.html

  

    
  
    
    
      
    
    
      
    
    

  

    
        
            
                THE NOTES TAKER
            
  
        
    
  
    
        Take your Notes here
        
            
                
                    Add a Note
                  
                
                
                                        
                
                
                    Add Note
                
            
        
        
        Your Notes
        
          
         
        
    
  
    

  

index.js

showNotes();
  
// If user adds a note, add it to the localStorage
let addBtn = document.getElementById("addBtn");
addBtn.addEventListener("click", function(e) {
    let addTxt = document.getElementById("addTxt");
    let notes = localStorage.getItem("notes");
  
    if (notes == null) notesObj = [];
    else notesObj = JSON.parse(notes);
  
    notesObj.push(addTxt.value);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    addTxt.value = "";
  
    showNotes();
});
  
// Function to show elements from localStorage
function showNotes() {
    let notes = localStorage.getItem("notes");
  
    if (notes == null) notesObj = [];
    else notesObj = JSON.parse(notes);
  
    let html = "";
  
    notesObj.forEach(function(element, index) {
        html += `

                

                    

                        Note ${index + 1}
                    
                    
 
                        ${element}
                    
   
                  
                    Delete Note
                
            
        
`;
    });
  
    let notesElm = document.getElementById("notes");
  
    if (notesObj.length != 0) notesElm.innerHTML = html;
    else
        notesElm.innerHTML = `Nothing to show! 
        Use "Add a Note" section above to add notes.`;
}
  
// Function to delete a note
function deleteNote(index) {
    let notes = localStorage.getItem("notes");
  
    if (notes == null) notesObj = [];
    else notesObj = JSON.parse(notes);
  
    notesObj.splice(index, 1);
  
    localStorage.setItem("notes", 
        JSON.stringify(notesObj));
  
    showNotes();
}

输出：