У вас есть три страницы html, и в них здесь самое главное это вызов функции createTodoApp. Эта функция и создает все элементы на странице.
<script>
document.addEventListener('DOMContentLoaded', function() {
createTodoApp(document.getElementById('todo-app'), 'Мои дела')
})
</script>
Сама функция createTodoApp выполниться только когда событие DOMContentLoaded сработает т.е. после загрузки страницы. Так мы будем уверены, что все элементы в html файле присутствуют.
document.addEventListener('DOMContentLoaded', function() {
console.log('Страница загрузилась и все элементы на месте')
})
Далее createTodoApp создает элементы c помощью вспомогательных функций (createAppTitle, createTodoItemForm и др.) и добавляет их в указанный контейнер. Пока я не буду разбирать саму функции, а просто покажу сам принцип, как она работает. В этом примере createTodoApp добавит элементы в <div> с id равным todo-app.
<div id="todo-app" class="container"></div>
После выполнения createTodoApp на страницу добавиться все элементы которые будут созданы различными функциями, которые мы разберем позже. Для более лучшего восприятия html, я показал только основные элементы <form> и <ul>, элементы внутри них мы разберем позже.
<div id="todo-app" class="container">
<h2>Мои дела</h2>
<form> /* элементы формы */</form>
<ul>/* элементы списка дел */</ul>
</div>
Как код понимает в какой элемент ему нужно добавить html? Это мы ему даем этот элемент с помощью getElementById
document.getElementById('todo-app')
Этот код найдет указанный элемент и мы в самой функции сможем работать именно с этим элементом.
В качестве самостоятельной работы для закрепления материала, рекомендую вам создать на странице разные контейнеры с различными id и попробовать добавить элементы приложения todo-app в них.
Так же, кроме getElementById, существуют и другие методы для поиска элементов на странице. Можете самостоятельно их попробовать.