Skip to content

Commit 4082954

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #720 from Swap-nil-2003/main
Added a Notes App
2 parents a7c0b95 + 10081f6 commit 4082954

6 files changed

Lines changed: 519 additions & 0 deletions

File tree

‎Projects/Notes App/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# SmartNotezz-WebApp
2+
SmartNotezz is a web based notes making and editing app. It enables users to keep track of their tasks and other to-do lists. The notes are stored into the local storage so that users need not worry about losing their data on exiting the page. By default, the notes are stored from most recent to oldest. A search option is made available to users for searching the title and locating their notes to avoid the hassle of scrolling down or up looking for a note.
3+
4+
# Technologies Used
5+
* HTML5
6+
* CSS3
7+
* CSS Animations
8+
* CSS Media Queries
9+
* Javascript
10+
* Netlify

‎Projects/Notes App/assets/S.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/Notes App/assets/add.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Projects/Notes App/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<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="stylesheet" href="style.css">
8+
<title>SmartNotezz</title>
9+
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
10+
</head>
11+
<body>
12+
<header>
13+
<div class="title">
14+
SmartNotezz
15+
</div>
16+
<img src="assets/S.svg" href="/">
17+
</header>
18+
<nav>
19+
<form class="form">
20+
<input type="search" id="searchTxt"class="search" placeholder="Search your Notes">
21+
<button class="btn" type="submit"><i class="uil uil-search"></i></button>
22+
</form>
23+
</nav>
24+
<div class="your-notes">
25+
Your Notes
26+
</div>
27+
<div class="popup-box">
28+
<div class="popup">
29+
<div class="content">
30+
<header>
31+
<p>Add a New Note</p>
32+
<i class="ui uil-times"></i>
33+
</header>
34+
<form action="#">
35+
<div class="row-title">
36+
<label>Title</label>
37+
<input type="text">
38+
</div>
39+
<div class="row-description">
40+
<label>Description</label>
41+
<textarea></textarea>
42+
</div>
43+
<button>Add Note</button>
44+
<input type="file" id="file">
45+
</form>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="wrapper">
50+
<li class="add-box">
51+
<div class="icon">
52+
<img src="assets/add.svg" alt="Add">
53+
</div>
54+
<p>Add New Note</p>
55+
</li>
56+
</div>
57+
<script src="script.js"></script>
58+
</body>
59+
</html>

‎Projects/Notes App/script.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
const addBox = document.querySelector(".add-box"),
2+
popupBox = document.querySelector(".popup-box"),
3+
search = document.getElementById('searchTxt'),
4+
popupTitle = popupBox.querySelector("header p"),
5+
titleTag = popupBox.querySelector("input"),
6+
closeIcon = popupBox.querySelector("header i"),
7+
descTag = popupBox.querySelector("textarea"),
8+
addBtn = popupBox.querySelectorAll("button");
9+
10+
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
11+
12+
const notes = JSON.parse(localStorage.getItem("notes") || "[]");
13+
let isUpdate = false, updateId;
14+
15+
addBox.addEventListener("click", () => {
16+
titleTag.focus();
17+
popupBox.classList.add("show");
18+
})
19+
closeIcon.addEventListener("click", () => {
20+
isUpdate=false;
21+
titleTag.value="";
22+
descTag.value="";
23+
addBtn[0].innerText="Add Note";
24+
popupTitle.innerText="Add a New Note";
25+
popupBox.classList.remove("show");
26+
})
27+
28+
function showNote() {
29+
document.querySelectorAll(".note").forEach(note =>note.remove());
30+
notes.forEach((note, index) => {
31+
liTag = `<li class="note">
32+
<div class="details">
33+
<p>${note.title}</p>
34+
<span>${note.description}</span>
35+
</div>
36+
<div class="bottom-content">
37+
<span>${note.date}</span>
38+
<div class="settings">
39+
<i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
40+
<ul class="menu">
41+
<li onclick="updateNote(${index},'${note.title}','${note.description}')"> <i class="uil uil-pen"></i>Edit</li>
42+
<li onclick="deleteNote(${index})"> <i class="uil uil-trash"></i>Delete</li>
43+
</ul>
44+
</div>
45+
</div>
46+
</li>`
47+
addBox.insertAdjacentHTML("afterend", liTag);
48+
});
49+
}
50+
showNote();
51+
52+
function showMenu(elem){
53+
elem.parentElement.classList.add("show");
54+
document.addEventListener("click",e =>{
55+
56+
if(e.target.tagName != "I" || e.target != elem){
57+
elem.parentElement.classList.remove("show");
58+
}
59+
})
60+
}
61+
function deleteNote(noteId){
62+
let confirmDel= confirm("Are you sure you want to delete this note?");
63+
if(!confirmDel) return;
64+
notes.splice(noteId,1); //deletes one note of given id
65+
localStorage.setItem("notes", JSON.stringify(notes));//saving updated notes to local storage
66+
showNote();
67+
}
68+
69+
function updateNote(noteId,title,desc){
70+
isUpdate=true;
71+
updateId = noteId;
72+
addBox.click();
73+
titleTag.value=title;
74+
descTag.value=desc;
75+
addBtn[0].innerText="Update Note";
76+
popupTitle.innerText="Update a Note";
77+
console.log(noteId,title,desc);
78+
}
79+
80+
for (var i = 0; i < addBtn.length; i++) {
81+
addBtn[i].addEventListener("click", e => {
82+
e.preventDefault();
83+
}
84+
)}
85+
addBtn[0].addEventListener("click", e => {
86+
let noteTitle = titleTag.value.toUpperCase(),
87+
noteDesc = descTag.value;
88+
89+
if (noteTitle || noteDesc) {
90+
let dateObj = new Date(),
91+
day = dateObj.getDate(),
92+
month = months[dateObj.getMonth()],
93+
year = dateObj.getFullYear();
94+
95+
let noteInfo = {
96+
title: noteTitle, description: noteDesc,
97+
date: `${month} ${day}, ${year}`
98+
}
99+
if(! isUpdate){
100+
notes.push(noteInfo); //adding new notes
101+
}
102+
else{
103+
isUpdate=false;
104+
notes[updateId]=noteInfo;
105+
}
106+
localStorage.setItem("notes", JSON.stringify(notes));//saving notes to local storage
107+
closeIcon.click();
108+
showNote();
109+
}
110+
})
111+
112+
search.addEventListener("input",function(){
113+
114+
let inputVal = search.value.toUpperCase();
115+
let noteCard = document.getElementsByClassName('note');
116+
Array.from(noteCard).forEach(function(element){
117+
let cardTxt = element.getElementsByTagName("p")[0].innerText; //searching by title
118+
if(cardTxt.includes(inputVal)){
119+
element.style.display = "block";
120+
}
121+
else{
122+
element.style.display = "none";
123+
}
124+
//console.log(cardTxt);
125+
126+
})
127+
})

0 commit comments

Comments
 (0)