kodujemywbiurze.pl
1️⃣ js 2️⃣ storage 3️⃣ html 4️⃣ html + js

Kompletny kod aplikacji w jednym pliku HTML, zawierającym kod JavaScript w tagu <script>

Nasza aplikacja działa, ale nie jest to jeszcze aż tak wygodne, jakim by mogło być, ponieważ musimy najpierw odpalić plik HTML w przeglądarce, a potem dodatkowo odpalić plik JavaScript z poziomu konsoli i zakładki snippets.

Nasz HTML i JavaScript żyją swoim życiem. Musimy natomiast powiązać te pliki. Możemy to zrobić na 2 sposoby.

Pierwszym sposobem jest skopiować kod naszej aplikacji JavaScript z poprzedniej rozdziału (lub z pliku z zakładki snippets) i wkleić go wewnątrz tagu <script></script> bezpośrednio w pliku HTML (stwórz nowy plik z nową nazwą).

Nasz kod HTML musimy z kolei osadzić w szablonie HTML, co już robiliśmy tutaj):

<!DOCTYPE html>
<html>
  <head>
    <title>Todo App | kodujemywbiurze.pl</title>
  </head>

  <body>
    <!-- kod HTML -->
    <h1>Twoje zadania</h1>

    <hr>

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

    <ul id="tasks-list">

    </ul>

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

    <!-- dodaj poniżej otwierający tag <script> -->
    <script>
      /* tutaj wklejamy kod JavaScript pomiędzy otwierającym tagiem <script> i zamykającym tagiem </script> */
      console.clear();

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

        const storedTasks = JSON.parse(storedTasksStringified);

        return storedTasks;
      }

      let tasks = getTasksFromLocalStorage() || [];

      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);
      }

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

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

        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:");
        
        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();

      /* dodaj poniżej zamykający tag </script> */
    </script>
  </body>
</html>

Teraz możemy odpalić ten plik w przeglądarce, dzięki czemu aplikacja będzie działać natychmiast - bez uruchamiania żadnego dodatkowego pliku js w snippets, jak to miało miejsce dotychczas!

Wszystko jest w jednym pliku - nasza prawdziwa aplikacja webowa, którą możemy zapisać na komputerze lub też przesłać mailem znajomemu, dzięki czemu pobierze plik i odpali na swoim komputerze.

W związku z tym pamiętaj, że gdybyś chciał/a pisać kod HTML i JavaScript w jednym pliku, to powinieneś/aś utworzyć plik HTML, po czym wypełnić go w następujący sposób:

<!DOCTYPE html>
<html>
  <head>
    <title>Tutaj wpisz tytuł swojej aplikacji/ strony internetowej</title>
  </head>

  <body>
    <!-- tutaj poniżej pisz kod HTML -->

    <!-- tutaj (po kodzie HTML) możesz pisać kod JavaScript wewnątrz tagu <script> -->
    <script>
      // kod JavaScript...
    </script>
  </body>
</html>