Add error class

html/tasks/chapter_8/notes/oppgave.html

@@ -22,6 +22,13 @@
       </div>
 
       <div id="notes" class="textboxGrid"></div>
+
+      <div class="error" id="testError">
+        <b>ERROR:</b>
+        Please insert something in the textarea
+      </div>
+
+
     </div>
 
   </body>

html/tasks/chapter_8/notes/script.js

@@ -6,6 +6,7 @@ const noteForm = document.getElementById('noteInput');
 const noteText = document.getElementById('noteInputText');
 const noteSubmit = document.getElementById('noteInputSubmit');
 const notes = document.getElementById('notes');
+const error1 = document.getElementById('testError');
 
 /* Add event listeners */
 
@@ -21,6 +22,13 @@ jQuery('button').click('click', buttonDelete);
 function addNote(evt) {
   evt.preventDefault();
 
+  if (noteText.value === '') {
+    error1.style.display = 'block';
+    return;
+  } else {
+    error1.style.display = 'none';
+  }
+
   const text = noteText.value;
   noteText.value = '';
 

resources/css/main.css

@@ -211,3 +211,14 @@ tr:hover {
 .inlineTable tr th, .inlineTable tr td {
   display: table-cell;
 }
+
+.error {
+  display: none;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: #f92677;
+  width: 20%;
+  padding: 10px;
+  text-align: center;
+  margin: 15px auto;
+}

resources/css/scss/_classes.scss

@@ -105,4 +105,15 @@
     }
   }
 
+}
+
+.error {
+  display: none;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: $red;
+  width: 20%;
+  padding: 10px;
+  text-align: center;
+  margin: $standardMargin auto;
 }