Как создать сайт блокнот html?

Как создать сайт блокнот html? - коротко

Создание сайта-блокнота на HTML включает в себя следующие шаги:

  1. Создайте основной файл HTML с расширением .html.
  2. Внутри тегов добавьте элементы формы, такие как

    <button type="submit">Добавить заметку <div id="notesContainer">

<script src="script.js"></script>

Теперь добавим JavaScript для обработки формы и отображения заметок. Создадим файл script.js и добавим следующий код:

document.getElementById('noteForm').addEventListener('submit', function(event) {
 event.preventDefault(); // Предотвращаем стандартное поведение формы
 var title = document.getElementById('title').value;
 var content = document.getElementById('content').value;
 if (title && content) {
 var noteElement = document.createElement('div');
 noteElement.className = 'note';
 var titleElement = document.createElement('h3');
 titleElement.textContent = title;
 var contentElement = document.createElement('p');
 contentElement.textContent = content;
 noteElement.appendChild(titleElement);
 noteElement.appendChild(contentElement);
 document.getElementById('notesContainer').appendChild(noteElement);
 } else {
 alert('Пожалуйста, заполните все поля.');
 }
});

Этот скрипт добавляет событие submit к форме и предотвращает её стандартное поведение. Затем он извлекает значения полей ввода, создаёт новый элемент заметки и добавляет его в контейнер.

Для улучшения визуального представления можно добавить стили с использованием CSS. Создадим файл styles.css и добавим следующий код:

body {
 font-family: Arial, sans-serif;
}
form {
 margin-bottom: 20px;
}
label {
 display: block;
 margin-top: 10px;
}
input, textarea {
 width: 100%;
 padding: 8px;
 margin-top: 5px;
 box-sizing: border-box;
}
button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
button:hover {
 background-color: #45a049;
}
.note {
 margin-top: 20px;
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 5px;
}

Наконец, подключим файл стилей в основном HTML-документе:



 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 Мой блокнот
 <link rel="stylesheet" href="styles.css">

Таким образом, мы создали простой сайт-блокнот с использованием HTML, JavaScript и CSS. Этот подход можно расширить, добавив функциональность для сохранения заметок в локальном хранилище или базе данных, а также улучшить интерфейс пользователя.