GeekBrainsTutorial · PeregudovN · Feb 18, 2021 · Feb 18, 2021 · Feb 25, 2021 · Mar 4, 2021
diff --git a/HW#1/project/css/style.css b/HW#1/project/css/style.css
@@ -0,0 +1,47 @@
+*{
+    margin: 0 auto;
+    padding: auto;
+
+}
+body{
+    background-color: #dedaeedd;
+}
+header{
+    display: grid;
+    grid-template-rows: 1fr;
+    justify-content: flex-end;
+    background-color: #cccc;
+}
+.btn-cart{
+    padding: 10px 50px;
+    background-color: #fff;
+}
+main{
+    display: grid;
+    grid-template-columns: 1fr;
+}
+.products{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+.product-item{
+    border: 1px solid black;
+    display: block;
+    width: 350px;
+    height: 200px;
+    margin: 5px;
+}
+.product-item h3{
+    color: red;
+    font-size: 30px;
+    margin: 5px;
+}
+.product-item p{
+    font-weight: 600;
+    font-size: 18px;
+    margin-left: 10px;
+}
+button{
+    margin: 5px;
+}
diff --git a/HW#1/project/index.html b/HW#1/project/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Title</title>
+</head>
+<body>
+    <header>
+        <button class="btn-cart">Cart</button>
+    </header>
+    <main>
+        <div class="products"></div>
+    </main>
+    <script src="js/main.js"></script>
+</body>
+</html>
diff --git a/HW#1/project/js/main.js b/HW#1/project/js/main.js
@@ -0,0 +1,26 @@
+const data = [
+    { title: 'Notebook', id: 1, price: 2000 },
+    { title: 'Keyboard', id: 2, price: 200 },
+    { title: 'Mouse', id: 3, price: 100 },
+    { title: 'Gamepad', id: 4, price: 87 },
+    { title: 'Новый Товар', id: 5 }
+];
+const renderProduct = (title, id, price = 'Цена товара', img = "https://placehold.it//150x100") => {
+    return `
+        <div class="product-item">
+        <img src = "${img}" alt = "${title}">
+            <div>
+                <h3>${title}</h3>
+                <p>${price}</p>
+                <button>Купить</button>
+            </div>
+        </div>
+    `
+};
+
+const render = (products) => {
+    document.querySelector('.products').innerHTML = products.map(item => renderProduct(item.title, item.id, item.price)).join('');
+};
+
+render(data);
+console.log(data)
diff --git a/HW#3/.DS_Store b/HW#3/.DS_Store
diff --git a/HW#3/.idea/$CACHE_FILE$ b/HW#3/.idea/$CACHE_FILE$
diff --git a/HW#3/.idea/inspectionProfiles/profiles_settings.xml b/HW#3/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/HW#3/.idea/jsLibraryMappings.xml b/HW#3/.idea/jsLibraryMappings.xml
diff --git a/HW#3/.idea/lesson3_18.02.21.iml b/HW#3/.idea/lesson3_18.02.21.iml
diff --git a/HW#3/.idea/misc.xml b/HW#3/.idea/misc.xml
diff --git a/HW#3/.idea/modules.xml b/HW#3/.idea/modules.xml
diff --git a/HW#3/.idea/workspace.xml b/HW#3/.idea/workspace.xml
diff --git a/HW#3/hamburger/.DS_Store b/HW#3/hamburger/.DS_Store
diff --git a/HW#3/hamburger/burgerFactory.js b/HW#3/hamburger/burgerFactory.js
@@ -0,0 +1,98 @@
+class Param {
+    name = '';
+    price = 0;
+    calories = 0;
+
+    constructor(el) {
+        this.name = el.value;
+        ({price: this.price, cal: this.calories} = Burger.burgerParams[this.name])
+    }
+}
+
+class Burger {
+    static burgerParams = {
+        big: {
+            price: 100,
+            cal: 40
+        },
+        small: {
+            price: 50,
+            cal: 20
+        },
+        salad: {
+            price: 20,
+            cal: 5
+        },
+        cheese: {
+            price: 10,
+            cal: 20
+        },
+        potato: {
+            price: 15,
+            cal: 10
+        },
+        mayo: {
+            price: 20,
+            cal: 5
+        },
+        spices: {
+            price: 15,
+            cal: 0
+        }
+    };
+
+    size = null;
+    add = null;
+    toppings = [];
+
+    constructor(size, add, toppings) {
+        this.size = new Param(this._select(size));
+        this.add = new Param(this._select(add));
+        this.toppings = this._selectAll(toppings).map(el => new Param(el));
+    }
+
+    get price() {
+        return this._sum('price')
+    }
+
+    get calories() {
+        return this._sum('calories')
+    }
+
+    showSum(price, calories) {
+        document.querySelector(price).textContent = this.price;
+        document.querySelector(calories).textContent = this.calories;
+    }
+
+    _select(name) {
+        return document.querySelector(`input[name="${name}"]:checked`);
+    }
+
+    _selectAll(name) {
+        return [...document.querySelectorAll(`input[name="${name}"]:checked`)];
+    }
+
+    _sum(value) {
+        let result = this.size[value] + this.add[value];
+        this.toppings.forEach(topping => result += topping[value]);
+        return result;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/HW#3/hamburger/burger_calc.html b/HW#3/hamburger/burger_calc.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<form action="#" id="hamburger-form">
+    <fieldset id="hamburger-fieldset">
+        <h3 id="hamburger-top">Составь свой бургер.</h3>
+        <fieldset class="hamburger-fieldset-inside">
+            <h4>Выберите размер бургера:</h4>
+            <input type="radio" name="size" id="bigburger" value="big" class="hamburger-input" checked>
+            <label for="bigburger">Большой (100 рублей, 40 калорий)</label><br>
+            <input type="radio" name="size" id="smallburger" value="small" class="hamburger-input">
+            <label for="smallburger">Малый (50 рублей, 20 калорий)</label>
+        </fieldset>
+
+        <fieldset class="hamburger-fieldset-inside">
+            <h4>Выберите начинку бургера:</h4>
+            <input type="radio" name="add" id="cheese" value="cheese" class="hamburger-input" checked>
+            <label for="cheese">Сыр (10 рублей, 20 калорий)</label><br>
+            <input type="radio" name="add" id="salad" value="salad" class="hamburger-input">
+            <label for="salad">Салат (20 рублей, 5 калорий)</label><br>
+            <input type="radio" name="add" id="potato" value="potato" class="hamburger-input">
+            <label for="potato">Картофель (15 рублей, 10 калорий)</label><br>
+        </fieldset>
+
+        <fieldset class="hamburger-fieldset-inside">
+            <h4>Выберите доп. опцию:</h4>
+            <input type="checkbox" checked name="topings" id="seasoning" value="spices" class="hamburger-input">
+            <label for="seasoning">Посыпать приправой (15 рублей, 0 калорий)</label><br>
+            <input type="checkbox" name="topings" id="mayonnaise" value="mayo" class="hamburger-input">
+            <label for="mayonnaise">Полить майонезом (20 рублей, 5 калорий)</label><br>
+        </fieldset>
+
+        <div id="check">Собрать бургер</div>
+
+        <p id="result">Итоговая стоимость: <span id="price">0</span> <br>
+            Кол-во калорий: <span id="calories">0</span></p>
+    </fieldset>
+</form>
+<script src="burgerFactory.js"></script>
+<script>
+    window.onload = () => {
+        document.getElementById('check').addEventListener('click', () => {
+            let burger = new Burger('size', 'add', 'topings');
+            console.log(burger);
+            burger.showSum('#price', '#calories');
+        })
+    }
+</script>
+</body>
+
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+