Note-App-in-javascript/app.js at main · asawaronit60/Note-App-in-javascript · 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
var addbtn = document.getElementById("add_btn");

addbtn.addEventListener("click", function () {

var addtext = document.getElementById("new_note");

var notes = localStorage.getItem("notes");

  if (notes == null) {

    var  notesobj = [];
  }
  else {

    notesobj = JSON.parse(notes);

  }

  notesobj.push(addtext.value);

  localStorage.setItem("notes", JSON.stringify(notesobj));
  addtext.value = "";
  console.log(notesobj);

showNotes();

});// add btn

//function to display note
 function showNotes() {

  var html = " ";
  let notes = localStorage.getItem("notes");
  if (notes == null) {

    notesobj = [];

  }
  else {
    notesobj = JSON.parse(notes);
  }

  notesobj.forEach(function (element, index) {

html+= '<div class="note_card" id = "fordel"><div ><h5 class="note_title">'+"Note " + (index +1) +'</h5><p class="card_text">'+ element+' </p><button class="btn btn-danger mt-3" id= '+(index)+' onClick = "deleteNote(this.id)" style = "margin:110px 0px 5px 0px;">Delete Note</button></div></div> ';

 });

  if (notesobj.length != 0){
   document.getElementById("notes").innerHTML = html;
  }
 else if(notesobj===""){
    console.log("please type a note ") ;
  }
}

//function to delete a note
function deleteNote(index){

console.log("i am deleting " + index);
var notes = localStorage.getItem("notes");

if (notes == null) {

  var  notesobj = [];

}
else {

notesobj = JSON.parse(notes);
}
notesobj.splice(index,1);
if(index == 0){
  document.getElementById("notes").innerHTML= "";
}
localStorage.setItem("notes", JSON.stringify(notesobj));

showNotes();
}


$("textarea").on("mouseenter",function(){

  $("textarea").addClass("text_hover");
})

$("textarea").on("mouseleave",function(){

  $("textarea").removeClass("text_hover");

})

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

  let input_val = search.value;

  let notecard =  document.getElementsByClassName("note_card");

  Array.from(notecard).forEach(function(element){

    let cardTxt = element.getElementsByTagName("p")[0].innerText;

    if(cardTxt.includes(input_val)){
      element.style.display = "inline-block";
    }else{
      element.style.display = "none";
    }

 })

  console.log("event fired" ,input_val);
});

function deleteAll(){
 console.log(localStorage.clear());
  document.getElementById("notes").style.display = "none";
  location.reload();


}