From 57258bcd00f556b9b47b7a611d1cf98b1006128c Mon Sep 17 00:00:00 2001 From: Meme Date: Tue, 15 Oct 2024 17:23:58 -0300 Subject: [PATCH 1/2] changing alert to toast message --- index.html | 2 ++ script.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++------ toast.css | 41 +++++++++++++++++++++++ 3 files changed, 130 insertions(+), 10 deletions(-) create mode 100644 toast.css diff --git a/index.html b/index.html index 51a8aa2..55fc9cb 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Todo-List + +
diff --git a/script.js b/script.js index 55ea114..cee3c4c 100644 --- a/script.js +++ b/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,31 @@ 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 +113,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 +376,59 @@ 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); +} \ No newline at end of file diff --git a/toast.css b/toast.css new file mode 100644 index 0000000..2423316 --- /dev/null +++ b/toast.css @@ -0,0 +1,41 @@ +.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; +} From ede87b03ed9453df22ab9ff7774094028df6acaa Mon Sep 17 00:00:00 2001 From: Meme Date: Tue, 15 Oct 2024 17:35:17 -0300 Subject: [PATCH 2/2] fixing prettier warnings --- index.html | 1 - script.js | 10 ++++++---- toast.css | 6 ++++-- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 55fc9cb..2243d75 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,6 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> -
diff --git a/script.js b/script.js index cee3c4c..9f2250d 100644 --- a/script.js +++ b/script.js @@ -93,7 +93,10 @@ function validInfo(name, date, time, category, priority) { } if (!name || !date || !time || !category || !priority) { - showToast(`Please fill this fields: ${specifyMessage.join(', ')}.`, 'Danger'); + showToast( + `Please fill this fields: ${specifyMessage.join(', ')}.`, + 'Danger' + ); return false; } return true; @@ -113,7 +116,7 @@ function addTodo() { let priority = inputPriorityElement.value; // Validation checks - if(!validInfo(name, date, time, category, priority)) return; + if (!validInfo(name, date, time, category, priority)) return; // Check that date is not in past if (date < inputDateElement.min) { @@ -377,7 +380,6 @@ document.addEventListener('DOMContentLoaded', () => { .addEventListener('change', filterTodos); }); - /** New toast Info */ class Toast { constructor(message, color, time) { @@ -431,4 +433,4 @@ const ToastType = { }; function showToast(message, type) { new Toast(message, ToastType[type], 3000); -} \ No newline at end of file +} diff --git a/toast.css b/toast.css index 2423316..03bd017 100644 --- a/toast.css +++ b/toast.css @@ -1,7 +1,7 @@ .toast-notification { position: fixed; bottom: 20px; /* Espacio desde la parte inferior */ - right: 20px; /* Espacio desde el lado derecho */ + right: 20px; /* Espacio desde el lado derecho */ min-width: 250px; /* Ancho mínimo */ max-width: 350px; /* Ancho máximo */ padding: 15px 20px; /* Espacio interno */ @@ -13,7 +13,9 @@ 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; + transition: + opacity 0.3s ease, + transform 0.3s ease; transform: translateY(20px); }