資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用HTML、Bootstrap和JavaScript建立一個筆記應用程式？
在本教程中，我們將使用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>
正如程式中所討論的，當用戶輸入筆記並單擊新增按鈕時，一個新的筆記將被新增到筆記列表中，每個筆記的右側都將有一個刪除按鈕。
單擊筆記的刪除圖示將從筆記列表中刪除該筆記並在列表中更新它。更改將儲存在本地儲存中，重新整理網頁不會影響狀態。
更新於：2022年8月23日
480 次瀏覽
廣告