Skip to content

Commit ea83e76

Browse files
sahandghavidelsahandghavidel
committed
update note app project
1 parent e7e3b9a commit ea83e76

File tree

3 files changed

+54
-56
lines changed

3 files changed

+54
-56
lines changed

‎projects/note-app/index.html

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,21 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Note App</title>
7+
<title>Document</title>
88
<link rel="stylesheet" href="style.css" />
99
</head>
1010
<body>
1111
<h1 class="heading">Note App</h1>
1212
<p class="info-text">Double click on a note to remove it</p>
13-
<div id="app" class="app">
13+
<div class="app" id="app">
1414
<!-- <textarea
15-
class="note"
1615
cols="30"
1716
rows="10"
17+
class="note"
1818
placeholder="Empty Note"
1919
></textarea> -->
20-
<button class="btn" id="btn" type="button">+</button>
20+
21+
<button class="btn" id="btn">+</button>
2122
</div>
2223
<script src="index.js"></script>
2324
</body>

‎projects/note-app/index.js

+31-34
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,64 @@
1-
const notesContainerEl = document.getElementById("app");
21
const btnEl = document.getElementById("btn");
2+
const appEl = document.getElementById("app");
33

44
getNotes().forEach((note) => {
55
const noteEl = createNoteEl(note.id, note.content);
6-
notesContainerEl.insertBefore(noteEl, btnEl);
6+
appEl.insertBefore(noteEl, btnEl);
77
});
88

9-
btnEl.addEventListener("click", () => addNote());
10-
11-
function getNotes() {
12-
return JSON.parse(localStorage.getItem("note-ap") || "[]");
13-
}
14-
15-
function saveNotes(notes) {
16-
localStorage.setItem("note-ap", JSON.stringify(notes));
17-
}
18-
199
function createNoteEl(id, content) {
2010
const element = document.createElement("textarea");
21-
2211
element.classList.add("note");
23-
element.value = content;
2412
element.placeholder = "Empty Note";
25-
26-
element.addEventListener("input", () => {
27-
updateNote(id, element.value);
28-
});
13+
element.value = content;
2914

3015
element.addEventListener("dblclick", () => {
31-
const noteDelete = confirm("Want to Delete the note?");
32-
if (noteDelete) {
16+
const warning = confirm("Do you want to delete this note?");
17+
if (warning) {
3318
deleteNote(id, element);
3419
}
3520
});
3621

22+
element.addEventListener("input", () => {
23+
updateNote(id, element.value);
24+
});
25+
3726
return element;
3827
}
3928

29+
function deleteNote(id, element) {
30+
const notes = getNotes().filter((note)=>note.id != id)
31+
saveNote(notes)
32+
appEl.removeChild(element)
33+
}
34+
35+
function updateNote(id, content) {
36+
const notes = getNotes();
37+
const target = notes.filter((note) => note.id == id)[0];
38+
target.content = content;
39+
saveNote(notes);
40+
}
41+
4042
function addNote() {
4143
const notes = getNotes();
4244
const noteObj = {
4345
id: Math.floor(Math.random() * 100000),
4446
content: "",
4547
};
46-
4748
const noteEl = createNoteEl(noteObj.id, noteObj.content);
48-
notesContainerEl.insertBefore(noteEl, btnEl);
49+
appEl.insertBefore(noteEl, btnEl);
4950

5051
notes.push(noteObj);
51-
saveNotes(notes);
52-
}
53-
54-
function updateNote(id, newContent) {
55-
const notes = getNotes();
56-
const target = notes.filter((note) => note.id == id)[0];
5752

58-
target.content = newContent;
59-
saveNotes(notes);
53+
saveNote(notes);
6054
}
6155

62-
function deleteNote(id, element) {
63-
const notes = getNotes().filter((note) => note.id != id);
56+
function saveNote(notes) {
57+
localStorage.setItem("note-app", JSON.stringify(notes));
58+
}
6459

65-
saveNotes(notes);
66-
notesContainerEl.removeChild(element);
60+
function getNotes() {
61+
return JSON.parse(localStorage.getItem("note-app") || "[]");
6762
}
63+
64+
btnEl.addEventListener("click", addNote);

‎projects/note-app/style.css

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
body {
2-
font-family: "Courier New", Courier, monospace;
32
margin: 0;
43
background: linear-gradient(to left, lightblue, lightgreen);
4+
font-family: "Courier New", Courier, monospace;
55
}
66

77
.heading {
@@ -10,6 +10,7 @@ body {
1010
padding-top: 10px;
1111
font-size: 35px;
1212
}
13+
1314
.info-text {
1415
text-align: center;
1516
color: darkblue;
@@ -19,26 +20,25 @@ body {
1920
.app {
2021
display: grid;
2122
grid-template-columns: repeat(auto-fill, 300px);
23+
gap: 40px;
2224
justify-content: center;
2325
padding: 50px;
24-
gap: 40px;
2526
}
2627

2728
.note {
28-
height: 200px;
2929
padding: 17px;
3030
border-radius: 15px;
3131
resize: none;
3232
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
33-
font-family: monospace;
3433
font-size: 18px;
34+
height: 200px;
3535
color: darkblue;
36-
font-weight: 800;
3736
border: none;
3837
outline: none;
3938
background: rgba(255, 255, 255, 0.1);
4039
box-sizing: border-box;
4140
}
41+
4242
.note::placeholder {
4343
color: gray;
4444
opacity: 30%;
@@ -50,19 +50,19 @@ body {
5050
transition: all 300ms ease;
5151
}
5252

53-
.btn {
54-
height: 200px;
55-
border-color: rgba(255, 255, 255, 0.37);
56-
background: rgba(255, 255, 255, 0.27);
57-
border-radius: 15px;
58-
font-size: 70px;
59-
font-weight: 700;
60-
color: rgba(0, 0, 0, 0.3);
61-
cursor: pointer;
53+
.btn{
54+
height: 200px;
55+
border-color: rgba(255, 255, 255, 0.37);
56+
background: rgba(255, 255, 255, 0.27);
57+
border-radius: 15px;
58+
font-size: 70px;
59+
font-weight: 700;
60+
color: rgba(0, 0, 0, 0.3);
61+
cursor: pointer;
6262
}
6363

64-
.btn:hover {
65-
background: rgba(255, 255, 255, 0.55);
66-
color: rgba(0, 0, 0, 0.6);
67-
transition: all 300ms ease;
64+
.btn:hover{
65+
background: rgba(255, 255, 255, 0.55);
66+
color: rgba(0, 0, 0, 0.6);
67+
transition: all 300ms ease;
6868
}

0 commit comments

Comments
 (0)