changing alert to toast message

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Todo-List</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="toast.css" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"

script.js

@@ -21,8 +21,9 @@ checkIcon.classList.add('fa-solid', 'fa-check');
 // Display the remaining characters count out of 120
 document.querySelector('.js-name-input').addEventListener('input', (e) => {
   let input = e.target.value;
-  if (input.length === 120) {
-    alert('max character limits exceeded');
+  if (input.length > 120) {
+    showToast('max character limits reached', 'Danger');
+    e.target.value = input.slice(0, 120);
   }
 });
 
@@ -73,6 +74,34 @@ function clearInputs() {
   setDefaultDateTime();
 }
 
+function validInfo(name, date, time, category, priority) {
+  const specifyMessage = [];
+  if (!name) {
+    specifyMessage.push('task');
+  }
+  if (!date) {
+    specifyMessage.push('date');
+  }
+  if (!time) {
+    specifyMessage.push('time');
+  }
+  if (!category) {
+    specifyMessage.push('category');
+  }
+  if (!priority) {
+    specifyMessage.push('priority');
+  }
+
+  if (!name || !date || !time || !category || !priority) {
+    showToast(
+      `Please fill this fields: ${specifyMessage.join(', ')}.`,
+      'Danger'
+    );
+    return false;
+  }
+  return true;
+}
+
 function addTodo() {
   const inputNameElement = document.querySelector('.js-name-input');
   const inputDateElement = document.querySelector('.js-date-input');
@@ -87,22 +116,17 @@ function addTodo() {
   let priority = inputPriorityElement.value;
 
   // Validation checks
-  if (!name || !date || !time || !category || !priority) {
-    alert(
-      'Please fill in all fields: task, date, time, category, and priority.'
-    );
-    return;
-  }
+  if (!validInfo(name, date, time, category, priority)) return;
 
   // Check that date is not in past
   if (date < inputDateElement.min) {
-    alert('Please select the current date or a future date.');
+    showToast('Please select the current date or a future date.', 'Danger');
     return;
   }
 
   // Check that time is not in past
   if (time < inputTimeElement.min && date === inputDateElement.min) {
-    alert('Please select a future time.');
+    showToast('Please select the current time or a future time.', 'Danger');
     return;
   }
 
@@ -355,3 +379,58 @@ document.addEventListener('DOMContentLoaded', () => {
     .querySelector('.js-filter-input')
     .addEventListener('change', filterTodos);
 });
+
+/** New toast Info */
+class Toast {
+  constructor(message, color, time) {
+    this.message = message;
+    this.color = color;
+    this.time = time;
+    this.element = null;
+    var element = document.createElement('div');
+    element.className = 'toast-notification hide';
+    this.element = element;
+    var countElements = document.getElementsByClassName('toast-notification');
+    element.style.opacity = 0.9;
+
+    element.style.marginBottom = countElements.length * 55 + 'px';
+
+    element.style.backgroundColor = this.color;
+
+    element.textContent = this.message;
+
+    var close = document.createElement('div');
+    close.className = 'close-notification';
+
+    var icon = document.createElement('i');
+    icon.className = 'fa fa-times';
+
+    close.appendChild(icon);
+    element.appendChild(close);
+
+    document.body.appendChild(element);
+
+    setTimeout(() => {
+      element.classList.replace('hide', 'show');
+    }, 100);
+
+    setTimeout(() => {
+      element.classList.replace('show', 'hide');
+      setTimeout(() => element.remove(), 300);
+    }, this.time);
+
+    close.addEventListener('click', () => {
+      element.classList.replace('show', 'hide');
+      setTimeout(() => element.remove(), 300);
+    });
+  }
+}
+
+const ToastType = {
+  Danger: '#eb3b5a',
+  Warning: '#f6b93b',
+  Succes: '#00b894',
+};
+function showToast(message, type) {
+  new Toast(message, ToastType[type], 3000);
+}

toast.css

@@ -0,0 +1,43 @@
+.toast-notification {
+  position: fixed;
+  bottom: 20px; /* Espacio desde la parte inferior */
+  right: 20px; /* Espacio desde el lado derecho */
+  min-width: 250px; /* Ancho mínimo */
+  max-width: 350px; /* Ancho máximo */
+  padding: 15px 20px; /* Espacio interno */
+  margin-bottom: 10px; /* Espacio entre toasts si hay más de uno */
+  color: #fff;
+  border-radius: 8px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  transform: translateY(20px);
+}
+
+.toast-notification.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.toast-notification.hide {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.close-notification {
+  margin-left: 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-notification i {
+  font-size: 16px;
+  color: #fff;
+}