如何使用 HTML、Bootstrap 和 JavaScript 创建笔记应用程序?
front end technologyjavascriptweb development
在本教程中，我们将使用 HTML、Bootstrap 和 JavaScript 制作一个笔记应用程序。因此，HTML 将在这里用于添加不同的元素，bootstrap 将在这里工作以美化我们的设计，如 CSS，而 JavaScript 将添加基本功能，如添加和删除我们的注释。
让我们看看 UI 的 HTML 设计。
我们的 UI 将包含一个简单的文本区域，我们将在其中输入所需的注释，一个按钮，用于将我们给定的注释添加到注释列表中，在注释列表中，每个注释上都会有一个删除按钮，用于删除注释。
我们还将实现以下功能:如果用户刷新页面，则待办事项的状态将保持不变，这意味着刷新页面后它不会消失，我们将使用本地存储实现此功能。
本地存储 - 它存储在用户计算机中，它将存储用户数据，因此，无论何时刷新或重新访问页面，您的数据都将保持原样。可以使用浏览器中的清除浏览器数据/缓存选项清除数据。
因此，我们将实现以下功能 -
将待办事项添加到列表中
当用户在该部分输入内容并单击添加按钮时，将调用此函数。如果文本输入字段值为空，它将生成一个提示，表示字段不应为空。
由于本地存储以对象格式存储数据，因此，要将注释添加到本地存储，我们将本地存储中的数据解析为可读的对象格式。
我们将向添加按钮添加一个事件侦听器，因为当单击添加按钮时，我们还必须清除输入字段。因此，事件侦听器函数将是这样的。
document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!todoText){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); });
显示待办事项列表项
此函数将显示已附加到列表的所有待办事项。在这里，我们将从本地存储中获取项目列表对象，如果它不为空，则我们将解析该对象，以便可读 JSON 格式。
然后，我们将使用 html 语法创建列表项(我们可以在 JavaScript 中使用 `` 的 html 语法，通过附加项目，我们可以创建我们的 html 设计)。
因此，从本地存储中获取列表后，我们将遍历整个列表并创建待办事项元素。
这就是我们的显示待办事项列表项函数的样子
function DisplayTodoList(){ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0; index<notes.length; index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"< <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; }
删除待办事项
当用户单击删除图标时，此函数将执行删除功能，并且该项目将从列表中删除。
对于删除，我们将再次从本地存储中获取项目列表，我们将检查项目是否存在，然后我们将从第一个索引拼接项目，并在拼接后再次设置所有其余项目。
所以，最后，我们的删除函数代码将是−
function DelNoteItem(ind){
let All_item_notes = localStorage.getItem("All_item_notes");
if (All_item_notes != null)
notes = JSON.parse(All_item_notes);
notes.splice(ind, 1);
let str_notes=JSON.stringify(notes);
localStorage.setItem("All_item_notes",str_notes);
DisplayTodoList();
}
示例
现在让我们将所有 JavaScript 函数和 HTML 代码合并为一个。
<html> <head> <title>Note taking site using HTML, Bootstrap & JavaScript</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> </head> <body> <nav> <p style="font-size: 30px; font-weight: bold; text-align: center;margin-top: 40px;"> Note Taking App </p> </nav> <div class="container my-3"> <div class="card-body"> <h5 class="card-title">Create Your Note</h5> <div style="display: flex; grid-gap: 18px;"> <div class="form-outline w-50 mb-4"> <textarea class="form-control" id="todoText" rows="3"></textarea> </div> <button class="btn btn-primary" id="AddNotesBtn" style= "background-color:skyblue;color: black; height: 60px; width: 90px;"> Add </button> </div> </div> <hr> <h3 style="color:blue">List of your notes..</h3> <hr> <div id="All_item_notes" class="row container-fluid"> </div> </div> <script> const DisplayTodoList=()=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) notes = []; else notes = JSON.parse(All_item_notes); let html = ""; for(let index=0;index<notes.length;index++) { html +=` <div style="height: 3rem; align-item:right; width: 18rem;"> <div style="display: flex; grid-gap: 18px;"> <p class="card-text">${notes[index]}</p> <i id="${index}" style="cursor:pointer; color: red; fontsize: 20px" onclick= "DelNoteItem(this.id)" class="fa fa-trash"></i> </div> </div> `; } let localStorage_Notes = document.getElementById("All_item_notes"); if (notes.length == 0) localStorage_Notes.innerHTML = `🙄 No notes for now..`; else localStorage_Notes.innerHTML = html; } document.getElementById("AddNotesBtn").addEventListener("click", ()=>{ let todoText = document.getElementById("todoText"); if(!(todoText.value)){ alert("Please write something to create todo.") return; } let All_item_notes = localStorage.getItem("All_item_notes"); if (!All_item_notes) NoteListObj = []; else NoteListObj = JSON.parse(All_item_notes); NoteListObj.push(todoText.value); localStorage.setItem("All_item_notes", JSON.stringify(NoteListObj)); todoText.value = ""; DisplayTodoList(); }); const DelNoteItem=(ind)=>{ let All_item_notes = localStorage.getItem("All_item_notes"); if (All_item_notes != null) notes = JSON.parse(All_item_notes); notes.splice(ind, 1); let str_notes=JSON.stringify(notes); localStorage.setItem("All_item_notes",str_notes); DisplayTodoList(); } DisplayTodoList(); </script> </body> </html>
如程序中所述，当用户输入注释并单击添加按钮时，新的注释将附加到注释列表中，每个注释的右侧都会有一个删除按钮。
单击注释的删除图标将从注释列表中删除注释并在列表中更新它。更改将保存在本地存储中，刷新网页不会影响状态。
