From 4e75e26de02faf4cf30ea3db2aad0fad06f6a07b Mon Sep 17 00:00:00 2001 From: Korgta Date: Thu, 18 Feb 2021 16:52:29 +0400 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20ma?= =?UTF-8?q?in.js=20index.html=20style.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- HW#1/project/css/style.css | 47 ++++++++++++++++++++++++++++++++++++++ HW#1/project/index.html | 17 ++++++++++++++ HW#1/project/js/main.js | 26 +++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 HW#1/project/css/style.css create mode 100644 HW#1/project/index.html create mode 100644 HW#1/project/js/main.js 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..e6f0d11 --- /dev/null +++ b/HW#1/project/index.html @@ -0,0 +1,17 @@ + + + + + + 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..b76b60e --- /dev/null +++ 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 ` +
+ ${title} +
+

${title}

+

${price}

+ +
+
+ ` +}; + +const render = (products) => { + document.querySelector('.products').innerHTML = products.map(item => renderProduct(item.title, item.id, item.price)).join(''); +}; + +render(data); +console.log(data) \ No newline at end of file