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 notesContainer = document . getElementById ( "notesContainer" ) ;
13+
14+ const notes = JSON . parse ( localStorage . getItem ( "notes" ) || "[]" ) ;
15+ let isUpdate = false , updateId ;
16+
17+ addBox . addEventListener ( "click" , ( ) => {
18+ titleTag . focus ( ) ;
19+ popupBox . classList . add ( "show" ) ;
20+ } )
21+ closeIcon . addEventListener ( "click" , ( ) => {
22+ isUpdate = false ;
23+ titleTag . value = "" ;
24+ descTag . value = "" ;
25+ addBtn [ 0 ] . innerText = "Add Note" ;
26+ popupTitle . innerText = "Add a New Note" ;
27+ popupBox . classList . remove ( "show" ) ;
28+ } )
29+
30+ function showNote ( ) {
31+
32+ notesContainer . innerHTML = "" ;
33+ document . querySelectorAll ( ".note" ) . forEach ( note => note . remove ( ) ) ;
34+ notes . forEach ( ( note , index ) => {
35+ const liClass = note . isImportant ? "note starred" : "note" ;
36+
37+ const liTag = `<li class="${ liClass } ${ note . isImportant ? 'gold' : '' } ${ note . isImportant ? 'black' : 'white' }
38+ <div class="details">
39+ <p>${ note . title }
40+ <span>${ note . description }
41+ </div>
42+ <div class="bottom-content">
43+ <span>${ note . date }
44+ <div class="settings">
45+ <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
46+ <ul class="menu">
47+ <li onclick="updateNote(${ index } ${ note . title } ${ note . description }
48+ <li onclick="deleteNote(${ index }
49+ <li onclick="importantNote(${ index } ${ note . isImportant ? '-break' : '' } ${ note . isImportant ? 'Unstar' : 'Star' }
50+ </ul>
51+ </div>
52+ </div>
53+ </li>` ;
54+ addBox . insertAdjacentHTML ( "afterend" , liTag ) ;
55+ } ) ;
56+ }
57+ showNote ( ) ;
58+
59+ function showMenu ( elem ) {
60+ elem . parentElement . classList . add ( "show" ) ;
61+ document . addEventListener ( "click" , e => {
62+
63+ if ( e . target . tagName != "I" || e . target != elem ) {
64+ elem . parentElement . classList . remove ( "show" ) ;
65+ }
66+ } )
67+ }
68+ function deleteNote ( noteId ) {
69+ let confirmDel = confirm ( "Are you sure you want to delete this note?" ) ;
70+ if ( ! confirmDel ) return ;
71+ notes . splice ( noteId , 1 ) ; //deletes one note of given id
72+ localStorage . setItem ( "notes" , JSON . stringify ( notes ) ) ; //saving updated notes to local storage
73+ showNote ( ) ;
74+ }
75+
76+ function updateNote ( noteId , title , desc ) {
77+ isUpdate = true ;
78+ updateId = noteId ;
79+ addBox . click ( ) ;
80+ titleTag . value = title ;
81+ descTag . value = desc ;
82+ addBtn [ 0 ] . innerText = "Update Note" ;
83+ popupTitle . innerText = "Update a Note" ;
84+ console . log ( noteId , title , desc ) ;
85+ }
86+
87+ function importantNote ( noteId ) {
88+ notes [ noteId ] . isImportant = ! notes [ noteId ] . isImportant ;
89+ renderNotes ( ) ;
90+ }
91+
92+ function renderNotes ( ) {
93+ notesContainer . innerHTML = "" ;
94+ document . querySelectorAll ( ".note" ) . forEach ( note => note . remove ( ) ) ;
95+ notes . forEach ( ( note , index ) => {
96+ const liClass = note . isImportant ? "note starred" : "note" ;
97+
98+ const liTag = `<li class="${ liClass } ${ note . isImportant ? 'gold' : '' }
99+ <div class="details">
100+ <p>${ note . title }
101+ <span>${ note . description }
102+ </div>
103+ <div class="bottom-content">
104+ <span>${ note . date }
105+ <div class="settings">
106+ <i onclick="showMenu(this)" class="uil uil-ellipsis-h"></i>
107+ <ul class="menu">
108+ <li onclick="updateNote(${ index } ${ note . title } ${ note . description }
109+ <li onclick="deleteNote(${ index }
110+ <li onclick="importantNote(${ index } ${ note . isImportant ? '-break' : '' } ${ note . isImportant ? 'Unstar' : 'Star' }
111+ </ul>
112+ </div>
113+ </div>
114+ </li>` ;
115+ addBox . insertAdjacentHTML ( "afterend" , liTag ) ;
116+ } ) ;
117+ }
118+
119+ for ( var i = 0 ; i < addBtn . length ; i ++ ) {
120+ addBtn [ i ] . addEventListener ( "click" , e => {
121+ e . preventDefault ( ) ;
122+ }
123+ ) }
124+ addBtn [ 0 ] . addEventListener ( "click" , e => {
125+ let noteTitle = titleTag . value . toUpperCase ( ) ,
126+ noteDesc = descTag . value ;
127+
128+ if ( noteTitle || noteDesc ) {
129+ let dateObj = new Date ( ) ,
130+ day = dateObj . getDate ( ) ,
131+ month = months [ dateObj . getMonth ( ) ] ,
132+ year = dateObj . getFullYear ( ) ;
133+
134+ let noteInfo = {
135+ title : noteTitle , description : noteDesc ,
136+ date : `${ month } ${ day } ${ year }
137+ }
138+ if ( ! isUpdate ) {
139+ notes . push ( noteInfo ) ; //adding new notes
140+ }
141+ else {
142+ isUpdate = false ;
143+ notes [ updateId ] = noteInfo ;
144+ }
145+ localStorage . setItem ( "notes" , JSON . stringify ( notes ) ) ; //saving notes to local storage
146+ closeIcon . click ( ) ;
147+ showNote ( ) ;
148+ }
149+ } )
150+
151+ search . addEventListener ( "input" , function ( ) {
152+
153+ let inputVal = search . value . toUpperCase ( ) ;
154+ let noteCard = document . getElementsByClassName ( 'note' ) ;
155+ Array . from ( noteCard ) . forEach ( function ( element ) {
156+ let cardTxt = element . getElementsByTagName ( "p" ) [ 0 ] . innerText ; //searching by title
157+ if ( cardTxt . includes ( inputVal ) ) {
158+ element . style . display = "block" ;
159+ }
160+ else {
161+ element . style . display = "none" ;
162+ }
163+ //console.log(cardTxt);
164+
165+ } )
166+ } )
167+
168+ showNote ( ) ;
169+ renderNotes ( ) ;
0 commit comments