diff --git a/HW#1/project/css/style.css b/HW#1/project/css/style.css new file mode 100644 index 0000000..a3c4756 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/HW#1/project/index.html b/HW#1/project/index.html new file mode 100644 index 0000000..cca8658 --- /dev/null +++ b/HW#1/project/index.html @@ -0,0 +1,19 @@ + + + + + + Title + + +
+ +
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/HW#1/project/js/main.js b/HW#1/project/js/main.js new file mode 100644 index 0000000..2a62b1c --- /dev/null +++ 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 ` +
+ ${title} +
+

${title}

+

${price}

+ +
+
+ ` +}; + +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) \ No newline at end of file diff --git a/HW#2/burger.jpg b/HW#2/burger.jpg new file mode 100644 index 0000000..9b6cfb2 Binary files /dev/null and b/HW#2/burger.jpg differ diff --git a/HW#2/css/style.css b/HW#2/css/style.css new file mode 100644 index 0000000..f25dfd4 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/HW#2/index.html b/HW#2/index.html new file mode 100644 index 0000000..6b5243c --- /dev/null +++ b/HW#2/index.html @@ -0,0 +1,31 @@ + + + + + + + + Бургеры + + +
+

Burger.Club

+
+ + +
+ +
+

ТВОЙ БУРГЕР ПОЯВИТСЯ ТУТ!!!

+
+
+

Стоймость Будрега:

+

Количество колорий:

+
+ + + \ No newline at end of file diff --git a/HW#2/js/main.js b/HW#2/js/main.js new file mode 100644 index 0000000..7ef12f9 --- /dev/null +++ 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 ` +
+ ${titleA} + +

${titleA}

+

${priceA} Рублей

+

${coloriesA} Коллорий

+ + +
+ ` +}; + +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 ` +
+ ${titleA} +
+

${titleA}

+

${priceA} Рублей

+

${coloriesA} Коллорий

+ С НАЧИНКОЙ: +
+ +
+
+
+ ` +}; +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 ` +
+ ${titleA} +
+

${titleA}

+

${priceA} Рублей

+

${coloriesA} Коллорий

+ С НАЧИНКОЙ: +
+ +
+
+
+ ` +}; +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 = '

Сыр

' + document.querySelector('.fill-list').innerHTML += renderId + document.querySelector('.summa').innerHTML += sums() +} +function renderSpice2(){ + const renderId = '

Салат

' + document.querySelector('.fill-list').innerHTML += renderId + +} +function renderSpice3(){ + const renderId = '

Картошка

' + document.querySelector('.fill-list').innerHTML += renderId + +} +function renderSpice4(){ + const renderId = '

Специи

' + document.querySelector('.fill-list').innerHTML += renderId + +} +function renderSpice5(){ + const renderId = '

Майонез

' + document.querySelector('.fill-list').innerHTML += renderId + +} +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// + +function sums (){ + let sum = 0; + for(let products of data){ + sum +=products.priceA + } + return sum; + } \ No newline at end of file