Insta-Notes/function.js at master · titli9830/Insta-Notes · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
let a = [];


// Retrieving data on page load:
function onPageLoad() {
  let text1 = window.localStorage.getItem("testJSON1");
  let varStringToJSON = JSON.parse(text1);

  console.log(text1);
  if (varStringToJSON && varStringToJSON.length) {
    a = varStringToJSON;
  } else {
    // a = [];
  }

  let varResultHTML = convertToHTML(a);
  getElement("d1").innerHTML = varResultHTML;

}

// On clicks anywhere outside of the modal, close it
function onClickOutsideModal() {

  window.onclick = function (event) {
    if (event.target == getElement("dm")) {

      //clear input box
      getElement("im1").value = "";
      getElement("im2").value = "";

      //close modal
      getElement("dm").style.display = "none";
    }
  }
}

//storing data
function storeDataInLocalStorage() {
  let varJSONtoString = JSON.stringify(a);
  window.localStorage.setItem("testJSON1", varJSONtoString);
}

function getNoteTitleHtmlString(title) {
  return "<div class='Note-Title'>" + title + "</div>"
}

function getNoteDescHtmlString(desc) {
  return "<textarea class='Note-Description' contenteditable>" + desc + "</textarea>";
}

function deleteNoteHtmlString(index) {
  return "<button id='btnDeleteNote-" + index + "' class='btnDeleteNote' onclick='onClickDeleteNote()'><i class='fas fa-trash-alt'></i> Remove</button>";
}

function editNoteHtmlString(index) {
  return "<button id='btnSaveNote-" + index + "' class='btnEditNote' onclick='onClickSaveNote()'><i class='fas fa-redo-alt'></i> Save</button>";
}


function getNoteHtmlString(title, desc, index) {
  let noteHtmlString = "<div id='note-" + index + "' class='Note'>" + getNoteTitleHtmlString(title) + getNoteDescHtmlString(desc) + "<div class=noteDeleteEdit>" + deleteNoteHtmlString(index) + editNoteHtmlString(index) + "</div></div>";
  return noteHtmlString;
}


function onClickDeleteNote() {
  let selectedDeleteNoteID = event.target.id;
  let index = selectedDeleteNoteID.substring(14);
  console.log(a);
  a.splice(index, 1);
  console.log(index)
  console.log(a);

  //refresh page and reconstruct HTML with new array after delete
  let n = convertToHTML(a);
  getElement("d1").innerHTML = n;
  storeDataInLocalStorage();
}

function onClickSaveNote() {
  let selectedSaveNoteID = event.target.id;
  let index = selectedSaveNoteID.substring(12);
  let parentDivID = 'note-' + index;
  console.log(a[index]);
  let newDescription = document.querySelector('#' + parentDivID + ' .Note-Description').innerText;
  console.log(newDescription);
  a[index].description = newDescription;

  //refresh page and reconstruct HTML with new array after delete
  let n = convertToHTML(a);
  getElement("d1").innerHTML = n;
  storeDataInLocalStorage();
}


//create the Notes in HTML
function convertToHTML(arr) {
  let text;
  text = "<div class='Notes'>";
  arr.forEach((value, index) => {
    text += getNoteHtmlString(value.title, value.description, index)
  });

  text += "</div>";
  text += "<br>";
  return text;
}

//Create Notes by mapping Input from Modal
function createNote() {
  var text;
  let varInputTitle = getElement("im1").value;
  let varInputDescription = getElement("im2").value;
  console.log(varInputTitle);


  a.push({
    title: varInputTitle,
    description: varInputDescription
  })
  let htmlresult = convertToHTML(a);
  getElement("d1").innerHTML = htmlresult;

  storeDataInLocalStorage();

  //reset Input box
  getElement("im1").value = "";
  getElement("im2").value = "";
  getElement("dm").style.display = "none";
}

//Reusable "document.getElementByID" function
function getElement(xxx) {
  return document.getElementById(xxx);
}
//Open MODAL(Input Box)
function inputNewNote() {
  getElement("dm").style.display = "Flex";
  //getElementByTagName("BODY").style.filter="blur(8px)" ;
  //getElementByTagName("BODY").style.-webkit-filter="blur(8px)" ;
}

//Click on close button to close the MODAL(Input Box)
function closeModal() {
  //clear input box
  getElement("im1").value = "";
  getElement("im2").value = "";
  //close modal
  getElement("dm").style.display = "none";

}


onPageLoad();
onClickOutsideModal();