Untitled

<html>
<head>
	<style type="text/css">
		.done {
			text-decoration: line-through;
		}
	</style>
</head>

<body>
	<form id="todo-form">
		<input type="text" name="todo">
		<button type="submit">Save</button>
	</form>

	<ul id="todo-list"></ul>

	<hr />

	<ul id="todo-stats">
		<li>1 completed</li>
		<li>2 todos</li>
		<li>1 pending</li>
	</ul>

	<script>
		const todoFrm = document.getElementById('todo-form')
		const todoList = document.getElementById('todo-list')
		const todoStats = document.getElementById('todo-stats')
		const todoInput = document.getElementsByName('todo')[0]
		const todos = [{
			name: 'Buy bread',
			is_done: false
		}, {
			name: 'Buy egg',
			is_done: false
		}, {
			name: 'Test',
			is_done: false
		}]

		function renderTodos() {
			let completedCount = 0
			let pendingCount = 0

			todoList.innerHTML = "";
			todos.forEach(function (todo) {
				const listIndex = document.createElement('li')
				const listBtn = document.createElement('button')
				listIndex.innerHTML = todo.name
				listBtn.innerHTML = "✅"

				listBtn.addEventListener('click', function () {
					todo.is_done = true

					renderTodos()
				})

				todoList.appendChild(listIndex)
				if (todo.is_done) {
					listIndex.classList.add('done')
				} else {
					todoList.appendChild(listBtn)
				}
			})

			// Refreshes the statistics
			todos.filter(function (todo) {
				if (todo.is_done) {
					completedCount++;
				} else {
					pendingCount++;
				}
			})

			todoStats.innerHTML = ""
			const completedList = document.createElement('li')
			completedList.innerHTML = ${completedCount} completed

			const totalList = document.createElement('li')
			totalList.innerHTML = ${todos.length} todos

			const pendingList = document.createElement('li')
			pendingList.innerHTML = ${pendingCount} pending

			todoStats.appendChild(completedList)
			todoStats.appendChild(totalList)
			todoStats.appendChild(pendingList)
		}

		todoFrm.addEventListener('submit', function (event) {
			event.preventDefault()

			todos.push({
				name: todoInput.value,
				is_done: false
			})

			renderTodos()
		})

		renderTodos()
	</script>
</body>

</html>
Editor is loading...