Создание списка покупок с использованием JavaScript – это важная задача для многих веб-разработчиков. В данной статье мы рассмотрим, как создать функциональный список покупок с помощью этого мощного языка программирования. Мы разберемся с использованием массивов, объектов, и HTML-элементов для создания интуитивно понятного приложения для покупок.

Делаем макет

Сначала сделаем основу всего.

Создание HTML-структуры

Для начала создадим базовую HTML-структуру нашей страницы для списка покупок. Вот пример:

«`html

<!DOCTYPE html>

<html>

<head>

<meta charset=»UTF-8″>

<title>Список покупок</title>

</head>

<body>

<h1>Список покупок</h1>

<input type=»text» id=»productInput» placeholder=»Введите продукт»>

<button onclick=»addProduct()»>Добавить</button>

<ul id=»shoppingList»>

</ul>

<script src=»shoppingList.js»></script>

</body>

</html>

«`

Использование JavaScript для создания списка покупок

Теперь, когда у нас есть основная HTML-структура, давайте создадим JavaScript-файл (`shoppingList.js`), чтобы начать работу над списком покупок.

«`javascript

// Определение массива для хранения продуктов

const shoppingList = [];

// Функция для добавления продукта в список

function addProduct() {

const productInput = document.getElementById(«productInput»);

const product = productInput.value.trim();

if (product) {

shoppingList.push(product);

productInput.value = «»;

displayShoppingList();

}

}

// Функция для отображения списка покупок

function displayShoppingList() {

const shoppingListContainer = document.getElementById(«shoppingList»);

shoppingListContainer.innerHTML = «»;

shoppingList.forEach((product, index) => {

const listItem = document.createElement(«li»);

listItem.textContent = `${product} (Количество: 1)`;

const deleteButton = document.createElement(«button»);

deleteButton.textContent = «Удалить»;

deleteButton.onclick = () => removeProduct(index);

listItem.appendChild(deleteButton);

shoppingListContainer.appendChild(listItem);

});

}

// Функция для удаления продукта из списка

function removeProduct(index) {

shoppingList.splice(index, 1);

displayShoppingList();

}

«`

В этом коде мы создаем массив `shoppingList`, который будет хранить наши продукты. Мы также создаем функции `addProduct()`, `displayShoppingList()`, и `removeProduct()`, чтобы добавлять, отображать и удалять продукты из списка соответственно.

Работа с данными пользователя

Теперь, когда у нас есть основная логика JavaScript, давайте рассмотрим, как работать с данными пользователя. Пользователь может ввести название продукта в поле ввода и нажать «Добавить», чтобы добавить его в список. После этого мы отобразим список с возможностью удаления продуктов.

Использование объектов для учета количества

Для более детального учета количества каждого продукта мы можем использовать объекты. Вместо массива `shoppingList` мы будем использовать объект, где ключами будут названия продуктов, а значениями — количество каждого продукта.

«`javascript

// Определение объекта для хранения продуктов и их количества

const shoppingList = {};

// Функция для добавления продукта в список

function addProduct() {

const productInput = document.getElementById(«productInput»);

const product = productInput.value.trim();

if (product) {

if (shoppingList[product]) {

shoppingList[product] += 1;

} else {

shoppingList[product] = 1;

}

productInput.value = «»;

displayShoppingList();

}

}

«`

Теперь мы используем объект `shoppingList` для хранения информации о продуктах и их количестве. Если продукт уже существует в списке, мы увеличиваем его количество на 1; в противном случае, мы добавляем новый продукт с начальным количеством 1.

Интерактивный интерфейс для выбора количества

Давайте сделаем наш интерфейс более интерактивным, позволив пользователю выбирать количество каждого продукта.

«`javascript

// Функция для отображения списка покупок

function displayShoppingList() {

const shoppingListContainer = document.getElementById(«shoppingList»);

shoppingListContainer.innerHTML = «»;

for (const product in shoppingList) {

const listItem = document.createElement(«li»);

const productCount = shoppingList[product];

const nameLabel = document.createElement(«span»);

nameLabel.textContent = `${product} (Количество: `;

const countInput = document.createElement(«input»);

countInput.type = «number»;

countInput.value = productCount;

countInput.min = 1;

countInput.onchange = (event) => updateProductCount(product, event.target.value);

const closeBracket = document.createElement(«span»);

closeBracket.textContent = «)»;

const deleteButton = document.createElement(«button»);

deleteButton.textContent = «Удалить»;

deleteButton.onclick = () => removeProduct(product);

listItem.appendChild(nameLabel);

listItem.appendChild(countInput);

listItem.appendChild(closeBracket);

listItem.appendChild(deleteButton);

shoppingListContainer.appendChild(listItem);

}

}

«`

Теперь мы отображаем каждый продукт в списке с полем ввода для выбора количества и кнопкой «Удалить». При изменении количества вызывается функция `updateProductCount()`, которая обновляет количество продукта в объекте `shoppingList`.

Заключение

Создание списка покупок с использованием JavaScript – это интересная задача, которая может помочь улучшить навыки программирования и взаимодействия с пользователем. Мы рассмотрели основы создания такого списка, включая использование массивов и объектов, а также создание интерактивного интерфейса для ввода и изменения количества продуктов.