Updated Project No. of Notes Taking App to 53 · bartick/30DaysOfJavaScript@52490eb · GitHub
Skip to content

Commit 52490eb

Browse files
Atharv-110Atharv-110
committed
Updated Project No. of Notes Taking App to 53
1 parent 4229bb2 commit 52490eb

6 files changed

Lines changed: 184 additions & 2 deletions

File tree

30DaysOfJavaScript/assets/50.png renamed to 30DaysOfJavaScript/assets/53.png

File renamed without changes.

‎53 - Notes Taking App/icon.png‎

7.05 KB
Loading

‎53 - Notes Taking App/index.html‎

Lines changed: 28 additions & 0 deletions

‎53 - Notes Taking App/script.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
const notesContainer = document.getElementById("app");
2+
const addNoteButton = notesContainer.querySelector(".add-note");
3+
4+
getNotes().forEach(note => {
5+
const noteElement = createNoteElement(note.id, note.content);
6+
notesContainer.insertBefore(noteElement, addNoteButton);
7+
});
8+
9+
addNoteButton.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+
19+
function createNoteElement(id, content){
20+
const element = document.createElement("textarea");
21+
22+
element.classList.add("note");
23+
element.value = content;
24+
element.placeholder = "Empty Note";
25+
26+
element.addEventListener("change", () => {
27+
updateNote(id, element.value);
28+
});
29+
30+
element.addEventListener("dblclick", () => {
31+
const noteDelete = confirm("Want to Delete the note?")
32+
if (noteDelete) {
33+
deleteNote(id, element);
34+
}
35+
});
36+
37+
return element;
38+
}
39+
40+
function addNote(){
41+
const notes = getNotes();
42+
const noteObj = {
43+
id: Math.floor(Math.random()*100000),
44+
content: ""
45+
};
46+
47+
const noteElement = createNoteElement(noteObj.id, noteObj.content);
48+
notesContainer.insertBefore(noteElement, addNoteButton);
49+
50+
51+
notes.push(noteObj);
52+
saveNotes(notes);
53+
}
54+
55+
function updateNote(id, newContent) {
56+
const notes = getNotes();
57+
const target = notes.filter(note=>note.id == id)[0];
58+
59+
target.content = newContent;
60+
saveNotes(notes);
61+
}
62+
63+
function deleteNote(id, element) {
64+
const notes = getNotes().filter(note => note.id != id);
65+
66+
saveNotes(notes);
67+
notesContainer.removeChild(element);
68+
}
69+

‎53 - Notes Taking App/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
:root {
2+
--bg: #19172e;
3+
--btn: #9c528b;
4+
--card: #b9929f;
5+
}
6+
* {
7+
font-family: sans-serif;
8+
transition: 0.5s ease;
9+
}
10+
body {
11+
margin: 0;
12+
background: var(--bg);
13+
}
14+
15+
h1 {
16+
color: #fff;
17+
text-align: center;
18+
left: 0;
19+
right: 0;
20+
top: 0;
21+
padding-top: 10px;
22+
font-size: 2rem !important;
23+
}
24+
25+
#app {
26+
display: grid;
27+
grid-template-columns: repeat(auto-fill, 200px);
28+
padding: 50px;
29+
gap: 40px;
30+
}
31+
32+
.note {
33+
height: 200px;
34+
box-sizing: border-box;
35+
padding: 17px;
36+
border-radius: 15px;
37+
resize: none;
38+
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
39+
font-family: monospace;
40+
font-size: 18px;
41+
color: var(--bg);
42+
font-weight: 800;
43+
border: none;
44+
outline: none;
45+
background: var(--card);
46+
}
47+
48+
.add-note {
49+
height: 200px;
50+
border: none;
51+
outline: none;
52+
background: rgba(156, 82, 139, 0.27);
53+
border-radius: 15px;
54+
font-size: 70px;
55+
font-weight: 700;
56+
color: rgba(0, 0, 0, 0.5);
57+
cursor: pointer;
58+
}
59+
60+
.add-note:hover {
61+
background: rgba(156, 82, 139, 0.5);
62+
color: rgba(0, 0, 0, 0.7);
63+
}
64+
65+
::placeholder {
66+
color: rgb(214, 214, 214);
67+
}
68+
69+
footer,
70+
a {
71+
color: rgb(214, 214, 214);
72+
font-size: 20px;
73+
}
74+
75+
footer {
76+
text-align: center;
77+
color: white;
78+
font-size: 1.25rem;
79+
left: 0;
80+
right: 0;
81+
bottom: 0;
82+
margin-bottom: 0;
83+
padding: 10px;
84+
line-height: 4vh;
85+
}

‎index.html‎

Lines changed: 2 additions & 2 deletions

0 commit comments

Comments
 (0)