Notes-App/script.js at main · GenXclub/Notes-App · 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
showNotes();
let addNoteButton= document.getElementById("add-note");
addNoteButton.addEventListener('click', function(e){
    e.preventDefault();
    let notes;
    let titles;
    if(localStorage.getItem("notes")== null){
        notes= [];
        titles= [];
    }
    else{
        notes= JSON.parse(localStorage.getItem('notes'));
        titles= JSON.parse(localStorage.getItem("titles"));
    }
    let newNote= document.getElementById("note").value;
    notes.push(newNote);
    let newTitle= document.getElementById('title').value;
    titles.push(newTitle);
    localStorage.setItem('notes', JSON.stringify(notes));
    localStorage.setItem("titles", JSON.stringify(titles));
    showNotes();
});

function showNotes(){
    let titles;
    let notes;
    let html= '';
    if(localStorage.getItem('notes')== null){
        notes= [];
        titles= [];
        html= '<h1 id= "no-notes-yet-title">No Notes yet</h1>';
    }
    else{
        notes= JSON.parse(localStorage.getItem('notes'));
        titles= JSON.parse(localStorage.getItem('titles'));
        notes.forEach(function(element, index){
            html+= `
                <div class= 'card note' style= 'display: block; margin: auto; width: 18rem; margin-bottom: 5px;'>
                    <div class= "card-body">
                        <h2 id= 'title-${index}' class= "titles"></h2>
                        <p>${element}</p>
                        <br>
                        <button id= "${index}" class= "btn btn-dark" onclick= "deleteNote(this.id)">Delete Note</button>
                    </div>
                </div>
            `;
        });

        document.querySelector('.notes').innerHTML= html;
        titles.forEach(function(element, index){
            document.querySelector(`#title-${index}`).innerText= element;
        });
    }
}

function deleteNote(index){
    let notes;
    let titles;
    if(localStorage.getItem('notes')== null){
        notes= [];
        titles= [];
    }
    else{
        notes= JSON.parse(localStorage.getItem('notes'));
        titles= JSON.parse(localStorage.getItem('titles'));
    }
    notes.splice(index, 1);
    titles.splice(index, 1);
    localStorage.setItem("notes", JSON.stringify(notes));
    localStorage.setItem('titles', JSON.stringify(notes));
    showNotes();
}


let searchButton= document.getElementById("search");
searchButton.addEventListener("click", function(e){
    e.preventDefault();
    let query= document.getElementById("search-query").value.toLowerCase();
    if(query!= ''){
        let titles= document.getElementsByClassName('titles');
        Array.from(titles).forEach(function(element){
            title= element.innerText.toLowerCase();
            if(title.includes(query)){
                element.parentElement.parentElement.style.display= 'block';
            }
            else{
                element.parentElement.parentElement.style.display= 'none';
            }
        });
    }
    else{
        alert("Enter A Query TO Search");
    }
});