diff --git a/app.js b/app.js index c1379ee..c260550 100644 --- a/app.js +++ b/app.js @@ -315,14 +315,29 @@ function createTodoElement(todo) { } li.innerHTML = ` - +
+ +
${linkifyText(todo.text)} `; const checkbox = li.querySelector('input'); + const checkboxWrapper = li.querySelector('.checkbox-wrapper'); const todoText = li.querySelector('.todo-text'); + // Add click handler to the wrapper + checkboxWrapper.addEventListener('click', (e) => { + // Only trigger if clicking the wrapper (not the checkbox directly) + if (e.target === checkboxWrapper) { + checkbox.checked = !checkbox.checked; + todo.completed = checkbox.checked; + renderTodos(); + saveTodos(); + showToast(todo.completed ? 'Task completed! 🎉' : 'Task uncompleted'); + } + }); + checkbox.addEventListener('change', () => { todo.completed = checkbox.checked; renderTodos(); @@ -432,8 +447,12 @@ function createTodoElement(todo) { // Helper function to convert URLs in text to clickable links function linkifyText(text) { - const urlRegex = /(https?:\/\/[^\s]+)/g; - return text.replace(urlRegex, url => `${url}`); + // Updated regex that doesn't include trailing punctuation in the URL + const urlRegex = /(https?:\/\/[^\s)]+)([)\s]|$)/g; + return text.replace(urlRegex, (match, url, endChar) => { + // Return the URL as a link plus any trailing character + return `${url}${endChar}`; + }); } function renderTodos() { diff --git a/styles.css b/styles.css index 033a717..de5c75f 100644 --- a/styles.css +++ b/styles.css @@ -168,6 +168,7 @@ input:focus { width: 100%; max-width: 500px; cursor: default; + position: relative; } .todo-item:not(.completed) { @@ -190,11 +191,26 @@ input:focus { opacity: 0.7; } +.checkbox-wrapper { + position: relative; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 0.5rem; + margin: -0.5rem; +} + .todo-item input[type="checkbox"] { width: 18px; height: 18px; margin: 0; justify-self: start; + cursor: pointer; + position: relative; + z-index: 1; } .todo-item span { @@ -713,4 +729,12 @@ input:focus { .todo-item:not(.completed):not(.dragging).drop-below::after { bottom: -1px; opacity: 1; +} + +/* Add touch-friendly tap target on mobile */ +@media (max-width: 768px) { + .checkbox-wrapper { + padding: 0.75rem; + margin: -0.75rem; + } } \ No newline at end of file