ValeryBMSTU · Diamkey · Nov 21, 2024
diff --git a/docs/otchet.pdf b/docs/otchet.pdf
diff --git a/projects/checkbox/index.html b/projects/checkbox/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="style.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+    <p>Выберите способ связи:</p>
+    <div>
+        <input type="checkbox" id="contactChoice1" name="food" value="120">
+        <label for="contactChoice1">Пирог с яблоком - 120руб</label>
+    </div>
+    <div>
+        <input type="checkbox" id="contactChoice2" name="food" value="80">
+        <label for="contactChoice2">Шоколадный кекс - 80 руб</label>
+    </div>
+    <div>
+        <input type="checkbox" id="contactChoice3" name="food" value="180">
+        <label for="contactChoice3">Чизкейк - 180руб</label>
+    </div>
+    <button class="btn">Отправить</button>
+    <p>Общая стоимость: <span class="result"></span></p>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/projects/checkbox/main.js b/projects/checkbox/main.js
@@ -0,0 +1,17 @@
+btnElement = document.querySelector(".btn"); //получаем элемент с классом btn
+resultElement = document.querySelector(".result"); //получаем элемент с классом result
+radioButtons = document.querySelectorAll('[name="food"]'); //получаем список всех checkbox элементов
+
+btnElement.addEventListener("click", function(){  //по нажатию на кнопку Отправить
+    let cost=0;
+    for (const radioButton of radioButtons){      //для каждой checkbox-кнопки из списка checkbox-кнопок
+        if(radioButton.checked){                  //если checkbox-кнопка выбрана
+            cost += parseFloat(radioButton.value)
+        }
+    }
+    if (cost != 0) { //если список не пустой (т.е. длина списка  не равна 0)
+        resultElement.textContent = cost + " руб"
+    } else {
+        resultElement.textContent = "ничего не выбрано." //иначе записываем в result, что ничего не выбрано
+    }
+});
diff --git a/projects/checkbox/style.css b/projects/checkbox/style.css
@@ -0,0 +1,3 @@
+div{
+    margin-bottom: 20px;
+}
diff --git a/projects/form/index.html b/projects/form/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="style.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+    <div>
+        <label for="name">Имя: </label>
+        <input type="text" id="name"></input>
+    </div>
+    <div>
+        <label for="surname">Фамилия: </label>
+        <input type="text" id="surname"></input>
+    </div>
+    <button onclick="myFunc()">Отправить</button>
+    <p>Ответ: <span id="result"></span></p>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/projects/form/main.js b/projects/form/main.js
@@ -0,0 +1,10 @@
+function myFunc() {
+    let nameInput = document.getElementById("name");
+    let surnameInput = document.getElementById("surname");
+    if (nameInput.value != "" && surnameInput.value !=""){
+        let resultElement = document.getElementById("result");  
+        resultElement.textContent = "Здравствуйте, " + nameInput.value + " " + surnameInput.value + "!";
+    } else{
+        alert("Вы не заполнили поля!");
+    }
+}  
diff --git a/projects/form/style.css b/projects/form/style.css
@@ -0,0 +1,10 @@
+div{
+    margin-bottom:15px;
+}
+
+input{
+    margin-left: 10px;
+}
+#name{
+    margin-left: 43px;
+}
diff --git a/projects/store/index.html b/projects/store/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="style.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+    <div class="form-group">
+        <input type="text" id="name" placeholder="Имя">
+        <input type="text" id="surname" placeholder="Фамилия">
+    </div>
+    <div class="menu-container">
+        <div class="menu-section">
+            <h2>Напитки</h2>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice1" name="drink" value="80" onchange="updateQuantity(this)">
+                <label for="Choice1">Эспрессо 80р.</label>
+                <input type="number" id="Choice1-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice2" name="drink" value="110" onchange="updateQuantity(this)">
+                <label for="Choice2">Американо 110р.</label>
+                <input type="number" id="Choice2-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice3" name="drink" value="120" onchange="updateQuantity(this)">
+                <label for="Choice3">Латте 120р.</label>
+                <input type="number" id="Choice3-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice4" name="food" value="90" onchange="updateQuantity(this)">
+                <label for="Choice4">Капучино с сиропом 90р</label>
+                <input type="number" id="Choice4-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+        </div>
+        <div class="menu-section">
+            <h2>Еда</h2>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice5" name="food" value="80" onchange="updateQuantity(this)">
+                <label for="Choice5">Шоколадный кекс 80р.</label>
+                <input type="number" id="Choice5-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice6" name="food" value="90" onchange="updateQuantity(this)">
+                <label for="Choice6">Черничный кекс 90р.</label>
+                <input type="number" id="Choice6-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+            <div class="menu-item">
+                <input type="checkbox" id="Choice7" name="food" value="100" onchange="updateQuantity(this)">
+                <label for="Choice7">Яблочный тарт 100р.</label>
+                <input type="number" id="Choice7-qty" value="0" min="0" onchange="updateTotal()">
+            </div>
+        </div>
+    </div>
+    <div id="Itogo">
+        <p>Итого: <span id="totalCost">0 р.</span></p>
+        <button id="btn" onclick="calculateTotal()">Оформить заказ</button>
+    </div>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/projects/store/main.js b/projects/store/main.js
@@ -0,0 +1,65 @@
+const userSurname = document.getElementById('surname');
+const userName = document.getElementById('name');
+const goodsElements = document.querySelectorAll('input[type="checkbox"]');
+const countElements = document.querySelectorAll('input[type="number"]');
+const btn = document.getElementById('btn');
+const resultElem = document.getElementById('totalCost');
+
+const prices = {
+    'Choice1': 80,
+    'Choice2': 110,
+    'Choice3': 120,
+    'Choice4': 90,
+    'Choice5': 80,
+    'Choice6': 90,
+    'Choice7': 100
+};
+
+function calculateTotal() {
+    let total = 0;
+    goodsElements.forEach((checkbox, index) => {
+        if (checkbox.checked) {
+            const quantityStr = countElements[index].value;
+            const priceStr = prices[checkbox.id];
+            const quantity = parseInt(quantityStr);
+            const price = parseFloat(priceStr);
+
+            if (!isNaN(quantity) && !isNaN(price) && quantity >= 0 && quantityStr.trim() !== '0') {
+                total += quantity * price;
+            } 
+        }
+    });
+    resultElem.textContent =`${total.toFixed(2)} р.`;
+}
+
+goodsElements.forEach((checkbox, index) => {
+    checkbox.addEventListener('change', () => {
+        const quantityInput = countElements[index];
+        if (checkbox.checked) {
+            quantityInput.value = 1;
+        } else {
+            quantityInput.value = 0;
+        }
+        calculateTotal();
+    });
+    countElements[index].addEventListener('change', () => {
+        const quantityStr = countElements[index].value;
+        if (quantityStr.trim() === '' || parseInt(quantityStr) < 0 || quantityStr.startsWith('0')) {
+            alert(`Некорректное значение количества "${quantityStr}". Пожалуйста, введите число больше или равное 1.`);
+            countElements[index].value = 1;
+        }
+        calculateTotal();
+    });
+});
+
+btn.addEventListener('click', () => {
+    const name = userName.value.trim();
+    const surname = userSurname.value.trim();
+    const total = resultElem.textContent;
+
+    if (name === '' || surname === '') {
+        alert('Вы не заполнили поля заказчика!');
+    } else {
+        alert(`Заказчик: ${name} ${surname}\nИтого: ${total}`);
+    }
+});
diff --git a/projects/store/style.css b/projects/store/style.css
@@ -0,0 +1,112 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #402e4f;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 40px;
+}
+
+h2 {
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 30px;
+}
+
+.form-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; 
+    margin-bottom: 40px;
+    margin-top: 50px;
+}
+
+.form-group input[type="text"] {
+    padding: 8px;
+    border: 1px solid #ccc;
+    background-color: #402e4f;
+    border-radius: 4px;
+    width: 48%; 
+}
+
+
+.menu-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.menu-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.menu-item label {
+    margin-left: 10px;
+}
+
+.menu-item input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    outline: none;
+    cursor: pointer;
+    margin-right: 8px;
+}
+
+.menu-item input[type="checkbox"]:checked {
+    background-color: #b230d9;
+    border-color: #7d189c;
+}
+
+.menu-item input[type="number"] {
+    padding: 5px;
+    border: 1px solid #ccc;
+    background-color: #402e4f;
+    color: #fff;
+    border-radius: 4px;
+    width: 40px;
+    margin-left: 10px;
+}
+
+#Itogo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+}
+
+#Itogo p {
+    margin-bottom: 10px;
+}
+
+button {
+    background-color: #b230d9;
+    border: none;
+    color: white;
+    padding: 10px 20px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+button:hover {
+    background-color: #7d189c;
+}