Kompletny kod pliku HTML i pliku JavaScript

Po ukończeniu tego kursu uproszczony kod pliku HTML powinien wyglądać tak:

<h1>Twoje zadania</h1>

<hr>

<button onclick="addTask()">dodaj zadanie</button>

<ul id="tasks-list">

</ul>

<button onclick="deleteAllTasks()">wyczyść listę</button>

Z kolei kod pliku JavaScript powinien wyglądać tak:

console.clear();

function getTasksFromLocalStorage() {
  const storedTasksStringified = localStorage.getItem("tasks");

  const storedTasks = JSON.parse(storedTasksStringified);

  return storedTasks;
}

let tasks = getTasksFromLocalStorage() || [];

//========================== DOM ======================//

const tasksList = document.getElementById("tasks-list");

function appendTaskToTheTasksList(task, index) {
  const li = document.createElement("li");
  li.textContent = task + " ";
  
  const deleteButton = document.createElement("button");
  deleteButton.textContent = "usuń";

  deleteButton.onclick = function() {
    deleteTask(index);
  }

  li.appendChild(deleteButton);

  const addAtIndexButton = document.createElement("button");
  addAtIndexButton.textContent = "dodaj przed";

  addAtIndexButton.onclick = function() {
    addTaskAtIndex(index);
  }

  li.appendChild(addAtIndexButton);
  
  tasksList.appendChild(li);
}

function renderTasks() {
  tasksList.innerHTML = "";

  tasks.forEach(appendTaskToTheTasksList);

  console.log("Twoje zapisane zadania:", tasks);
}

//============================ DOM (koniec) ==========================//

function updateTasksInLocalStorage() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

function addTask() {
  const newTask = prompt("Wpisz nowe zadanie:"); // <= prompt()

  tasks.push(newTask);

  updateTasksInLocalStorage();

  console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

  renderTasks();
}

function addTaskAtIndex(index) {
  const newTask = prompt("Wpisz nowe zadanie:"); // <= prompt()
  
  tasks.splice(index, 0, newTask);

  console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

  updateTasksInLocalStorage();

  renderTasks();
}

function deleteTask(index) {
  tasks.splice(index, 1);

  updateTasksInLocalStorage();

  renderTasks();
}

function deleteAllTasks() {
  tasks = [];

  console.log("Wszystkie zadania zostały usunięte...");

  updateTasksInLocalStorage(tasks);

  renderTasks();
}

renderTasks();

W następnym rozdziale połączymy te dwa pliki w jeden plik HTML. Do dzieła!