# Створення банківського додатку Частина 1: HTML-шаблони та маршрути у веб-додатку ## Передлекційний тест [Передлекційний тест](https://ff-quizzes.netlify.app/web/quiz/41) ### Вступ З появою JavaScript у браузерах вебсайти стали більш інтерактивними та складними, ніж будь-коли. Вебтехнології тепер часто використовуються для створення повнофункціональних додатків, які працюють безпосередньо у браузері, і які ми називаємо [веб-додатками](https://en.wikipedia.org/wiki/Web_application). Оскільки веб-додатки є дуже інтерактивними, користувачі не хочуть чекати повного перезавантаження сторінки щоразу, коли виконується якась дія. Саме тому JavaScript використовується для оновлення HTML безпосередньо через DOM, щоб забезпечити більш плавний користувацький досвід. У цьому уроці ми закладемо основи для створення банківського веб-додатку, використовуючи HTML-шаблони для створення кількох екранів, які можна відображати та оновлювати без необхідності перезавантаження всієї HTML-сторінки. ### Передумови Вам потрібен локальний вебсервер для тестування веб-додатку, який ми створимо в цьому уроці. Якщо у вас його немає, ви можете встановити [Node.js](https://nodejs.org) і скористатися командою `npx lite-server` у папці вашого проєкту. Це створить локальний вебсервер і відкриє ваш додаток у браузері. ### Підготовка На вашому комп'ютері створіть папку з назвою `bank` і файл `index.html` всередині неї. Ми почнемо з цього [шаблону HTML](https://en.wikipedia.org/wiki/Boilerplate_code): ```html Bank App ``` --- ## HTML-шаблони Якщо ви хочете створити кілька екранів для вебсторінки, одним із рішень буде створення окремого HTML-файлу для кожного екрану, який ви хочете відобразити. Однак це рішення має певні незручності: - Потрібно перезавантажувати весь HTML при перемиканні екранів, що може бути повільним. - Важко ділитися даними між різними екранами. Інший підхід полягає у використанні лише одного HTML-файлу та визначенні кількох [HTML-шаблонів](https://developer.mozilla.org/docs/Web/HTML/Element/template) за допомогою елемента `