Skip to content

Commit c170288

Browse files
Supriya2922Supriya2922
committed
notes app added
1 parent 945e073 commit c170288

File tree

3 files changed

+403
-0
lines changed

3 files changed

+403
-0
lines changed

‎Notes_app/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en" dir="ltr">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Notes App </title>
7+
<link rel="stylesheet" href="style.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<!-- Iconscout Link For Icons -->
10+
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
11+
</head>
12+
<body>
13+
<div class="popup-box">
14+
<div class="popup">
15+
<div class="content">
16+
<header>
17+
<p></p>
18+
<i class="uil uil-times"></i>
19+
</header>
20+
<form action="#">
21+
<div class="row title">
22+
<label>Title</label>
23+
<input type="text" spellcheck="false">
24+
</div>
25+
<div class="row description">
26+
<label>Description</label>
27+
<textarea spellcheck="false"></textarea>
28+
</div>
29+
<button></button>
30+
</form>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="wrapper">
35+
<li class="add-box">
36+
<div class="icon"><i class="uil uil-plus"></i></div>
37+
<p>Add new note</p>
38+
</li>
39+
</div>
40+
41+
<script src="script.js"></script>
42+
43+
</body>
44+
</html>

‎Notes_app/script.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
const addBox = document.querySelector(".add-box"),
2+
popupBox = document.querySelector(".popup-box"),
3+
popupTitle = popupBox.querySelector("header p"),
4+
closeIcon = popupBox.querySelector("header i"),
5+
titleTag = popupBox.querySelector("input"),
6+
descTag = popupBox.querySelector("textarea"),
7+
addBtn = popupBox.querySelector("button");
8+
9+
const months = ["January", "February", "March", "April", "May", "June", "July",
10+
"August", "September", "October", "November", "December"];
11+
const notes = JSON.parse(localStorage.getItem("notes") || "[]");
12+
let isUpdate = false, updateId;
13+
14+
addBox.addEventListener("click", () => {
15+
popupTitle.innerText = "Add a new Note";
16+
addBtn.innerText = "Add Note";
17+
popupBox.classList.add("show");
18+
document.querySelector("body").style.overflow = "hidden";
19+
if(window.innerWidth > 660) titleTag.focus();
20+
});
21+
22+
closeIcon.addEventListener("click", () => {
23+
isUpdate = false;
24+
titleTag.value = descTag.value = "";
25+
popupBox.classList.remove("show");
26+
document.querySelector("body").style.overflow = "auto";
27+
});
28+
29+
function showNotes() {
30+
if(!notes) return;
31+
document.querySelectorAll(".note").forEach(li => li.remove());
32+
notes.forEach((note, id) => {
33+
let filterDesc = note.description.replaceAll("\n", '<br/>');
34+
let liTag = `<li class="note">
35+
<div class="details">
36+
<p>${note.title}</p>
37+
<span>${filterDesc}</span>
38+
</div>
39+
<div class="bottom-content">
40+
<span>${note.date}</span>
41+
<div class="settings">
42+
<i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
43+
<ul class="menu">
44+
<li onclick="updateNote(${id}, '${note.title}', '${filterDesc}')"><i class="uil uil-pen"></i>Edit</li>
45+
<li onclick="deleteNote(${id})"><i class="uil uil-trash"></i>Delete</li>
46+
</ul>
47+
</div>
48+
</div>
49+
</li>`;
50+
addBox.insertAdjacentHTML("afterend", liTag);
51+
});
52+
}
53+
showNotes();
54+
55+
function showMenu(elem) {
56+
elem.parentElement.classList.add("show");
57+
document.addEventListener("click", e => {
58+
if(e.target.tagName != "I" || e.target != elem) {
59+
elem.parentElement.classList.remove("show");
60+
}
61+
});
62+
}
63+
64+
function deleteNote(noteId) {
65+
let confirmDel = confirm("Are you sure you want to delete this note?");
66+
if(!confirmDel) return;
67+
notes.splice(noteId, 1);
68+
localStorage.setItem("notes", JSON.stringify(notes));
69+
showNotes();
70+
}
71+
72+
function updateNote(noteId, title, filterDesc) {
73+
let description = filterDesc.replaceAll('<br/>', '\r\n');
74+
updateId = noteId;
75+
isUpdate = true;
76+
addBox.click();
77+
titleTag.value = title;
78+
descTag.value = description;
79+
popupTitle.innerText = "Update a Note";
80+
addBtn.innerText = "Update Note";
81+
}
82+
83+
addBtn.addEventListener("click", e => {
84+
e.preventDefault();
85+
let title = titleTag.value.trim(),
86+
description = descTag.value.trim();
87+
88+
if(title || description) {
89+
let currentDate = new Date(),
90+
month = months[currentDate.getMonth()],
91+
day = currentDate.getDate(),
92+
year = currentDate.getFullYear();
93+
94+
let noteInfo = {title, description, date: `${month} ${day}, ${year}`}
95+
if(!isUpdate) {
96+
notes.push(noteInfo);
97+
} else {
98+
isUpdate = false;
99+
notes[updateId] = noteInfo;
100+
}
101+
localStorage.setItem("notes", JSON.stringify(notes));
102+
showNotes();
103+
closeIcon.click();
104+
}
105+
});

0 commit comments

Comments
 (0)