笔记应用 Notes App
1. 概述
项目本体为一个笔记应用.
效果:
2. 结构和切图:
网页的基本结构如下:
1
2
3
4
5
6
<body>
<button class="add" id="add">
<i class="fas fa-plus"></i>
Add Note
</button>
</body>
3. 编写 CSS 样式
完整的 CSS 样式表如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
* {
box-sizing: border-box;
outline: none;
}
body {
background-color: #1f1e33;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
flex-wrap: wrap;
margin: 0;
padding-top: 3rem;
}
.add {
position: fixed;
top: 1rem;
right: 1rem;
font-size: 1rem;
background-color: #3f3d66;
color: #fff;
border: none;
border-radius: 3px;
padding: .5rem 1rem;
cursor: pointer;
transition: all .3s ease;
}
.add:active {
transform: scale(.98);
}
.main {
padding: 20px;
}
.hidden {
display: none;
}
.note {
background-color: #3f3d66;
color: #fff;
box-shadow: 0 0 10px 4px rgba(99, 99, 99, .1);
margin: 30px 20px;
height: 400px;
width: 350px;
border-radius: 6px;
overflow-y: scroll;
}
.note .tools {
background-color: #302f50;
display: flex;
justify-content: flex-end;
padding: .5rem;
}
.note .tools button {
background-color: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 1rem;
margin-left: .5rem;
}
.note textarea {
outline: none;
font-family: inherit;
font-size: 1rem;
border: none;
height: 400px;
width: 100%;
padding: 10px;
background-color: #3a3963;
color: #fff;
}
4. JavaScript
下面编写 JavaScript 函数:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const addBtn = document.getElementById('add');
// fetch stored notes in localStorage and display them
const notes = JSON.parse(localStorage.getItem('notes'));
if (notes) {
notes.forEach(note => addNewNote(note));
}
// listen to click events of 'add' btn
addBtn.addEventListener('click', () => addNewNote());
// handle note element adding
function addNewNote(text = '') {
// create a div element
const note = document.createElement('div');
// and declare its className
note.classList.add('note')
// inject context
note.innerHTML = `
<div class="tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main ${text? "" : "hidden"}"></div>
<textarea class="${text? hidden : ""}"></textarea>`;
const editBtn = note.querySelector('.edit');
const deleteBtn = note.querySelector('.delete');
const main = note.querySelector('.main');
const textArea = note.querySelector('textarea');
// inject text context and assign click events
textArea.value = text;
main.innerHTML = marked(text);
deleteBtn.addEventListener('click', () => {
note.remove();
updateLS();
})
editBtn.addEventListener('click', () => {
main.classList.toggle('hidden');
textArea.classList.toggle('hidden');
})
textArea.addEventListener('input', (e) => {
const {value} = e.target;
main.innerHTML = marked(value);
updateLS();
})
document.body.appendChild(note);
}
// update localStorage to save changes
function updateLS() {
const notesText = document.querySelectorAll('textarea');
const notes = [];
notesText.forEach(note => notes.push(note.value));
localStorage.setItem('notes', JSON.stringify(notes));
}
注意此处用于将用户输入的纯文本格式化为 html 文字的函数 marked() 需要引用外部库:
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
最后, 完整的网页演示可见 此处
