-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
79 lines (67 loc) · 3.63 KB
/
main.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
// Create Note
// Creating the grid with notes
function addNewNote() {
let noteTitle = document.querySelector('#new-note-form input').value;
let noteDesc = document.querySelector('#new-note-form textarea').value;
let noteTags = document.querySelector('#new-note-form #tags').value;
const note = document.createElement('div');
note.classList.add('single-note');
note.innerHTML = `
<div class="note-icons">
<button class="btn edit-note"><input type="checkbox"><i class="far fa-edit"></i></button>
<button class="btn delete-note"><input type="checkbox"><i class="fas fa-trash"></i></button>
</div>
<input type="text" value="${noteTitle}">
<textarea rows="7">${noteDesc}</textarea>
<input type="text" id="tags" value="Tags: ${noteTags}">
<button class="save-changes submit btn btn-small" style="display: none;">Save Changes</button>`
init();
document.querySelector('#notes-area .notes').appendChild(note);
// Edit Note
const editNote = note.querySelector('.edit-note').addEventListener('click', () => {
note.querySelector('.single-note input[type="text"]').style = 'pointer-events: inherit;';
note.querySelector('.single-note textarea').style = 'pointer-events: inherit;';
note.querySelector('.single-note #tags').style = 'pointer-events: inherit;';
note.querySelector('.single-note .save-changes').style = 'display: block;';
})
const savesChanges = note.querySelector('.save-changes').addEventListener('click', () => {
note.querySelector('.single-note input[type="text"]').style = 'pointer-events: none;';
note.querySelector('.single-note textarea').style = 'pointer-events: none;';
note.querySelector('.single-note #tags').style = 'pointer-events: none;';
note.querySelector('.single-note .save-changes').style = 'display: none;';
})
// Delete Note
const deleteNote = note.querySelector('.delete-note').addEventListener('click', () => note.remove())
}
// Init form
function init() {
document.querySelector('#new-note-form input').value = '';
document.querySelector('#new-note-form textarea').value = '';
document.querySelector('#new-note-form #tags').value = '';
}
// Making the animation with form
const addNote = document.querySelector('.new-note').addEventListener('click', () => {
if(document.querySelector('#new-note-form div').style.margin == '0'){
document.querySelector('#new-note-form').style.maxHeight = '0';
document.querySelector('#new-note-form div').style.margin = '-300px';
} else {
document.querySelector('#new-note-form').style.maxHeight = '100%';
document.querySelector('#new-note-form div').style.margin = '0';
}
})
// Making the submit button
const submitNote = document.querySelector('#new-note-form .submit').addEventListener('click', () => {
document.querySelector('#new-note-form').style.maxHeight = '0';
document.querySelector('#new-note-form div').style.margin = '-300px';
addNewNote();
})
// List Button
const list = document.querySelector('.list-icon input').addEventListener('click', () => {
document.querySelector('#notes-area .notes').classList.add('list-view');
document.querySelector('#notes-area .notes').classList.remove('grid-view');
})
// Grid Button
const grid = document.querySelector('.grid-icon input').addEventListener('click', () => {
document.querySelector('#notes-area .notes').classList.add('grid-view');
document.querySelector('#notes-area .notes').classList.remove('list-view');
})