suhailroushan13 · January 24, 2025 07:07
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>To-Do List</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .container {
      width: 100%;
      max-width: 500px;
      background: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      overflow: hidden;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    .form-group {
      display: flex;
      justify-content: space-between;
      gap: 10px;
    }

    input[type="text"] {
      flex: 1;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      padding: 10px 15px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

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

    .todo-list {
      margin-top: 20px;
    }

    .todo-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f9f9f9;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .todo-text {
      flex: 1;
      font-size: 16px;
    }

    .actions {
      display: flex;
      gap: 10px;
    }

    .actions button {
      background: none;
      border: none;
      cursor: pointer;
      color: #007bff;
      font-size: 14px;
    }

    .actions button:hover {
      text-decoration: underline;
    }
  </style>
 </head>
 <body>
  <div class="container">
    <h1>To-Do List</h1>
    <div class="form-group">
      <input type="text" id="todo-input" placeholder="Add a new task" />
      <button id="add-btn">Add</button>
    </div>
    <div class="todo-list" id="todo-list"></div>
  </div>

  <script>
    // Selectors
    const todoInput = document.getElementById('todo-input');
    const addBtn = document.getElementById('add-btn');
    const todoList = document.getElementById('todo-list');

    // Load todos from local storage
    let todos = JSON.parse(localStorage.getItem('todos')) || [];

    // Display todos
    const displayTodos = () => {
      todoList.innerHTML = '';
      todos.forEach((todo, index) => {
        const todoCard = document.createElement('div');
        todoCard.className = 'todo-card';

        const todoText = document.createElement('div');
        todoText.className = 'todo-text';
        todoText.textContent = todo.text;

        const actions = document.createElement('div');
        actions.className = 'actions';

        const editBtn = document.createElement('button');
        editBtn.textContent = 'Edit';
        editBtn.onclick = () => editTodo(index);

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.onclick = () => deleteTodo(index);

        actions.appendChild(editBtn);
        actions.appendChild(deleteBtn);

        todoCard.appendChild(todoText);
        todoCard.appendChild(actions);

        todoList.appendChild(todoCard);
      });
    };

    // Add a new todo
    const addTodo = () => {
      const text = todoInput.value.trim();
      if (text) {
        todos.push({ text });
        saveTodos();
        displayTodos();
        todoInput.value = '';
      }
    };

    // Edit a todo
    const editTodo = (index) => {
      const newText = prompt('Edit your task:', todos[index].text);
      if (newText !== null) {
        todos[index].text = newText.trim();
        saveTodos();
        displayTodos();
      }
    };

    // Delete a todo
    const deleteTodo = (index) => {
      todos.splice(index, 1);
      saveTodos();
      displayTodos();
    };

    // Save todos to local storage
    const saveTodos = () => {
      localStorage.setItem('todos', JSON.stringify(todos));
    };

    // Event listeners
    addBtn.addEventListener('click', addTodo);
    todoInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') addTodo();
    });

    // Initial render
    displayTodos();
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>To-Do List</title>
	<style>
	body {
	font-family: Arial, sans-serif;
	background-color: #f4f4f4;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	}

	.container {
	width: 100%;
	max-width: 500px;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	overflow: hidden;
	padding: 20px;
	}

	h1 {
	text-align: center;
	color: #333;
	}

	.form-group {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	}

	input[type="text"] {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}

	button {
	padding: 10px 15px;
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	}

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

	.todo-list {
	margin-top: 20px;
	}

	.todo-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #f9f9f9;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.todo-text {
	flex: 1;
	font-size: 16px;
	}

	.actions {
	display: flex;
	gap: 10px;
	}

	.actions button {
	background: none;
	border: none;
	cursor: pointer;
	color: #007bff;
	font-size: 14px;
	}

	.actions button:hover {
	text-decoration: underline;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>To-Do List</h1>
	<div class="form-group">
	<input type="text" id="todo-input" placeholder="Add a new task" />
	<button id="add-btn">Add</button>
	</div>
	<div class="todo-list" id="todo-list"></div>
	</div>

	<script>
	// Selectors
	const todoInput = document.getElementById('todo-input');
	const addBtn = document.getElementById('add-btn');
	const todoList = document.getElementById('todo-list');

	// Load todos from local storage
	let todos = JSON.parse(localStorage.getItem('todos')) \|\| [];

	// Display todos
	const displayTodos = () => {
	todoList.innerHTML = '';
	todos.forEach((todo, index) => {
	const todoCard = document.createElement('div');
	todoCard.className = 'todo-card';

	const todoText = document.createElement('div');
	todoText.className = 'todo-text';
	todoText.textContent = todo.text;

	const actions = document.createElement('div');
	actions.className = 'actions';

	const editBtn = document.createElement('button');
	editBtn.textContent = 'Edit';
	editBtn.onclick = () => editTodo(index);

	const deleteBtn = document.createElement('button');
	deleteBtn.textContent = 'Delete';
	deleteBtn.onclick = () => deleteTodo(index);

	actions.appendChild(editBtn);
	actions.appendChild(deleteBtn);

	todoCard.appendChild(todoText);
	todoCard.appendChild(actions);

	todoList.appendChild(todoCard);
	});
	};

	// Add a new todo
	const addTodo = () => {
	const text = todoInput.value.trim();
	if (text) {
	todos.push({ text });
	saveTodos();
	displayTodos();
	todoInput.value = '';
	}
	};

	// Edit a todo
	const editTodo = (index) => {
	const newText = prompt('Edit your task:', todos[index].text);
	if (newText !== null) {
	todos[index].text = newText.trim();
	saveTodos();
	displayTodos();
	}
	};

	// Delete a todo
	const deleteTodo = (index) => {
	todos.splice(index, 1);
	saveTodos();
	displayTodos();
	};

	// Save todos to local storage
	const saveTodos = () => {
	localStorage.setItem('todos', JSON.stringify(todos));
	};

	// Event listeners
	addBtn.addEventListener('click', addTodo);
	todoInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter') addTodo();
	});

	// Initial render
	displayTodos();
	</script>
	</body>
	</html>