GeekBrainsTutorial · PeregudovN · Feb 18, 2021 · Feb 18, 2021 · Feb 18, 2021 · Feb 22, 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,19 @@
+<!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" onclick="sum()">Cart</button>
+    </header>
+    <main>
+        <div class="products">
+            <div class="cart"></div>
+        </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,34 @@
+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('');
+};
+
+let sum= () =>{
+    let sum = 0;
+
+    for(let products of data){
+        sum +=products.price
+    }
+    return sum;
+ }
+render(data);
+console.log(data)
diff --git a/HW#2/burger.jpg b/HW#2/burger.jpg
diff --git a/HW#2/css/style.css b/HW#2/css/style.css
@@ -0,0 +1,69 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+header{
+    background-image: url(/burger.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 0 -90px;
+    width: 100%;
+    height: 200px;
+
+}
+header p {
+    color: #fff;
+    font-size: 40px;
+    position: relative;
+    margin-left: 50px;
+    top: 50px;
+}
+menu{
+    width: 100%;
+    height: 210px;
+    background-color: #eee;
+}
+aside{
+    display: flex;
+    justify-content: center;
+}
+aside button{
+    width: 300px;
+    height: 100px;
+    margin: 20px;
+}
+.fill{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+.fill-item{
+    border: 1px solid black;
+    padding: 5px;
+    margin: 10px;
+}
+.burger{
+    border-top: 2px solid red;
+    display: flex;
+    width: 100%;
+    height: 500px;
+    background-color: #eee;
+}
+.burger img{
+    margin: 10px;
+    width: 400px;
+    height: 250px;
+}
+.fill-list{
+    display: flex;
+}
+.fill-list p{
+    color: red;
+    margin: 5px;
+}
+.sum{
+    margin-left: 100px;
+}
+.sum h2{
+    margin: 50px;
+}
diff --git a/HW#2/index.html b/HW#2/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Бургеры</title>
+</head>
+<body>
+    <header>
+        <p>Burger.Club</p>
+    </header>
+    <aside>
+        <button class="max" onclick="renderBurgerX()">Большой Бургер</button>
+        <button class="min" onclick="renderBurgerN()">Маленький Бургер</button>
+    </aside>
+    <menu>
+        <div class="fill"></div>
+    </menu>
+    <div class="burger">
+       <h1>ТВОЙ БУРГЕР ПОЯВИТСЯ ТУТ!!!</h1>
+    </div>
+    <div class="sum">
+        <h2 class="summa">Стоймость Будрега: <span class="rub"></span></h2>
+        <h2 class="colories">Количество колорий: <span class="colorii"></span></h2>
+    </div> 
+    <script src="/js/main.js">
+    </script>
+</body>
+</html>
diff --git a/HW#2/js/main.js b/HW#2/js/main.js
@@ -0,0 +1,126 @@
+const data = [
+    chees ={ titleA: 'Сыр', idA: 1, priceA: 10, coloriesA:20 },
+    salat ={ titleA: 'Салат', idA: 2, priceA: 20, coloriesA:5 },
+    potates ={ titleA: 'Картошка', idA: 3, priceA: 15, coloriesA:10 },
+    spices ={ titleA: 'Специи', idA: 4, priceA: 15, coloriesA:0 },
+    mionez ={ titleA: 'Майонез', idA: 5, priceA: 20, coloriesA:5}
+];
+const renderProduct = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
+    return `
+        <div class="fill-item">
+        <img src = "${imgA}" alt = "${titleA}">
+            <legend >
+                <h3>${titleA}</h3>
+                <p>${priceA} Рублей</p>
+                <p>${coloriesA} Коллорий</p>
+                <button id="fill-btn" onclick="renderSpice${idA}()"><b>ДОБАВИТЬ</b></button>
+            </legend>
+        </div>
+    `
+};
+
+const render = (fill) => {
+    document.querySelector('.fill').innerHTML = fill.map(item => renderProduct(item.titleA, item.idA, item.priceA, item.coloriesA)).join('');
+};
+render(data);
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+const dataBurgerX = [
+    { titleB: 'Max', idB: 1, priceB: 100, coloriesB:40 }
+];
+const renderBurgerMAX = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
+    return `
+        <div class="fill-item">
+        <img src = "${imgA}" alt = "${titleA}">
+            <div>
+                <h2>${titleA}</h2>
+                <p>${priceA} Рублей</p>
+                <p>${coloriesA} Коллорий</p>
+                <b>С НАЧИНКОЙ:</b>
+                <div class="fill-list">
+
+                </div>
+            </div>
+        </div>
+    `
+};
+function renderBurgerX() { document.querySelector('.burger').innerHTML = dataBurgerX.map(item => renderBurgerMAX(item.titleB, item.idB, item.priceB, item.coloriesB)).join('');
+    console.log('nazhal MAX')    
+};
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+const dataBurgerN = [
+    { titleB: 'Min', idB: 2, priceB: 50, coloriesB:20 }
+];
+const renderBurgerMIN = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
+    return `
+        <div class="fill-item">
+        <img src = "${imgA}" alt = "${titleA}">
+            <div>
+                <h2>${titleA}</h2>
+                <p>${priceA} Рублей</p>
+                <p>${coloriesA} Коллорий</p>
+                <b>С НАЧИНКОЙ:</b>
+                <div class="fill-list">
+
+                </div>
+            </div>
+        </div>
+    `
+};
+function renderBurgerN() { document.querySelector('.burger').innerHTML = dataBurgerN.map(item => renderBurgerMAX(item.titleB, item.idB, item.priceB, item.coloriesB)).join('');
+    console.log('nazhal MIN')    
+};
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+function renderSpice1(){
+    const renderId = '<p>Сыр</p>'
+    document.querySelector('.fill-list').innerHTML += renderId
+    document.querySelector('.summa').innerHTML += sums()
+}
+function renderSpice2(){
+    const renderId = '<p>Салат</p>'
+    document.querySelector('.fill-list').innerHTML += renderId
+
+}
+function renderSpice3(){
+    const renderId = '<p>Картошка</p>'
+    document.querySelector('.fill-list').innerHTML += renderId
+
+}
+function renderSpice4(){
+    const renderId = '<p>Специи</p>'
+    document.querySelector('.fill-list').innerHTML += renderId
+
+}
+function renderSpice5(){
+    const renderId = '<p>Майонез</p>'
+    document.querySelector('.fill-list').innerHTML += renderId
+
+}
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+function sums (){
+    let sum = 0;
+    for(let products of data){
+        sum +=products.priceA  
+    }   
+    return sum;
+ }