feat: Scroll in notes

lucia-gm · Sep 3, 2018 · 9b8eab0 · 9b8eab0
1 parent 00b9f32
commit 9b8eab0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/app.js b/app.js
@@ -16,7 +16,8 @@ function addNote() {
 
   note.classList.add('note');
   note.classList.add(form.color.value);
-  note.innerHTML = text;
+  note.innerHTML = `<div class='note-text'>${text}</div>`;
+  deleteButton.classList.add('note-delete');
   deleteButton.innerHTML = '&times;';
 
   note.appendChild(deleteButton);  

diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
 <body>
   <h1>Note Taking App</h1>
   <form>
-    <textarea name="formNoteText" id="formNoteText" cols="50" rows="8" maxlength="100"></textarea>
+    <textarea name="formNoteText" id="formNoteText" cols="50" rows="8" maxlength="300"></textarea>
     <select name="formColor" id="formColor">
       <option value="none">Select color</option>
       <option value="red">Red</option>

diff --git a/style.css b/style.css
@@ -39,6 +39,11 @@ textarea {
   position: relative;
 }
 
+.note-text {
+  height: 100%;
+  overflow-y: scroll;
+}
+
 .note::after {
   content: '';
   position: absolute;