极客教程如何使用Html CSS JavaScript构建笔记应用程序
在本文章中，我们将学习如何使用HTML、CSS和JavaScript制作一个笔记应用程序。该项目将帮助您提高在HTML、CSS和JavaScript方面的实践知识。在这个笔记应用程序中，我们可以将笔记作为标题和描述保存在本地存储中，因此在重新加载时不会被删除。
先决条件
- HTML
- CSS
- JavaScript
方法
- 首先，使用HTML构建应用程序的基本结构，根据要求使用不同的标签，如
<
div>，
，
示例： 在这里，我们首先设计项目的结构并提供样式，然后我们将为功能编写代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Note App</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="btn">
<div class="heading">
<h1>Note Taking App</h1>
</div>
<button id="addBtn">
<i class="fas fa-plus"></i>
Add Note
</button>
</div>
<div id="main">
</div>
<script src=
"https://kit.fontawesome.com/bf520e6492.js"
crossorigin="anonymous">
</script>
<script src="./script.js"></script>
</body>
</html>
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();
输出：
