1. const addBox = document.querySelector("add-box");
2. const popUpBox = document.querySelector(".popup-box");
3. const closeIcon = document.querySelector("header i");
4. const titleTag = document.querySelector("input");
5. const descTag = document.querySelector("textarea");
6. const addBtn = popUpBox.querySelector("button");
7. const popupTitle = document.querySelector("header p");
8. const wrapper = document.querySelector(".wrapper");
9. const note =document.querySelector(".note");
10.  
11. const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
12.  
13. let isUpdate = false;
14. let UpdateId;
15.  
16. addBox.addEventListener("click", function(){
17.     titleTag.focus();
18.     popUpBox.classList.add("show");
19. });
20.  
21. closeIcon.addEventListener("click", ()=>{
22.     popUpBox.classList.remove("show");
23. });
24.  
25. addBtn.addEventListener("click", (e) => {
26.     e.preventDefault();
27.     let noteTitle = titleTag.value;
28.     let noteDesc = descTag.value;
29.     if (noteTitle || noteDesc){
30.         let dateObj = new Date();
31.         let hours = dateObj.getHours();
32.         let minutes = dateObj.getMinutes();
33.         let month = months[dateObj.getMonth()];
34.         let day = dateObj.getDate();
35.         let year = dateObj.getFullYear();
36.  
37.         let notesData = {
38.             id: `notes-${Date.now()}`,
39.             title: noteTitle,
40.             body: noteDesc,
41.             createdAt: `${hours}:${minutes} ${month} ${day} ${year}`
42.         };  
43.         if(!isUpdate){
44.             notes.push(notesData);
45.         } else {
46.             isUpdate = false;
47.             notes[UpdateId] = notesData;
48.         }
49.         localStorage.setItem("notes", JSON.stringify(notes));
50.         closeIcon.click();
51.         showNotes();
52.     }
53. });
54.  
55.  
56. if (localStorage.getItem("notes") === null) {
57.     localStorage.setItem("notes", JSON.stringify(dummyNotes))
58.   }
59.  
60. const notes = JSON.parse(localStorage.getItem("notes"));
61.  
62.  
63. function showNotes(filteredNotes = notes) {
64.     document.querySelectorAll(".note").forEach(note => note.remove());
65.     filteredNotes.forEach((note, index) => {
66.         let liTag = `  
67.         <li class="note">
68.             <div class="details">
69.                 <p>${note.title}</p>
70.                 <span>${note.body}</span>
71.             </div>
72.             <div class="bottom-content">
73.                 <span>${note.createdAt}</span>
74.                 <div class="settings">
75.                     <i  class="uil uil-ellipsis-h"></i>
76.                     <ul class="menu">
77.                         <li  '${note.title}', '${note.body}')"><i class="uil uil-pen"></i>Edit</li>
78.                         <li ><i class="uil uil-trash"></i>Delete</li>
79.                     </ul>
80.                 </div>
81.             </div>
82.         </li>`;
83.         addBox.insertAdjacentHTML("afterend", liTag);
84.     });
85. }
86.  
87. showNotes();
88.  
89.  
90. closeIcon.addEventListener("click", ()=>{
91.     titleTag.value = "";
92.     descTag.value = "";
93. });
94.  
95. window.showMenu = function(elem) {
96.     elem.parentElement.classList.add("show");
97.     document.addEventListener("click", e =>{
98.         if(e.target.tagName != "I" || e.target != elem){
99.             elem.parentElement.classList.remove("show");
100.         }
101.     });
102. }
103.  
104. window.updateNote = function(noteId, title, desc) {
105.     isUpdate = true;
106.     UpdateId = noteId;
107.     addBox.click();
108.     titleTag.value = title;
109.     descTag.value = desc;
110.     addBtn.innerText = "Update Note";
111.     popupTitle.innerText = "Update a Note";
112. }
113.  
114. window.deleteNote = function(noteId) {
115.     let confirmDel = confirm("Are you sure you want to delete this item?");
116.     if (!confirmDel) return;
117.  
118.     notes.splice(noteId, 1);
119.     localStorage.setItem("notes", JSON.stringify(notes));
120.     showNotes();
121. }