HTML, CSS и JavaScript страницы

Содержимое окна — обычная веб-страница. Её HTML, CSS и JavaScript лежат в папке программы и подключаются так же, как на сайте: тегами link и script. Код этой страницы выполняется в процессе отрисовки, поэтому в нём доступен DOM, но нет Node.js.

Разметка

Замените содержимое index.html в корне проекта:

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
    <link rel="stylesheet" href="styles.css">
    <title>Заметки</title>
  </head>
  <body>
    <h1>Заметки</h1>
    <form id="note-form">
      <textarea id="note-text" placeholder="Текст заметки"></textarea>
      <button type="submit">Добавить</button>
    </form>
    <ul id="notes"></ul>
    <script src="renderer.js"></script>
  </body>
</html>

Пути styles.css и renderer.js относительные: файлы ищутся рядом с index.html. Скрипт подключён в конце body, чтобы к его запуску элементы уже были на странице.

Стили

Создайте styles.css:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  margin: 24px;
}
 
textarea {
  width: 100%;
  min-height: 80px;
}
 
#notes li {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

Шрифт system-ui — системный шрифт Windows или macOS, поэтому программа выглядит привычно для пользователя.

Скрипт страницы

Создайте renderer.js:

// renderer.js
const form = document.querySelector('#note-form');
const text = document.querySelector('#note-text');
const list = document.querySelector('#notes');
 
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const li = document.createElement('li');
  li.textContent = text.value;
  list.append(li);
  text.value = '';
});

Запустите npm start, введите текст и нажмите «Добавить» — заметка появится в списке. После перезапуска список будет пустым: страница хранит его только в памяти. Сохранение в файл появится в уроке о файлах.

Загрузка адреса вместо файла

Вместо loadFile окно может открыть адрес:

// main.js
win.loadURL('https://example.com');

Так делают при разработке с Vite, когда страницу отдаёт сервер разработки. Для своих файлов используйте loadFile.

Чем страница отличается от сайта

Частая ошибка

Код, вставленный прямо в HTML внутри тега script без атрибута src, не выполнится: политика Content-Security-Policy запрещает встроенные скрипты, а в консоли появится ошибка Refused to execute inline script. То же касается атрибутов вроде onclick. Держите весь JavaScript страницы в renderer.js и подключайте его через src.