NotesApp/script.js at Portfolio · raggarwalg01/NotesApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

console.log( "Welcome to notes app. This is app.js" );
showNotes();

// If user adds a note, add it to the localStorage
let addBtn = document.getElementById( "addBtn" );
addBtn.addEventListener( "click", function ( e )
{
  let addTxt = document.getElementById( "addTxt" );
  let notes = localStorage.getItem( "notes" );
  if ( notes == null )
  {
    notesObj = [];
  } else
  {
    notesObj = JSON.parse( notes );
  }
  notesObj.push( addTxt.value );
  localStorage.setItem( "notes", JSON.stringify( notesObj ) );
  addTxt.value = "";
  //   console.log(notesObj);
  showNotes();
} );

// Function to show elements from localStorage
function showNotes ()
{
  let notes = localStorage.getItem( "notes" );
  if ( notes == null )
  {
    notesObj = [];
  } else
  {
    notesObj = JSON.parse( notes );
  }
  let html = "";
  notesObj.forEach( function ( element, index )
  {
    html += `
            <div class="noteCard my-2 mx-2 card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Note ${index + 1}</h5>
                        <p class="card-text"> ${element}</p>
                        <button id="${index}"onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</button>
                    </div>
                </div>`;
  } );
  let notesElm = document.getElementById( "notes" );
  if ( notesObj.length != 0 )
  {
    notesElm.innerHTML = html;
  } else
  {
    notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
  }
}

// Function to delete a note
function deleteNote ( index )
{
  //   console.log("I am deleting", index);

  let notes = localStorage.getItem( "notes" );
  if ( notes == null )
  {
    notesObj = [];
  } else
  {
    notesObj = JSON.parse( notes );
  }

  notesObj.splice( index, 1 );
  localStorage.setItem( "notes", JSON.stringify( notesObj ) );
  showNotes();
}


let search = document.getElementById( 'searchTxt' );
search.addEventListener( "input", function ()
{

  let inputVal = search.value.toLowerCase();
  // console.log('Input event fired!', inputVal);
  let noteCards = document.getElementsByClassName( 'noteCard' );
  Array.from( noteCards ).forEach( function ( element )
  {
    let cardTxt = element.getElementsByTagName( "p" )[ 0 ].innerText;
    if ( cardTxt.includes( inputVal ) )
    {
      element.style.display = "block";
    }
    else
    {
      element.style.display = "none";
    }
    // console.log(cardTxt);
  } )
} )

/*
Further Features:
1. Add Title
2. Mark a note as Important
3. Separate notes by user
4. Sync and host to web server
*/