Skip to content

Commit 312e921

Browse files
dustinuseydustinusey
committed
note functionality (hardcoded)
1 parent ced09ca commit 312e921

File tree

5 files changed

+175
-2
lines changed

5 files changed

+175
-2
lines changed

‎frontend/dist/scripts/app.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -889,13 +889,67 @@ const noteForm_title = document.querySelector('form.new-note-form #title');
889889
const noteForm_author = document.querySelector('form.new-note-form #author');
890890
const noteForm_contents = document.querySelector('form.new-note-form #noteContents');
891891

892+
const noteContainer = document.querySelector('[data-notes-container]');
893+
892894
initNewNoteBtn.addEventListener('click', () => {
893895
newNoteForm.classList.add('show');
894896
initNewNoteBtn.style.display = 'none';
895897
});
896898

899+
noteContainer.addEventListener('click', e => {
900+
if (e.target.classList.contains('fa-xmark')) {
901+
e.target.parentNode.remove();
902+
}
903+
})
904+
897905
newNoteForm.addEventListener('submit', e => {
898906
e.preventDefault();
907+
908+
let today = new Date();
909+
const yyyy = today.getFullYear();
910+
let mm = today.getMonth() + 1;
911+
let dd = today.getDate();
912+
913+
if (dd < 10) dd = '0' + dd;
914+
if (mm < 10) mm = '0' + mm;
915+
916+
today = mm + '/' + dd + '/' + yyyy;
917+
918+
let title = noteForm_title.value;
919+
let author = noteForm_author.value;
920+
let text = noteForm_contents.value;
921+
922+
let li = document.createElement('li');
923+
let icon = document.createElement('i');
924+
icon.classList = 'fa-solid fa-xmark';
925+
let noteTitle = document.createElement('p');
926+
noteTitle.classList = 'note-title';
927+
noteTitle.textContent = title;
928+
let note = document.createElement('p');
929+
note.classList = 'note';
930+
note.textContent = text;
931+
let noteInfo = document.createElement('p');
932+
noteInfo.classList = 'note-info';
933+
let authorSpan = document.createElement('span');
934+
authorSpan.textContent = author;
935+
let noteDateSpan = document.createElement('span');
936+
noteDateSpan.textContent = today;
937+
938+
noteInfo.innerHTML = `-${authorSpan.innerHTML} on ${noteDateSpan.innerHTML}`
939+
940+
li.appendChild(icon);
941+
li.appendChild(noteTitle);
942+
li.appendChild(note);
943+
li.appendChild(noteInfo);
944+
945+
noteContainer.appendChild(li);
946+
947+
noteForm_title.value = '';
948+
noteForm_author.value = '';
949+
noteForm_contents.value = '';
950+
newNoteForm.classList.remove('show');
951+
initNewNoteBtn.style.display = 'block';
952+
899953
});
900954

901955
cancelNewNoteBtn.addEventListener('click', () => {

‎frontend/dist/styles/app.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/scripts/app.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -889,13 +889,67 @@ const noteForm_title = document.querySelector('form.new-note-form #title');
889889
const noteForm_author = document.querySelector('form.new-note-form #author');
890890
const noteForm_contents = document.querySelector('form.new-note-form #noteContents');
891891

892+
const noteContainer = document.querySelector('[data-notes-container]');
893+
892894
initNewNoteBtn.addEventListener('click', () => {
893895
newNoteForm.classList.add('show');
894896
initNewNoteBtn.style.display = 'none';
895897
});
896898

899+
noteContainer.addEventListener('click', e => {
900+
if (e.target.classList.contains('fa-xmark')) {
901+
e.target.parentNode.remove();
902+
}
903+
})
904+
897905
newNoteForm.addEventListener('submit', e => {
898906
e.preventDefault();
907+
908+
let today = new Date();
909+
const yyyy = today.getFullYear();
910+
let mm = today.getMonth() + 1;
911+
let dd = today.getDate();
912+
913+
if (dd < 10) dd = '0' + dd;
914+
if (mm < 10) mm = '0' + mm;
915+
916+
today = mm + '/' + dd + '/' + yyyy;
917+
918+
let title = noteForm_title.value;
919+
let author = noteForm_author.value;
920+
let text = noteForm_contents.value;
921+
922+
let li = document.createElement('li');
923+
let icon = document.createElement('i');
924+
icon.classList = 'fa-solid fa-xmark';
925+
let noteTitle = document.createElement('p');
926+
noteTitle.classList = 'note-title';
927+
noteTitle.textContent = title;
928+
let note = document.createElement('p');
929+
note.classList = 'note';
930+
note.textContent = text;
931+
let noteInfo = document.createElement('p');
932+
noteInfo.classList = 'note-info';
933+
let authorSpan = document.createElement('span');
934+
authorSpan.textContent = author;
935+
let noteDateSpan = document.createElement('span');
936+
noteDateSpan.textContent = today;
937+
938+
noteInfo.innerHTML = `-${authorSpan.innerHTML} on ${noteDateSpan.innerHTML}`
939+
940+
li.appendChild(icon);
941+
li.appendChild(noteTitle);
942+
li.appendChild(note);
943+
li.appendChild(noteInfo);
944+
945+
noteContainer.appendChild(li);
946+
947+
noteForm_title.value = '';
948+
noteForm_author.value = '';
949+
noteForm_contents.value = '';
950+
newNoteForm.classList.remove('show');
951+
initNewNoteBtn.style.display = 'block';
952+
899953
});
900954

901955
cancelNewNoteBtn.addEventListener('click', () => {

‎frontend/src/styles/components/utility-panel/_notes.scss

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
form.new-note-form {
2828
display: none;
2929
opacity: 0;
30-
margin-top: 2rem;
30+
margin: 2rem 0;
3131
&.show {
3232
display: block;
3333
animation: fadeInRight 0.5s ease-in-out forwards;
@@ -87,4 +87,65 @@
8787
}
8888
}
8989
}
90+
91+
p.note-header {
92+
text-align: center;
93+
padding: 1rem;
94+
border-bottom: 3px solid var(--primary-bg);
95+
margin-bottom: 1rem;
96+
}
97+
ul.notes {
98+
li {
99+
position: relative;
100+
margin: 1.25rem auto;
101+
i.fa-xmark {
102+
@include radius(50%);
103+
@include bg(var(--primary-bg));
104+
@include center-flex;
105+
@include absolute-center;
106+
@include simple-size(25px);
107+
opacity: 0;
108+
font-size: 0.8rem;
109+
top: -0.75rem;
110+
left: 95%;
111+
cursor: pointer;
112+
transition: color 0.3s ease, background 0.3s ease, opacity 0.3s ease;
113+
&:hover {
114+
@include bg(var(--td-accent));
115+
color: white;
116+
}
117+
}
118+
p {
119+
&.note-title {
120+
margin-bottom: 1rem;
121+
margin-top: 2rem;
122+
}
123+
&.note {
124+
position: relative;
125+
padding: 0.75rem 0 0.75rem 1rem;
126+
font-size: 0.9rem;
127+
margin: 1rem 0;
128+
font-weight: 300;
129+
&::before {
130+
content: "";
131+
@include size(100%, 3px);
132+
@include radius(25px);
133+
@include bg(var(--td-accent));
134+
position: absolute;
135+
left: 0;
136+
top: 0;
137+
}
138+
}
139+
&.note-info {
140+
font-size: 0.9rem;
141+
font-weight: 300;
142+
}
143+
}
144+
&:hover {
145+
i.fa-xmark {
146+
opacity: 1;
147+
}
148+
}
149+
}
150+
}
90151
}

‎index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,10 @@ <h1 data-project-name></h1>
157157
<button data-cancel-new-note>Cancel</button>
158158
</div>
159159
</form>
160+
<p class="note-header">Notes:</p>
161+
<ul class="notes" data-notes-container>
162+
<!-- dynamic -->
163+
</ul>
160164
</div>
161165

162166
<!-- theme container -->

0 commit comments

Comments
 (0)