SH20RAJ · July 24, 2024 02:27
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">
        <div class="header">
            <h1>Daily To-Do List</h1>
            <button id="reset-btn">Reset All Checked</button>
        </div>
        <input type="text" id="todo-input" placeholder="Add a new to-do">
        <button id="add-btn">Add</button>
        <table>
            <thead>
                <tr>
                    <th>To-Do</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody id="todo-list"></tbody>
        </table>
        <details>
            <summary>Work Done Today</summary>
            <ul id="completed-list"></ul>
        </details>
    </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 completedList = document.getElementById('completed-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 = '';
        completedList.innerHTML = '';
        todos.forEach((todo, index) => {
            const tr = document.createElement('tr');
            tr.classList.add('todo-item');
            if (todo.checked) {
                tr.classList.add('checked');
            }

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

            const tdAction = document.createElement('td');

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

            tdAction.appendChild(checkbox);
            tr.appendChild(tdText);
            tr.appendChild(tdAction);

            if (todo.checked) {
                completedList.appendChild(tr);
            } else {
                todoList.appendChild(tr);
            }
        });
    };

    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();
    });

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

 .container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 1000px;
    height: 90vh;
    display: flex;
    flex-direction: column;
 }

 .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 h1 {
    margin: 0;
 }

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

 button {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 10px 0;
    align-self: flex-start;
 }

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

 table {
    width: 100%;
    border-collapse: collapse;
 }

 th, td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
 }

 th {
    background-color: #f8f8f8;
 }

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

 details {
    margin-top: 20px;
 }

 details summary {
    font-weight: bold;
    cursor: pointer;
 }

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

 details li {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 5px 0;
    background-color: #f8f8f8;
 }
	<!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">
	<div class="header">
	<h1>Daily To-Do List</h1>
	<button id="reset-btn">Reset All Checked</button>
	</div>
	<input type="text" id="todo-input" placeholder="Add a new to-do">
	<button id="add-btn">Add</button>
	<table>
	<thead>
	<tr>
	<th>To-Do</th>
	<th>Action</th>
	</tr>
	</thead>
	<tbody id="todo-list"></tbody>
	</table>
	<details>
	<summary>Work Done Today</summary>
	<ul id="completed-list"></ul>
	</details>
	</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 completedList = document.getElementById('completed-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 = '';
	completedList.innerHTML = '';
	todos.forEach((todo, index) => {
	const tr = document.createElement('tr');
	tr.classList.add('todo-item');
	if (todo.checked) {
	tr.classList.add('checked');
	}

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

	const tdAction = document.createElement('td');

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

	tdAction.appendChild(checkbox);
	tr.appendChild(tdText);
	tr.appendChild(tdAction);

	if (todo.checked) {
	completedList.appendChild(tr);
	} else {
	todoList.appendChild(tr);
	}
	});
	};

	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();
	});

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

	.container {
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 80%;
	max-width: 1000px;
	height: 90vh;
	display: flex;
	flex-direction: column;
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	h1 {
	margin: 0;
	}

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

	button {
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	margin: 10px 0;
	align-self: flex-start;
	}

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

	table {
	width: 100%;
	border-collapse: collapse;
	}

	th, td {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	text-align: left;
	}

	th {
	background-color: #f8f8f8;
	}

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

	details {
	margin-top: 20px;
	}

	details summary {
	font-weight: bold;
	cursor: pointer;
	}

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

	details li {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 5px 0;
	background-color: #f8f8f8;
	}