baluTurnup · baluTurnup · Nov 19, 2024
diff --git a/docs/Lr4.pdf b/docs/Lr4.pdf
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Приветствие</title>
+    <script defer src="main.js"></script>
+
+</head>
+<body>
+    <h1>Введите имя и фамилию</h1>
+
+    <label for="firstName">Имя:</label>
+    <input type="text" id="firstName" placeholder="Введите имя">
+
+    <label for="lastName">Фамилия:</label>
+    <input type="text" id="lastName" placeholder="Введите фамилию">
+
+    <button id="submitBtn">Отправить</button>
+
+    <div id="greeting"></div>
+</body>
+</html>
diff --git a/docs/index1.html b/docs/index1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>checkbox</title>
+    <script defer src="main.js"></script>
+
+</head>
+<body>
+    <form id="productForm">
+        <h1>выберите товары</h1>
+
+
+        <input type="checkbox" id="first" name="food" value="100">
+        <label for="first">Товар 1 (100 рублей)</label>
+
+        <input type="checkbox" id="second" name="food" value="150">
+        <label for="second">Товар 2 (150 рублей)</label>
+        <input type="checkbox" id="third" name="food" value="180">
+        <label for="third">Товар 3 (180 рублей)</label>
+
+        <button type="button" id="Btn">выбрать</button>
+
+    </form>
+    <h2>Общая стоимость: <span id="totalCost">0</span> руб.</h2>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/docs/index2.html b/docs/index2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Оформление заказа</title>
+</head>
+<body>
+
+    <h1>Оформление заказа</h1>
+
+    <!-- Поля ввода для Фамилии и Имени -->
+    <label for="lastName">Фамилия:</label>
+    <input type="text" id="lastName" placeholder="Введите фамилию"><br><br>
+
+    <label for="firstName">Имя:</label>
+    <input type="text" id="firstName" placeholder="Введите имя"><br><br>
+
+    <!-- Список товаров -->
+    <h2>Товары:</h2>
+
+    <!-- Пример товара -->
+    <div>
+        <input type="checkbox" id="item1" class="product" data-price="150">
+        <label for="item1">Капучино (150 руб.)</label>
+        <input type="number" id="quantity1" class="quantity" min="0" value="0">
+    </div>
+
+    <div>
+        <input type="checkbox" id="item2" class="product" data-price="100">
+        <label for="item2">Эспрессо (100 руб.)</label>
+        <input type="number" id="quantity2" class="quantity" min="0" value="0">
+    </div>
+
+    <div>
+        <input type="checkbox" id="item3" class="product" data-price="200">
+        <label for="item3">Латте (200 руб.)</label>
+        <input type="number" id="quantity3" class="quantity" min="0" value="0">
+    </div>
+
+    <!-- Общая сумма -->
+    <h3>Итого: <span id="totalPrice">0</span> руб.</h3>
+
+    <!-- Кнопка для оформления заказа -->
+    <button id="orderBtn">Оформить заказ</button>
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/docs/main.js b/docs/main.js
@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const firstNameInput = document.getElementById('firstName');
+    const lastNameInput = document.getElementById('lastName');
+    const submitBtn = document.getElementById('submitBtn');
+    const greetingDiv = document.getElementById('greeting');
+
+    submitBtn.addEventListener('click', () => {
+        const firstName = firstNameInput.value.trim();
+        const lastName = lastNameInput.value.trim();
+
+        if (firstName && lastName) {
+            greetingDiv.textContent = `привет, ${firstName} ${lastName}!`;
+        } else {
+            greetingDiv.textContent = 'Пожалуйста, введите имя и фамилию.';
+        }
+    });
+});
diff --git a/docs/main1.js b/docs/main1.js
@@ -0,0 +1,15 @@
+document.getElementById('Btn').addEventListener('click', function() {
+
+    const checkboxes = document.querySelectorAll('input[name="food"]:checked');
+
+
+    let totalCost = 0;
+
+
+    checkboxes.forEach(function(checkbox) {
+        totalCost += parseInt(checkbox.value); 
+    });
+
+
+    document.getElementById('totalCost').textContent = totalCost;
+});
diff --git a/docs/main2.js b/docs/main2.js
@@ -0,0 +1,85 @@
+// Функция для пересчета общей суммы
+function updateTotalPrice() {
+    let total = 0;
+
+    // Получаем все товары
+    const products = document.querySelectorAll('.product');
+
+    products.forEach(function(product) {
+        // Проверяем, выбран ли товар (чекбокс активен)
+        if (product.checked) {
+            // Получаем цену и количество товара
+            const price = parseFloat(product.getAttribute('data-price'));
+            const quantityField = document.getElementById(`quantity${product.id.slice(-1)}`);
+            let quantity = parseInt(quantityField.value);
+
+            // Проверка на корректность ввода
+            if (isNaN(quantity) || quantity <= 0) {
+                quantity = 0; // Обнуляем некорректные значения
+            }
+
+            // Если товар выбран, добавляем его стоимость к общей сумме
+            total += price * quantity;
+        }
+    });
+
+    // Обновляем итоговую сумму на странице
+    document.getElementById('totalPrice').textContent = total;
+}
+
+// Функция для обработки выбора товара (чекбокса)
+function handleCheckboxChange(event) {
+    const checkbox = event.target;
+    const quantityField = document.getElementById(`quantity${checkbox.id.slice(-1)}`);
+
+    // Если чекбокс отмечен, устанавливаем количество 1, если снят - 0
+    if (checkbox.checked) {
+        quantityField.value = 1;
+    } else {
+        quantityField.value = 0;
+    }
+
+    // Пересчитываем итоговую сумму
+    updateTotalPrice();
+}
+
+// Функция для обработки изменения количества
+function handleQuantityChange(event) {
+    const quantityField = event.target;
+    const value = parseInt(quantityField.value);
+
+    // Если количество некорректное, обнуляем его
+    if (isNaN(value) || value < 0) {
+        quantityField.value = 0;
+    }
+
+    // Если товар не выбран, обнуляем количество
+    const productCheckbox = document.getElementById(`item${quantityField.id.slice(-1)}`);
+    if (!productCheckbox.checked) {
+        quantityField.value = 0;
+    }
+
+    // Пересчитываем итоговую сумму
+    updateTotalPrice();
+}
+
+// Функция для оформления заказа
+function handleOrder() {
+    const lastName = document.getElementById('lastName').value.trim();
+    const firstName = document.getElementById('firstName').value.trim();
+    const totalPrice = document.getElementById('totalPrice').textContent;
+
+    // Выводим модальное окно с информацией о заказе
+    alert(`Заказчик: ${lastName} ${firstName}\nИтого: ${totalPrice} руб.`);
+}
+
+// Добавляем обработчики событий
+document.querySelectorAll('.product').forEach(function(checkbox) {
+    checkbox.addEventListener('change', handleCheckboxChange);
+});
+
+document.querySelectorAll('.quantity').forEach(function(quantityField) {
+    quantityField.addEventListener('input', handleQuantityChange);
+});
+
+document.getElementById('orderBtn').addEventListener('click', handleOrder);