From 6fd9f113545c94eff3bb44a2cb0acef8576bad71 Mon Sep 17 00:00:00 2001 From: gas53 <45990653+GAS53@users.noreply.github.com> Date: Wed, 20 Apr 2022 12:13:26 +0300 Subject: [PATCH] Add files via upload --- app.js | 88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 71 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 242 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..bd46db4 --- /dev/null +++ b/app.js @@ -0,0 +1,88 @@ +let toBasketBtns = document.querySelectorAll('.toBasketBtn'); +toBasketBtns.forEach(function (btn) { + btn.addEventListener('click', function (event) { + let id = event.srcElement.dataset.id; + let price = event.srcElement.dataset.price; + let name = event.srcElement.dataset.name; + basket.addProduct({ id: id, price: price, name: name }); + }); +}); + +function get_prod_name() { + const entities = ['phone', 'Notebook', 'tv']; + const colors = ['Samsung', 'Lg', 'Abble', 'Sony']; + return colors[randomInt(0, colors.length - 1)] + ' ' + entities[randomInt(0, entities.length - 1)]; + +} + + +function randomInt(min, max) { + let rand = min + Math.random() * (max + 1 - min); + return Math.floor(rand); +} + + +function render_prod_name() { + let all_names = document.querySelectorAll('.prod_name') + for (i=0;i + ${product.id} + ${product.name} + ${product.price} + 1 + + `; + let tbody = document.querySelector('tbody'); + tbody.insertAdjacentHTML('beforeend', productRow); + }, +}; \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..352f3f0 --- /dev/null +++ b/index.html @@ -0,0 +1,83 @@ + + + + + + + Document + + + + +
+ + +
+ + +
+
+
+ +
+ 120 + +
+ +
+
+ +
+ 75 + +
+ +
+
+
+ +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f211c61 --- /dev/null +++ b/style.css @@ -0,0 +1,71 @@ +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +header { + height: 80px; + background: #444; + color: white; + display: flex; + justify-content: space-between; + align-items: center; + padding: 20px; +} + +main { + display: flex; + justify-content: space-between; + padding: 20px; + flex-wrap: wrap; +} + +.product-card { + width: 30%; + padding: 10px; + border: 1px solid #444; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; +} + +.product-card__img-wrapper{ + display: flex; + justify-content: space-around; + margin: 20px; +} + +.product-card__img--small { + width: 30% +} + +.product-card__title { + font-size: 20px; + color: #444; + margin: 10px; +} + +.product-card__price { + font-size: 16px; + color: firebrick; +} + +.product-card__btn { + background: firebrick; + margin: 10px; + padding: 10px 20px; + color: white; + border: 1px solid firebrick; + cursor: pointer; +} + +.product-card__btn:hover { + background: white; + color: firebrick; +} +.bucketPanel { + width: 400px; + padding: 10px; +}