当前位置：极客教程 > JavaScript > JavaScript 精品文章 > 如何使用Html CSS JavaScript构建笔记应用程序

如何使用Html CSS JavaScript构建笔记应用程序

在本文章中，我们将学习如何使用HTML、CSS和JavaScript制作一个笔记应用程序。该项目将帮助您提高在HTML、CSS和JavaScript方面的实践知识。在这个笔记应用程序中，我们可以将笔记作为标题和描述保存在本地存储中，因此在重新加载时不会被删除。

先决条件

方法

首先，使用HTML构建应用程序的基本结构，根据要求使用不同的标签，如

div>，

，

CSS

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
  
#main { 
    width: 100%; 
    min-height: 100vh; 
    padding-bottom: 50px; 
    background-color: #81ecec; 
    display: flex; 
    flex-wrap: wrap; 
} 
  
#addBtn { 
    position: fixed; 
    left: 18px; 
    top: 10px; 
    background-color: #2d3436; 
    color: white; 
    padding: 10px; 
    border: 0; 
    outline: 0; 
    border-radius: 5px; 
} 
  
.btn { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #81ecec; 
    margin-top: 0px; 
} 
  
.note { 
    width: 380px; 
    height: 260px; 
    background-color: white; 
    margin: 15px; 
    margin-top: 55px; 
    border-radius: 10px; 
    margin-left: 20px; 
    margin-bottom: 30px; 
} 
  
.icons { 
    width: 100%; 
    background-color: #0d7390; 
    color: white; 
    padding: 5px; 
    display: flex; 
    justify-content: start; 
    border-radius: 10px 10px 0px 0px; 
} 
  
.icons i { 
    padding: 5px; 
    cursor: pointer; 
} 
  
.note textarea { 
    border: none; 
    width: 100%; 
    height: 87%; 
    resize: none; 
    padding: 10px; 
    font-size: 18px; 
    border-radius: 15px; 
    background-color: beige; 
    border-radius: 0px 0px 10px 10px; 
} 
  
.title-div textarea { 
    border-radius: 0px 0px 0px 0px; 
    margin-bottom: -4px; 
    background-color: #a4cad4; 
    font-weight: bolder; 
    font-size: x-large; 
} 
  
.heading { 
    position: fixed; 
    margin-top: 46px; 
    color: ivory; 
} 
  
.note textarea:focus { 
    border: 0; 
    outline: 0; 
}

JavaScript

const addBtn = document.querySelector("#addBtn"); 
const main = document.querySelector("#main"); 
  
// Click event listener 
addBtn.addEventListener("click", function () { 
    addNote(); 
}); 
  
// Save button function 
const saveNotes = () => { 
  
    // Select content textareas 
    const notes =  
        document.querySelectorAll(".note .content");  
          
    // Select title textareas 
    const titles =  
        document.querySelectorAll(".note .title");  
  
    const data = []; 
  
    notes.forEach((note, index) => { 
        const content = note.value; 
        const title = titles[index].value; 
        console.log(title); 
        if (content.trim() !== "") { 
            data.push({ title, content }); 
        } 
    }); 
  
    const titlesData =  
        data.map((item) => item.title); 
    console.log(titlesData); 
    localStorage.setItem( 
        "titles", JSON.stringify(titlesData)); 
  
    const contentData =  
        data.map((item) => item.content); 
    localStorage.setItem( 
        "notes", JSON.stringify(contentData)); 
}; 
  
// Addnote button function 
const addNote = (text = "", title = "") => { 
    const note = document.createElement("div"); 
    note.classList.add("note"); 
    note.innerHTML = ` 
    <div class="icons"> 
         <i class="save fas fa-save" 
             style="color:red"> 
         </i> 
         <i class="trash fas fa-trash" 
             style="color:yellow"> 
         </i>  
    </div> 
    <div class="title-div"> 
        <textarea class="title" 
            placeholder="Write the title ...">{title} 
        </textarea> 
    </div> 
    <textarea class="content" 
        placeholder="Note down your thoughts ...">{text} 
    </textarea> 
    `; 
    function handleTrashClick() { 
        note.remove(); 
        saveNotes(); 
    } 
    function handleSaveClick() { 
        saveNotes(); 
    } 
    const delBtn = note.querySelector(".trash"); 
    const saveButton = note.querySelector(".save"); 
    const textareas = note.querySelectorAll("textarea"); 
  
    delBtn.addEventListener("click", handleTrashClick); 
    saveButton.addEventListener("click", handleSaveClick); 
    main.appendChild(note); 
    saveNotes(); 
}; 
  
// Loading all the notes those are saved in  
// the localstorage 
function loadNotes() { 
  
    const titlesData =  
        JSON.parse(localStorage.getItem("titles")) || []; 
    const contentData =  
        JSON.parse(localStorage.getItem("notes")) || []; 
          
    for (let i = 0;  
            i < Math.max( 
                titlesData.length, contentData.length); i++) { 
        addNote(contentData[i], titlesData[i]); 
    } 
} 
loadNotes();