sunnyujjawal
/

ToDo-app-Javascript

Model card Files Files and versions Community

ToDo-app-Javascript / index.html

sunnyujjawal's picture

Create index.html

450405b about 2 years ago

history blame contribute delete

1.95 kB

	<!DOCTYPE html>
	<html>
	<head>
	<title>Todo App</title>
	<style>
	ul {
	list-style: none;
	padding: 0;
	}
	li {
	display: flex;
	align-items: center;
	margin-top: 10px;
	}
	input[type="checkbox"] {
	margin-right: 10px;
	}
	</style>
	</head>
	<body>
	<h1>Todo App</h1>
	<textarea id="todo-input"></textarea>
	<button id="add-button">Add</button>
	<ul id="todo-list"></ul>
	<script>
	// Array to store todo items
	let todos = [];

	// Get references to the DOM elements we need
	const input = document.getElementById("todo-input");
	const addButton = document.getElementById("add-button");
	const list = document.getElementById("todo-list");

	// Function to add a new todo item to the list
	function addTodo() {
	// Get the value of the textarea
	const todoText = input.value;

	// Add the new todo item to the array
	todos.push({
	text: todoText,
	completed: false
	});

	// Clear the textarea
	input.value = "";

	// Re-render the list
	renderTodos();
	}

	// Function to render the todo list
	function renderTodos() {
	// Clear the existing list
	list.innerHTML = "";

	// Loop through the todo items
	for (const todo of todos) {
	// Create a new list item element
	const item = document.createElement("li");

	// Add a checkbox to mark the todo as completed
	const checkbox = document.createElement("input");
	checkbox.type = "checkbox";
	checkbox.checked = todo.completed;
	item.appendChild(checkbox);

	// Add the todo text to the list item
	const text = document.createTextNode(todo.text);
	item.appendChild(text);

	// Append the list item to the list
	list.appendChild(item);
	}
	}

	// Add event listeners
	addButton.addEventListener("click", addTodo);
	</script>
	</body>
	</html>