Skip to content

Commit b3851e8

Browse files
thecodeholicthecodeholic
committed
Finish notes
1 parent 8fdede2 commit b3851e8

File tree

5 files changed

+162
-60
lines changed

5 files changed

+162
-60
lines changed

‎src/Note.js

Lines changed: 46 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,60 @@
11
export class NoteManager {
22
constructor({el, notes}) {
33
this.el = el;
4-
this.notes = notes.map(note => new Note(note));
4+
this.notesEl = null;
5+
this.notes = notes.map(note => new Note(note, this));
56

7+
this.onNoteChange = () => {};
8+
this.createNotesWrapper();
69
this.renderNotes();
710
}
811

912
addNote(note) {
10-
this.notes.push(note);
13+
this.notes.push(new Note(note, this));
14+
this.renderNotes();
15+
}
16+
17+
prependNote(note) {
18+
this.notes.unshift(new Note(note, this));
19+
this.renderNotes();
1120
}
1221

1322
removeNote(note) {
1423
this.notes.splice(this.notes.indexOf(note), 1);
24+
this.renderNotes();
25+
}
26+
27+
createNotesWrapper(){
28+
this.notesEl = document.createElement('div');
29+
this.notesEl.className = 'tc-notes';
30+
this.el.appendChild(this.notesEl);
1531
}
1632

1733
renderNotes() {
18-
this.el.innerHTML = '';
34+
this.notesEl.innerHTML = '';
1935
this.notes.forEach(note => this.renderNote(note));
2036
}
2137

2238
renderNote(note) {
23-
this.el.appendChild(note.getNoteEl())
39+
this.notesEl.appendChild(note.createNoteEl())
2440
}
2541
}
2642

2743
export class Note {
2844

29-
constructor({title, body}) {
45+
constructor({title, body}, noteManager) {
46+
this.el = null;
3047
this.title = title;
3148
this.body = body;
49+
this.noteManager = noteManager;
3250
}
3351

3452
static getNoteTpl() {
3553
return `
3654
<div class="tc-note">
3755
<div class="tc-note-header">
38-
<span>
39-
<i class="fas fa-plus"></i>
56+
<span class="tc-note-close">
57+
<i class="fas fa-times"></i>
4058
</span>
4159
</div>
4260
<div class="tc-note-title" contenteditable="">
@@ -48,14 +66,33 @@ export class Note {
4866
</div>`;
4967
}
5068

51-
getNoteEl() {
69+
createNoteEl() {
5270
let tpl = Note.getNoteTpl();
5371
tpl = tpl
5472
.replace('{{title}}', this.title)
5573
.replace('{{body}}', this.body)
5674
;
5775
const div = document.createElement('div');
5876
div.innerHTML = tpl;
59-
return div.children[0];
77+
this.el = div.children[0];
78+
this.attachEventListeners();
79+
return this.el;
80+
}
81+
82+
attachEventListeners(){
83+
const btnClose = this.el.querySelector('.tc-note-close');
84+
btnClose.onclick = () => {
85+
this.noteManager.removeNote(this);
86+
};
87+
const title = this.el.querySelector('.tc-note-title');
88+
title.oninput = (ev) => {
89+
this.title = ev.target.innerText;
90+
this.noteManager.onNoteChange(this);
91+
};
92+
const body = this.el.querySelector('.tc-note-body');
93+
body.oninput = (ev) => {
94+
this.body = ev.target.innerText;
95+
this.noteManager.onNoteChange(this);
96+
}
6097
}
6198
}

‎src/app.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,15 @@ const noteManager = new NoteManager({
2222
},
2323
]
2424
});
25+
26+
noteManager.onNoteChange = (note) => {
27+
console.log(note);
28+
};
29+
30+
const newNoteBtn = document.querySelector('.new-note-btn');
31+
newNoteBtn.onclick = () => {
32+
noteManager.prependNote({
33+
title: '',
34+
body: ''
35+
})
36+
};

‎src/index.html

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,13 @@
1313
</head>
1414

1515
<body>
16-
<div class="container wrapper">
17-
<div id="notesWrapper" class="tc-notes">
18-
</div>
16+
<div class="container wrapper">
17+
<div id="notesWrapper">
18+
<button class="new-note-btn">
19+
New Note
20+
</button>
1921
</div>
22+
</div>
2023
</body>
2124

2225
</html>

‎src/scss/app/main.scss

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +0,0 @@
1-
* {
2-
box-sizing: border-box;
3-
}
4-
5-
body {
6-
padding: 0;
7-
margin: 0;
8-
background-color: #e4e4e4;
9-
}
10-
11-
.tc-notes {
12-
padding: 50px;
13-
display: flex;
14-
justify-content: center;
15-
flex-wrap: wrap;
16-
margin: 0 auto;
17-
18-
.tc-note {
19-
font-family: 'Caveat', cursive;
20-
background-color: #f0c806;
21-
border-radius: 8px;
22-
width: 240px;
23-
margin: 0 10px 20px;
24-
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
25-
transition: all 0.5s;
26-
cursor: pointer;
27-
28-
.tc-note-title,
29-
.tc-note-body{
30-
outline: 0;
31-
}
32-
.tc-note-title {
33-
font-size: 24px;
34-
padding: 10px 16px;
35-
}
36-
37-
.tc-note-body {
38-
font-size: 20px;
39-
padding: 10px 16px;
40-
}
41-
42-
&:hover {
43-
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
44-
}
45-
}
46-
}

‎src/scss/style.scss

Lines changed: 98 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,99 @@
1-
// @import './vendor/bootstrap.scss';
2-
@import './app/main.scss';
1+
* {
2+
box-sizing: border-box;
3+
}
34

5+
body {
6+
padding: 0;
7+
margin: 0;
8+
background-color: #e4e4e4;
9+
}
10+
11+
#notesWrapper {
12+
padding: 50px;
13+
14+
.new-note-btn {
15+
width: 200px;
16+
display: block;
17+
margin: 0 auto 20px;
18+
background-color: #FFF;
19+
padding: 10px 32px;
20+
border: 1px solid #e0e0e0;
21+
font-size: 26px;
22+
outline: 0;
23+
transition: all 0.3s;
24+
cursor: pointer;
25+
font-family: 'Caveat', cursive;
26+
27+
&:hover {
28+
box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
29+
}
30+
&:active{
31+
position: relative;
32+
top: 1px;
33+
}
34+
}
35+
}
36+
37+
.tc-notes {
38+
display: flex;
39+
justify-content: center;
40+
flex-wrap: wrap;
41+
margin: 0 auto;
42+
43+
.tc-note {
44+
background-color: #f0c806;
45+
border-radius: 8px;
46+
width: 280px;
47+
margin: 0 10px 20px;
48+
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
49+
transition: all 0.5s;
50+
cursor: pointer;
51+
font-family: 'Caveat', cursive;
52+
53+
.tc-note-header {
54+
padding: 10px 16px 0;
55+
56+
.tc-note-add,
57+
.tc-note-close {
58+
display: inline-block;
59+
width: 24px;
60+
height: 24px;
61+
border-radius: 50%;
62+
line-height: 24px;
63+
text-align: center;
64+
transition: all 0.3s;
65+
66+
&:hover {
67+
background-color: rgba(0, 0, 0, 0.2);
68+
}
69+
70+
&:focus {
71+
box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.8);
72+
}
73+
}
74+
75+
.tc-note-close {
76+
float: right;
77+
}
78+
}
79+
80+
.tc-note-title,
81+
.tc-note-body {
82+
outline: 0;
83+
}
84+
85+
.tc-note-title {
86+
font-size: 24px;
87+
padding: 10px 16px;
88+
}
89+
90+
.tc-note-body {
91+
font-size: 20px;
92+
padding: 10px 16px 16px;
93+
}
94+
95+
&:hover {
96+
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
97+
}
98+
}
99+
}

0 commit comments

Comments
 (0)