11// ****** SELECT ITEMS **********
2+ const alert = document . querySelector ( ".alert" ) ;
3+ const form = document . querySelector ( ".grocery-form" ) ;
4+ const grocery = document . getElementById ( "grocery" ) ;
5+ const submitBtn = document . querySelector ( ".submit-btn" ) ;
6+ const container = document . querySelector ( ".grocery-container" ) ;
7+ const list = document . querySelector ( ".grocery-list" ) ;
8+ const clearBtn = document . querySelector ( ".clear-btn" ) ;
9+
210
311// edit option
12+ let editElement ;
13+ let editFlag = false ;
14+ let editID = "" ;
415
516// ****** EVENT LISTENERS **********
17+ form . addEventListener ( 'submit' , addItem )
18+
19+ clearBtn . addEventListener ( 'click' , clearItems )
620
21+ window . addEventListener ( "DOMContentLoaded" , setupItems ) ;
722// ****** FUNCTIONS **********
23+ function addItem ( e ) {
24+ e . preventDefault ( ) ;
25+ const value = grocery . value ;
26+ const id = new Date ( ) . getTime ( ) . toString ( ) ;
27+ if ( value && ! editFlag ) {
28+ createListItem ( id , value ) ;
29+
30+
31+ displayAlert ( "item added to the list" , "success" ) ;
32+ container . classList . add ( "show-container" ) ;
33+ addToLocalStorage ( id , value ) ;
34+ setBackToDefault ( ) ;
35+ }
36+ else if ( value && editFlag ) {
37+ editElement . innerHTML = value ;
38+ displayAlert ( 'value changed' , 'success' ) ;
39+ //edit local storage
40+ editLocalStorage ( editID , value ) ;
41+ setBackToDefault ( ) ;
42+ }
43+ else {
44+ displayAlert ( "please enter value" , "danger" ) ;
45+ }
46+ }
47+ function displayAlert ( text , action ) {
48+ alert . textContent = text ;
49+ alert . classList . add ( `alert-${ action } ) ;
50+ setTimeout ( function ( ) {
51+ alert . textContent = "" ;
52+ alert . classList . remove ( `alert-${ action } ) ;
53+ } , 1000 ) ;
54+ }
55+
56+ function clearItems ( ) {
57+ const items = document . querySelectorAll ( '.grocery-item' ) ;
58+
59+ if ( items . length > 0 ) {
60+ items . forEach ( function ( item ) {
61+ list . removeChild ( item ) ;
62+ } ) ;
63+ }
64+ container . classList . remove ( "show-container" ) ;
65+ displayAlert ( "empty list" , "danger" ) ;
66+ setBackToDefault ( ) ;
67+ localStorage . removeItem ( 'list' ) ;
68+ }
69+ function deleteItem ( e ) {
70+ const element = e . currentTarget . parentElement . parentElement ;
71+ const id = element . dataset . id ;
72+ list . removeChild ( element ) ;
73+ if ( list . children . length === 0 ) {
74+ container . classList . remove ( "show-container" ) ;
75+ }
76+ displayAlert ( 'item removed' , 'danger' ) ;
77+ setBackToDefault ( ) ;
78+
79+ //remove from local storage
80+ //removeFromLocalStorage(id);
81+ }
82+ //edit function
83+ function editItem ( e ) {
84+ const element = e . currentTarget . parentElement . parentElement ;
85+ editElement = e . currentTarget . parentElement . previousElementSibling ;
86+ grocery . value = editElement . innerHTML ;
87+ editFlag = true ;
88+ editID = element . dataset . id ;
89+ submitBtn . textContent = "edit" ;
90+ }
891
92+ function setBackToDefault ( ) {
93+ grocery . value = "" ;
94+ editFlag = false ;
95+ editID = '' ;
96+ submitBtn . textContent = "submit" ;
97+ }
998// ****** LOCAL STORAGE **********
99+ function addToLocalStorage ( id , value ) {
100+ const grocery = { id, value} ;
101+ let items = getLocalStorage ( ) ;
102+ items . push ( grocery ) ;
103+ localStorage . setItem ( 'list' , JSON . stringify ( items ) ) ;
104+
105+ }
106+ function removeFromLocalStorage ( id ) {
107+ let items = getLocalStorage ( ) ;
108+
109+ items = items . filter ( function ( item ) {
110+ if ( item . id !== id ) {
111+ return item ;
112+ }
113+ } )
114+ localStorage . setItem ( 'list' , JSON . stringify ( items ) ) ;
115+
116+ }
117+ function editLocalStorage ( id , value ) {
118+ let items = getLocalStorage ( ) ;
119+ items = items . map ( function ( item ) {
120+ if ( item . id === id ) {
121+ item . value = value ;
122+ }
123+ return item ;
124+ } ) ;
125+ localStorage . setItem ( 'list' , JSON . stringify ( items ) ) ;
126+
127+ }
128+ function getLocalStorage ( ) {
129+ return localStorage . getItem ( "list" ) ?JSON . parse ( localStorage . getItem ( 'list' ) ) : [ ] ;
130+ }
131+ //localStorage API
132+ //setItem
133+ //getItem
134+ //removeItem
135+ //save as string
136+ //localStorage.setItem('orange', JSON.stringify(["item", //"item2"]));
137+ //const oranges = JSON.parse(localStorage.getItem("orange"));
138+ //console.log(oranges);
139+ //localStorage.removeItem('orange');
140+ // ****** SETUP ITEMS *********
141+ function setupItems ( ) {
142+ let items = getLocalStorage ( ) ;
143+ if ( items . length > 0 ) {
144+ items . forEach ( function ( item ) {
145+ createListItem ( item . id , item . value )
146+ } )
147+ container . classList . add ( 'show-container' ) ;
148+ }
149+ }
150+
151+ function createListItem ( id , value ) {
152+ const element = document . createElement ( 'article' ) ;
153+ element . classList . add ( 'grocery-item' ) ;
154+ const attr = document . createAttribute ( 'data-id' ) ;
155+ attr . value = id ;
156+ element . setAttributeNode ( attr ) ;
157+ element . innerHTML = ` <p class="title">${ value }
158+ <div class="btn-container">
159+ <button type="button" class="edit-btn">
160+ <i class="fas fa-edit"></i>
161+ </button>
162+ <button type="button" class="delete-btn">
163+ <i class="fas fa-trash"></i>
164+ </button>
165+ </div>` ;
10166
11- // ****** SETUP ITEMS **********
167+ const deleteBtn = element . querySelector ( ".delete-btn" ) ;
168+ const editBtn = element . querySelector ( ".edit-btn" ) ;
169+ deleteBtn . addEventListener ( 'click' , deleteItem ) ;
170+ editBtn . addEventListener ( 'click' , editItem ) ;
171+ list . appendChild ( element ) ;
172+ }
0 commit comments