From 343c9b52c33f1de498b0b13e9c0e2d89fc2127b2 Mon Sep 17 00:00:00 2001 From: archi Date: Thu, 14 Jan 2021 12:20:17 +0300 Subject: [PATCH] lesson1 done --- css/style.css | 30 ++++++++++++++++++++++++++++++ index.html | 22 ++++++++++++++++++++++ js/main.js | 23 +++++++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..44eefd3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,30 @@ +.header { + display: flex; + flex-direction: row-reverse; + max-width: 1300px; + margin: 20px auto; + background-color: #fffab1; +} + +.products { + max-width: 1300px; + margin: 0 auto; + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; +} + +.product-item { + width: 20%; + box-sizing: border-box; + background-color: #e2e2e2; + padding: 10px; + border: #e2e2e2 solid; + border-radius: 5px; +} + +.btn-cart { + background-color: #7c5fff; + border-radius: 5px; + color: #ffffff; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..366fb6f --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + + + +
+ +
+
+
+
+ + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..9761d6f --- /dev/null +++ b/js/main.js @@ -0,0 +1,23 @@ + + +const products = [ + { id: 1, title: 'Notebook', price: 2000 }, + { id: 2, title: 'Keyboard', price: 200 }, + { id: 3, title: 'Mouse', price: 100 }, + { id: 4, title: 'Gamepad', price: 87 }, +]; + + +const renderProduct = (title = 'Товар отсутствует', price = 0) => { + return `
+

${title}

+

${price}

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