Skip to content

Commit cb1f071

Browse files
PeregudovNPeregudovN
committed
Сдаю ДЗGeekBrainsTutorial#2
Находится в папке HW#2
1 parent a5a9c4f commit cb1f071

File tree

6 files changed

+238
-2
lines changed

6 files changed

+238
-2
lines changed

‎HW#1/project/index.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@
77
</head>
88
<body>
99
<header>
10-
<button class="btn-cart">Cart</button>
10+
<button class="btn-cart" onclick="sum()">Cart</button>
1111
</header>
1212
<main>
13-
<div class="products"></div>
13+
<div class="products">
14+
<div class="cart"></div>
15+
</div>
1416
</main>
1517
<script src="js/main.js"></script>
1618
</body>

‎HW#1/project/js/main.js

+8
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,13 @@ const render = (products) => {
2222
document.querySelector('.products').innerHTML = products.map(item => renderProduct(item.title, item.id, item.price)).join('');
2323
};
2424

25+
let sum= () =>{
26+
let sum = 0;
27+
28+
for(let products of data){
29+
sum +=products.price
30+
}
31+
return sum;
32+
}
2533
render(data);
2634
console.log(data)

‎HW#2/burger.jpg

49.8 KB
Loading

‎HW#2/css/style.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
*{
2+
margin: 0px;
3+
padding: 0px;
4+
}
5+
header{
6+
background-image: url(/burger.jpg);
7+
background-repeat: no-repeat;
8+
background-size: cover;
9+
background-position: 0 -90px;
10+
width: 100%;
11+
height: 200px;
12+
13+
}
14+
header p {
15+
color: #fff;
16+
font-size: 40px;
17+
position: relative;
18+
margin-left: 50px;
19+
top: 50px;
20+
}
21+
menu{
22+
width: 100%;
23+
height: 210px;
24+
background-color: #eee;
25+
}
26+
aside{
27+
display: flex;
28+
justify-content: center;
29+
}
30+
aside button{
31+
width: 300px;
32+
height: 100px;
33+
margin: 20px;
34+
}
35+
.fill{
36+
display: grid;
37+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
38+
grid-template-rows: 1fr;
39+
}
40+
.fill-item{
41+
border: 1px solid black;
42+
padding: 5px;
43+
margin: 10px;
44+
}
45+
.burger{
46+
border-top: 2px solid red;
47+
display: flex;
48+
width: 100%;
49+
height: 500px;
50+
background-color: #eee;
51+
}
52+
.burger img{
53+
margin: 10px;
54+
width: 400px;
55+
height: 250px;
56+
}
57+
.fill-list{
58+
display: flex;
59+
}
60+
.fill-list p{
61+
color: red;
62+
margin: 5px;
63+
}
64+
.sum{
65+
margin-left: 100px;
66+
}
67+
.sum h2{
68+
margin: 50px;
69+
}

‎HW#2/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="css/style.css">
8+
<title>Бургеры</title>
9+
</head>
10+
<body>
11+
<header>
12+
<p>Burger.Club</p>
13+
</header>
14+
<aside>
15+
<button class="max" onclick="renderBurgerX()">Большой Бургер</button>
16+
<button class="min" onclick="renderBurgerN()">Маленький Бургер</button>
17+
</aside>
18+
<menu>
19+
<div class="fill"></div>
20+
</menu>
21+
<div class="burger">
22+
<h1>ТВОЙ БУРГЕР ПОЯВИТСЯ ТУТ!!!</h1>
23+
</div>
24+
<div class="sum">
25+
<h2 class="summa">Стоймость Будрега: <span class="rub"></span></h2>
26+
<h2 class="colories">Количество колорий: <span class="colorii"></span></h2>
27+
</div>
28+
<script src="/js/main.js">
29+
</script>
30+
</body>
31+
</html>

‎HW#2/js/main.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
const data = [
2+
chees ={ titleA: 'Сыр', idA: 1, priceA: 10, coloriesA:20 },
3+
salat ={ titleA: 'Салат', idA: 2, priceA: 20, coloriesA:5 },
4+
potates ={ titleA: 'Картошка', idA: 3, priceA: 15, coloriesA:10 },
5+
spices ={ titleA: 'Специи', idA: 4, priceA: 15, coloriesA:0 },
6+
mionez ={ titleA: 'Майонез', idA: 5, priceA: 20, coloriesA:5}
7+
];
8+
const renderProduct = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
9+
return `
10+
<div class="fill-item">
11+
<img src = "${imgA}" alt = "${titleA}">
12+
<legend >
13+
<h3>${titleA}</h3>
14+
<p>${priceA} Рублей</p>
15+
<p>${coloriesA} Коллорий</p>
16+
<button id="fill-btn" onclick="renderSpice${idA}()"><b>ДОБАВИТЬ</b></button>
17+
</legend>
18+
</div>
19+
`
20+
};
21+
22+
const render = (fill) => {
23+
document.querySelector('.fill').innerHTML = fill.map(item => renderProduct(item.titleA, item.idA, item.priceA, item.coloriesA)).join('');
24+
};
25+
render(data);
26+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
27+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
28+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
29+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
30+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
31+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
32+
const dataBurgerX = [
33+
{ titleB: 'Max', idB: 1, priceB: 100, coloriesB:40 }
34+
];
35+
const renderBurgerMAX = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
36+
return `
37+
<div class="fill-item">
38+
<img src = "${imgA}" alt = "${titleA}">
39+
<div>
40+
<h2>${titleA}</h2>
41+
<p>${priceA} Рублей</p>
42+
<p>${coloriesA} Коллорий</p>
43+
<b>С НАЧИНКОЙ:</b>
44+
<div class="fill-list">
45+
46+
</div>
47+
</div>
48+
</div>
49+
`
50+
};
51+
function renderBurgerX() { document.querySelector('.burger').innerHTML = dataBurgerX.map(item => renderBurgerMAX(item.titleB, item.idB, item.priceB, item.coloriesB)).join('');
52+
console.log('nazhal MAX')
53+
};
54+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
55+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
56+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
57+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
58+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
59+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
60+
const dataBurgerN = [
61+
{ titleB: 'Min', idB: 2, priceB: 50, coloriesB:20 }
62+
];
63+
const renderBurgerMIN = (titleA, idA, priceA ,coloriesA, imgA = "https://placehold.it/200x100") => {
64+
return `
65+
<div class="fill-item">
66+
<img src = "${imgA}" alt = "${titleA}">
67+
<div>
68+
<h2>${titleA}</h2>
69+
<p>${priceA} Рублей</p>
70+
<p>${coloriesA} Коллорий</p>
71+
<b>С НАЧИНКОЙ:</b>
72+
<div class="fill-list">
73+
74+
</div>
75+
</div>
76+
</div>
77+
`
78+
};
79+
function renderBurgerN() { document.querySelector('.burger').innerHTML = dataBurgerN.map(item => renderBurgerMAX(item.titleB, item.idB, item.priceB, item.coloriesB)).join('');
80+
console.log('nazhal MIN')
81+
};
82+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
83+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
84+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
85+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
86+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
87+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
88+
function renderSpice1(){
89+
const renderId = '<p>Сыр</p>'
90+
document.querySelector('.fill-list').innerHTML += renderId
91+
document.querySelector('.summa').innerHTML += sums()
92+
}
93+
function renderSpice2(){
94+
const renderId = '<p>Салат</p>'
95+
document.querySelector('.fill-list').innerHTML += renderId
96+
97+
}
98+
function renderSpice3(){
99+
const renderId = '<p>Картошка</p>'
100+
document.querySelector('.fill-list').innerHTML += renderId
101+
102+
}
103+
function renderSpice4(){
104+
const renderId = '<p>Специи</p>'
105+
document.querySelector('.fill-list').innerHTML += renderId
106+
107+
}
108+
function renderSpice5(){
109+
const renderId = '<p>Майонез</p>'
110+
document.querySelector('.fill-list').innerHTML += renderId
111+
112+
}
113+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
114+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
115+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
116+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
117+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
118+
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
119+
120+
function sums (){
121+
let sum = 0;
122+
for(let products of data){
123+
sum +=products.priceA
124+
}
125+
return sum;
126+
}

0 commit comments

Comments
 (0)