latviancoder/1.html

## 1.html
<html>
<body>
<ul id="todo-app">
    <li class="todo">Walk the dog</li>
    <li class="todo">Pay bills</li>
    <li class="todo">Make dinner</li>
    <li class="todo">Code for one hour</li>
</ul>
<script>
    window.onload = () => {
        const todos = document.getElementsByClassName('todo');
        Array.from(todos).forEach((todoEl, i) => {
            todoEl.addEventListener('click', () => {
                todoEl.style = 'text-decoration: line-through';
                alert(`Item ${i + 1}: "${todoEl.innerText}" is done!`);
            });
        });
    };
</script>
</body>
</html>

## 2.html
<html>
<body>
<style>
    .todo--done {
        text-decoration: line-through;
    }
</style>
<div id="container"></div>
<script>
    const todos = [
        {label: 'Walk the dog'},
        {label: 'Pay bills'},
        {label: 'Make dinner'},
        {label: 'Code for one hour'}
    ];

    const renderTodos = () => {
        document.getElementById('container').innerHTML = '';

        todos.forEach((todo, i) => {
            const todoEl = document.getElementById('container').appendChild(document.createElement('li'));
            todoEl.innerText = todo.label;

            todoEl.classList.add('todo');
            if (todo.done) {
                todoEl.classList.add('todo--done');
            }

            todoEl.addEventListener('click', () => {
                todo.done = !todo.done;
                alert(`Item ${i + 1}: "${todo.label}" is ${todo.done ? 'done' : 'undone'}!`);
                renderTodos();
            });
        });
    };

    renderTodos();
</script>
</body>
</html>
	<html>
	<body>
	<ul id="todo-app">
	<li class="todo">Walk the dog</li>
	<li class="todo">Pay bills</li>
	<li class="todo">Make dinner</li>
	<li class="todo">Code for one hour</li>
	</ul>
	<script>
	window.onload = () => {
	const todos = document.getElementsByClassName('todo');
	Array.from(todos).forEach((todoEl, i) => {
	todoEl.addEventListener('click', () => {
	todoEl.style = 'text-decoration: line-through';
	alert(`Item ${i + 1}: "${todoEl.innerText}" is done!`);
	});
	});
	};
	</script>
	</body>
	</html>
	<html>
	<body>
	<style>
	.todo--done {
	text-decoration: line-through;
	}
	</style>
	<div id="container"></div>
	<script>
	const todos = [
	{label: 'Walk the dog'},
	{label: 'Pay bills'},
	{label: 'Make dinner'},
	{label: 'Code for one hour'}
	];

	const renderTodos = () => {
	document.getElementById('container').innerHTML = '';

	todos.forEach((todo, i) => {
	const todoEl = document.getElementById('container').appendChild(document.createElement('li'));
	todoEl.innerText = todo.label;

	todoEl.classList.add('todo');
	if (todo.done) {
	todoEl.classList.add('todo--done');
	}

	todoEl.addEventListener('click', () => {
	todo.done = !todo.done;
	alert(`Item ${i + 1}: "${todo.label}" is ${todo.done ? 'done' : 'undone'}!`);
	renderTodos();
	});
	});
	};

	renderTodos();
	</script>
	</body>
	</html>