SH20RAJ · July 24, 2024 02:26
diff --git a/daily-to-do-list.markdown b/daily-to-do-list.markdown
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daily To-Do App</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
    <div class="container">
        <h1>Daily To-Do List</h1>
        <input type="text" id="todo-input" placeholder="Add a new to-do">
        <button id="add-btn">Add</button>
        <ul id="todo-list"></ul>
        <button id="reset-btn">Reset All Checked</button>
    </div>
    <script src="app.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
 document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('todo-input');
    const addBtn = document.getElementById('add-btn');
    const todoList = document.getElementById('todo-list');
    const resetBtn = document.getElementById('reset-btn');

    let todos = JSON.parse(localStorage.getItem('todos')) || [];

    const saveTodos = () => {
        localStorage.setItem('todos', JSON.stringify(todos));
    };

    const renderTodos = () => {
        todoList.innerHTML = '';
        todos.forEach((todo, index) => {
            const li = document.createElement('li');
            li.classList.add('todo-item');
            if (todo.checked) {
                li.classList.add('checked');
            }

            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = todo.checked;
            checkbox.addEventListener('change', () => {
                todo.checked = !todo.checked;
                saveTodos();
                renderTodos();
            });

            const text = document.createElement('span');
            text.textContent = todo.text;

            const handle = document.createElement('span');
            handle.textContent = '⇅';
            handle.classList.add('drag-handle');
            handle.setAttribute('draggable', true);
            handle.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('text/plain', index);
            });

            li.appendChild(checkbox);
            li.appendChild(text);
            li.appendChild(handle);

            todoList.appendChild(li);
        });
    };

    const addTodo = () => {
        const todoText = input.value.trim();
        if (todoText) {
            todos.push({ text: todoText, checked: false });
            saveTodos();
            renderTodos();
            input.value = '';
        }
    };

    addBtn.addEventListener('click', addTodo);

    input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            addTodo();
        }
    });

    resetBtn.addEventListener('click', () => {
        todos.forEach(todo => todo.checked = false);
        saveTodos();
        renderTodos();
    });

    todoList.addEventListener('dragover', (e) => {
        e.preventDefault();
        const draggingItem = document.querySelector('.dragging');
        const siblings = [...todoList.querySelectorAll('.todo-item:not(.dragging)')];
        const nextSibling = siblings.find(sibling => e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2);
        todoList.insertBefore(draggingItem, nextSibling);
    });

    todoList.addEventListener('dragstart', (e) => {
        if (e.target.classList.contains('drag-handle')) {
            e.target.parentElement.classList.add('dragging');
        }
    });

    todoList.addEventListener('dragend', (e) => {
        if (e.target.classList.contains('drag-handle')) {
            e.target.parentElement.classList.remove('dragging');
            const reorderedTodos = [...todoList.querySelectorAll('.todo-item')].map(li => {
                const text = li.querySelector('span').textContent;
                const checked = li.querySelector('input').checked;
                return { text, checked };
            });
            todos = reorderedTodos;
            saveTodos();
        }
    });

    renderTodos();
 });
diff --git a/style.css b/style.css
 body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
 }

 .container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
 }

 h1 {
    text-align: center;
 }

 input {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
 }

 button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 10px;
 }

 button:hover {
    background-color: #0056b3;
 }

 ul {
    list-style-type: none;
    padding: 0;
 }

 li {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 li.checked {
    text-decoration: line-through;
    color: #888;
 }

 .drag-handle {
    cursor: grab;
    margin-left: 10px;
 }

 .drag-handle:active {
    cursor: grabbing;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Daily To-Do App</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="container">
	<h1>Daily To-Do List</h1>
	<input type="text" id="todo-input" placeholder="Add a new to-do">
	<button id="add-btn">Add</button>
	<ul id="todo-list"></ul>
	<button id="reset-btn">Reset All Checked</button>
	</div>
	<script src="app.js"></script>
	</body>
	</html>
	document.addEventListener('DOMContentLoaded', () => {
	const input = document.getElementById('todo-input');
	const addBtn = document.getElementById('add-btn');
	const todoList = document.getElementById('todo-list');
	const resetBtn = document.getElementById('reset-btn');

	let todos = JSON.parse(localStorage.getItem('todos')) \|\| [];

	const saveTodos = () => {
	localStorage.setItem('todos', JSON.stringify(todos));
	};

	const renderTodos = () => {
	todoList.innerHTML = '';
	todos.forEach((todo, index) => {
	const li = document.createElement('li');
	li.classList.add('todo-item');
	if (todo.checked) {
	li.classList.add('checked');
	}

	const checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	checkbox.checked = todo.checked;
	checkbox.addEventListener('change', () => {
	todo.checked = !todo.checked;
	saveTodos();
	renderTodos();
	});

	const text = document.createElement('span');
	text.textContent = todo.text;

	const handle = document.createElement('span');
	handle.textContent = '⇅';
	handle.classList.add('drag-handle');
	handle.setAttribute('draggable', true);
	handle.addEventListener('dragstart', (e) => {
	e.dataTransfer.setData('text/plain', index);
	});

	li.appendChild(checkbox);
	li.appendChild(text);
	li.appendChild(handle);

	todoList.appendChild(li);
	});
	};

	const addTodo = () => {
	const todoText = input.value.trim();
	if (todoText) {
	todos.push({ text: todoText, checked: false });
	saveTodos();
	renderTodos();
	input.value = '';
	}
	};

	addBtn.addEventListener('click', addTodo);

	input.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') {
	addTodo();
	}
	});

	resetBtn.addEventListener('click', () => {
	todos.forEach(todo => todo.checked = false);
	saveTodos();
	renderTodos();
	});

	todoList.addEventListener('dragover', (e) => {
	e.preventDefault();
	const draggingItem = document.querySelector('.dragging');
	const siblings = [...todoList.querySelectorAll('.todo-item:not(.dragging)')];
	const nextSibling = siblings.find(sibling => e.clientY <= sibling.offsetTop + sibling.offsetHeight / 2);
	todoList.insertBefore(draggingItem, nextSibling);
	});

	todoList.addEventListener('dragstart', (e) => {
	if (e.target.classList.contains('drag-handle')) {
	e.target.parentElement.classList.add('dragging');
	}
	});

	todoList.addEventListener('dragend', (e) => {
	if (e.target.classList.contains('drag-handle')) {
	e.target.parentElement.classList.remove('dragging');
	const reorderedTodos = [...todoList.querySelectorAll('.todo-item')].map(li => {
	const text = li.querySelector('span').textContent;
	const checked = li.querySelector('input').checked;
	return { text, checked };
	});
	todos = reorderedTodos;
	saveTodos();
	}
	});

	renderTodos();
	});
	body {
	font-family: Arial, sans-serif;
	background-color: #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	}

	.container {
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 300px;
	}

	h1 {
	text-align: center;
	}

	input {
	width: calc(100% - 22px);
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	}

	button {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	margin-bottom: 10px;
	}

	button:hover {
	background-color: #0056b3;
	}

	ul {
	list-style-type: none;
	padding: 0;
	}

	li {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	li.checked {
	text-decoration: line-through;
	color: #888;
	}

	.drag-handle {
	cursor: grab;
	margin-left: 10px;
	}

	.drag-handle:active {
	cursor: grabbing;
	}