minor fix & changes

Author: CleilsonAndrade

index.html

@@ -105,6 +105,9 @@ <h2>Nova Transação</h2>
                         <label class="sr-only" for="date">Data</label>
                         <input type="date" id="date" name="date">
                     </div>
+                    <div id="att" class="attention sr-only">
+                        <small>Por favor, preencha todos os campos!</small>
+                    </div>
                     <div class="input-group actions">
                         <a onclick="Modal.close()" href="#" class="button cancel">Cancelar</a>
                         <button>Salvar</button>

scripts.js

@@ -3,13 +3,16 @@ const Modal = {
         // ABRIR MODAL
         // Adicionar a class active ao modal
         document.querySelector('.modal-overlay').classList.add('active-overlay')
-        document.querySelector('.modal').classList.add('active-modal')
+        document.querySelector('.modal').classList.toggle('active-modal')
+        document.querySelector('.attention').classList.add('sr-only')
+
     },
     close() {
         // FECHAR MODAL
         // Remover a class active do modal
         document.querySelector('.modal-overlay').classList.remove('active-overlay')
-        document.querySelector('.modal').classList.remove('active-modal')
+        document.querySelector('.modal').classList.toggle('active-modal')
+        document.querySelector('.attention').classList.add('sr-only')
 
     },
 }
@@ -128,6 +131,7 @@ const Form = {
         const { description, amount, date } = Form.getValues()
 
         if (description.trim() === "" || amount.trim() === "" || date.trim() === "") {
+            document.querySelector('.attention').classList.remove('sr-only')
             throw new Error("Por favor, preencha todos os campos!")
         }
     },

style.css

@@ -39,6 +39,12 @@ body {
     margin: 0 auto;
 }
 
+.attention {
+    margin-top: 0.2rem;
+    font-weight: 600;
+    color: var(--red);
+}
+
 /* TITLES============================================= */
 h2 {
     margin-top: 3.2rem;
@@ -223,6 +229,7 @@ td.expense {
 .modal-overlay.active-overlay {
     opacity: 1;
     visibility: visible;
+    backdrop-filter: blur(5px);
 }
 
 .modal {