Как при мощи js создать поле дополнительных ингридиентов?

Для создания поля дополнительных ингредиентов на веб-странице с помощью JavaScript, можно использовать следующий подход:

1. Создание HTML-структуры:
Для начала, необходимо создать HTML-элементы, которые будут представлять поле для ввода дополнительных ингредиентов. Например, это может быть input для ввода текста и кнопка "Добавить ингредиент".

<div id="ingredients-list">
  <input type="text" id="ingredient-input" placeholder="Введите ингредиент">
  <button id="add-ingredient-btn">Добавить ингредиент</button>
</div>
<ul id="ingredients"></ul>

2. Обработка событий с помощью JavaScript:
Затем, необходимо написать скрипт на JavaScript, который будет отслеживать нажатие на кнопку "Добавить ингредиент", считывать значение из поля ввода и добавлять новый ингредиент в список.

document.getElementById('add-ingredient-btn').addEventListener('click', function() {
  const ingredientInput = document.getElementById('ingredient-input');
  const ingredientValue = ingredientInput.value.trim();

  if (ingredientValue) {
    const li = document.createElement('li');
    li.textContent = ingredientValue;

    document.getElementById('ingredients').appendChild(li);

    ingredientInput.value = '';
  } else {
    alert('Введите название ингредиента');
  }
});

3. Стилизация элементов:
Для лучшего пользовательского опыта можно добавить стили, чтобы выделить список ингредиентов или изменить внешний вид кнопки и поля ввода.

#ingredients-list {
  margin-bottom: 10px;
}

#ingredient-input {
  padding: 5px;
  margin-right: 10px;
}

#add-ingredient-btn {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

#ingredients {
  list-style-type: none;
}

Таким образом, при взаимодействии пользователя с кнопкой "Добавить ингредиент", будет добавляться новый элемент в список ингредиентов. Весь процесс управления и добавления данных происходит динамически с помощью JavaScript без необходимости перезагрузки страницы.