Skip to content

Commit 25d45eb

Browse files
author
afeefuddin
committed
Delete Button Added
1 parent 944565f commit 25d45eb

5 files changed

Lines changed: 95 additions & 39 deletions

File tree

‎53 - Notes Taking App/index.html‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<link rel="shortcut icon" href="./icon.png" type="image/png" />
8-
<title>Notes Taking App</title>
9-
<link rel="stylesheet" href="style.css" />
10-
</head>
11-
<body>
12-
<h1>Notes Taking App</h1>
13-
<div id="app">
14-
<button class="add-note" type="button">+</button>
15-
</div>
16-
<footer>
17-
<p>
18-
&#x3c; &#47; &#x3e; with ❤️ by
19-
<a target="_blank" href="https://atharv110.co/">Atharv Vani</a>
20-
<br />
21-
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript.git" target="_blank"
22-
>#30DaysOfJavaScript
23-
</a>
24-
</p>
25-
</footer>
26-
<script src="script.js"></script>
27-
</body>
28-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="shortcut icon" href="./icon.png" type="image/png" />
9+
<title>Notes Taking App</title>
10+
<link rel="stylesheet" href="style.css" />
11+
</head>
12+
13+
<body>
14+
<h1>Notes Taking App</h1>
15+
<div id="app">
16+
<!-- Added a delete button. It will work when we click it, a delete icon wil appear and existing notes can be deleted by clicking them.
17+
When we are done with deleting we will click it again and the icon will disapper
18+
The deleting will be stopped also if we start adding new notes.-->
19+
<button id="delete-note" type="button">Delete</button>
20+
<button class="add-note" type="button">+</button>
21+
</div>
22+
<footer>
23+
<p>
24+
&#x3c; &#47; &#x3e; with ❤️ by
25+
<a target="_blank" href="https://atharv110.co/">Atharv Vani</a>
26+
<br />
27+
<a href="https://github.com/swapnilsparsh/30DaysOfJavaScript.git" target="_blank">#30DaysOfJavaScript
28+
</a>
29+
</p>
30+
</footer>
31+
<script src="script.js"></script>
32+
</body>
33+
34+
</html>

‎53 - Notes Taking App/reshot-icon-delete-KL8MB62NXD.png‎

227 Bytes
Loading

‎53 - Notes Taking App/reshot-icon-delete-KL8MB62NXD.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎53 - Notes Taking App/script.js‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,34 @@
11
const notesContainer = document.getElementById("app");
22
const addNoteButton = notesContainer.querySelector(".add-note");
3-
3+
const deleteNoteButton = notesContainer.querySelector("#delete-note")
4+
let delete_element = false;
45
getNotes().forEach(note => {
56
const noteElement = createNoteElement(note.id, note.content);
6-
notesContainer.insertBefore(noteElement, addNoteButton);
7+
notesContainer.insertBefore(noteElement, deleteNoteButton);
78
});
89

9-
addNoteButton.addEventListener("click", () => addNote());
10+
addNoteButton.addEventListener("click", () =>{
11+
if(delete_element){
12+
deleteNoteButton.innerHTML='Delete';
13+
document.getElementById("delete-note").style.background=' rgba(255, 0, 0, 0.35) ';
14+
15+
delete_element=false;
16+
}
17+
addNote()});
18+
deleteNoteButton.addEventListener("click",() => {
19+
if(!delete_element){
20+
deleteNoteButton.innerHTML= '<img src="reshot-icon-delete-KL8MB62NXD.png" alt="delete">';
21+
document.getElementById("delete-note").style.background=' rgba(255, 0, 0, 0.693) ';
22+
delete_element=true;
23+
24+
}
25+
else{
26+
deleteNoteButton.innerHTML='Delete';
27+
document.getElementById("delete-note").style.background=' rgba(255, 0, 0, 0.35) ';
28+
29+
delete_element=false;
30+
}
31+
});
1032

1133
function getNotes(){
1234
return JSON.parse(localStorage.getItem("note-ap") || "[]");
@@ -26,13 +48,21 @@ function createNoteElement(id, content){
2648
element.addEventListener("change", () => {
2749
updateNote(id, element.value);
2850
});
29-
30-
element.addEventListener("dblclick", () => {
31-
const noteDelete = confirm("Want to Delete the note?")
32-
if (noteDelete) {
33-
deleteNote(id, element);
34-
}
35-
});
51+
52+
element.addEventListener("click", () => {
53+
if(delete_element){
54+
deleteNote(id,element);
55+
}
56+
});
57+
58+
//Removed the double click method of deleting
59+
60+
// element.addEventListener("dblclick", () => {
61+
// const noteDelete = confirm("Want to Delete the note?")
62+
// if (noteDelete) {
63+
// deleteNote(id, element);
64+
// }
65+
// });
3666

3767
return element;
3868
}
@@ -45,7 +75,7 @@ function addNote(){
4575
};
4676

4777
const noteElement = createNoteElement(noteObj.id, noteObj.content);
48-
notesContainer.insertBefore(noteElement, addNoteButton);
78+
notesContainer.insertBefore(noteElement, deleteNoteButton);
4979

5080

5181
notes.push(noteObj);
@@ -67,3 +97,5 @@ function deleteNote(id, element) {
6797
notesContainer.removeChild(element);
6898
}
6999

100+
101+

‎53 - Notes Taking App/style.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,24 @@ h1 {
4444
outline: none;
4545
background: var(--card);
4646
}
47-
47+
#delete-note{
48+
height: 200px;
49+
border: none;
50+
outline: none;
51+
background: rgb(255, 0, 0, 0.35);
52+
border-radius: 15px;
53+
font-size: 40px;
54+
font-weight: 700;
55+
color: rgba(0, 0, 0, 0.5);
56+
cursor: pointer;
57+
}
58+
img{
59+
height:70px;
60+
width:60px;
61+
}
62+
/* #delete-note:hover{
63+
background:rgba(255, 0, 0, 0.623);
64+
} */
4865
.add-note {
4966
height: 200px;
5067
border: none;
@@ -66,7 +83,7 @@ h1 {
6683
color: rgb(214, 214, 214);
6784
}
6885

69-
footer,
86+
7087
a {
7188
color: rgb(214, 214, 214);
7289
font-size: 20px;

0 commit comments

Comments
 (0)