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