-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
80 lines (69 loc) · 2.54 KB
/
script.js
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
let text_input = document.getElementById("text_input");
let Add_Note = document.getElementById("add_note");
const text = text_input.value;
// CREATE NEW NOTE
Add_Note.addEventListener("click", (e) => {
if (text_input.value !== "") {
const field_notes = document.getElementById("all_notes");
// create new note item
const new_note = document.createElement("div");
new_note.classList.add("new_note_style");
// make short variant of text
const full_text = text_input.value;
let short_text = full_text.substr(0, 10);
// create text field in new note
const note_text = document.createElement("h3");
note_text.classList.add("text_inside");
note_text.innerHTML = short_text;
// create checkbox in note
const check_box = document.createElement("input");
check_box.type = "checkbox";
check_box.classList.add("checkbox");
// create button "view detail"
const view_detail = document.createElement("button");
view_detail.innerHTML = "View Detail";
view_detail.classList.add("button");
// create button "remove"
const remove_note = document.createElement("button");
remove_note.innerHTML = "Delete";
remove_note.classList.add("button_delete");
// create note with all components
field_notes.appendChild(new_note);
new_note.appendChild(note_text);
new_note.appendChild(view_detail);
new_note.appendChild(remove_note);
new_note.appendChild(check_box);
text_input.value = "";
// create button to turn off view details mode
const but_rem = document.createElement("button");
but_rem.innerHTML = "x";
but_rem.classList.add("but_rem");
//open full text
view_detail.addEventListener("click", function (e) {
e.preventDefault();
new_note.removeChild(view_detail);
new_note.removeChild(remove_note);
new_note.removeChild(check_box);
note_text.innerHTML = full_text;
new_note.appendChild(but_rem);
new_note.classList.add("active");
});
// close full text
but_rem.addEventListener("click", () => {
new_note.classList.remove("active");
note_text.innerHTML = short_text;
new_note.appendChild(view_detail);
new_note.appendChild(remove_note);
new_note.appendChild(check_box);
new_note.removeChild(but_rem);
});
//open full text
remove_note.addEventListener("click", function (e) {
e.preventDefault();
field_notes.removeChild(new_note);
});
} else {
text.classList.add("text_inside2");
text_input.placeholder = "Please write something";
}
});