Improved mobile compatibility and fixed link detection

DumbWareio · Jan 30, 2025 · 8650b1e · 8650b1e
1 parent e1f26ef
commit 8650b1e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 3 deletions.
diff --git a/app.js b/app.js
@@ -315,14 +315,29 @@ function createTodoElement(todo) {
     }
 
     li.innerHTML = `
-        <input type="checkbox" ${todo.completed ? 'checked' : ''}>
+        <div class="checkbox-wrapper">
+            <input type="checkbox" ${todo.completed ? 'checked' : ''}>
+        </div>
         <span class="todo-text">${linkifyText(todo.text)}</span>
         <button class="delete-btn" aria-label="Delete todo">×</button>
     `;
 
     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 => `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`);
+    // 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 `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>${endChar}`;
+    });
 }
 
 function renderTodos() {

diff --git 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;
+    }
 }