diff --git a/Lesson3/css/style.css b/Lesson3/css/style.css
index b2c5c40..f7236b0 100644
--- a/Lesson3/css/style.css
+++ b/Lesson3/css/style.css
@@ -16,6 +16,27 @@ button{
text-transform: uppercase;
font-weight: bold;
}
+.active{
+ display: block!important;
+}
+.cart{
+ position:relative;
+ width:500px;
+ display:flex;
+ justify-content:right;
+}
+.cart-block{
+ display: none;
+ position: absolute;
+ z-index: 1;
+ width: 65%;
+ height: auto;
+ left: 0;
+ top: 0px;
+ background: #fff;
+ color: #000;
+ padding: 25px;
+}
.btn-cart{
background-color: #fafafa;
padding: 10px 20px;
@@ -39,7 +60,7 @@ button{
grid-template-columns: repeat(auto-fit, 200px);
grid-template-rows: 1fr;
padding: 40px 80px;
- justify-content: space-between;
+ justify-content: left;
}
p {
margin: 0 0 5px 0;
@@ -74,4 +95,19 @@ img {
background-color: transparent;
border-color: #2f2a2d;
color: #2f2a2d;
+}
+.delete-btn{
+ margin-top: 5px;
+ background-color: #2f2a2d;
+ padding: 10px 20px;
+ border: 1px solid transparent;
+ color: rgb(238, 142, 142);
+ border-radius: 5px;
+ transition: all ease-in-out .4s;
+ cursor: pointer;
+}
+.delete-btn:hover{
+ background-color: transparent;
+ border-color: #2f2a2d;
+ color: #a54242;
}
\ No newline at end of file
diff --git a/Lesson3/index.html b/Lesson3/index.html
index c9c796e..de7d94d 100644
--- a/Lesson3/index.html
+++ b/Lesson3/index.html
@@ -9,7 +9,10 @@
Интернет-магазин
-
+
diff --git a/Lesson3/js/main.js b/Lesson3/js/main.js
index 3dc1148..7fbf51f 100644
--- a/Lesson3/js/main.js
+++ b/Lesson3/js/main.js
@@ -1,6 +1,6 @@
const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses';
-let getRequest = (url, cb) => { // не fetch
+/*let getRequest = (url, cb) => { // не fetch
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = () => {
@@ -13,13 +13,48 @@ let getRequest = (url, cb) => { // не fetch
}
};
xhr.send();
-};
+};*/
+let getRequest = (url) => {
+ return new Promise((resolve, reject)=>{
+ const xhr = new XMLHttpRequest();
+ xhr.open("GET", url, true);
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState === 4) {
+ if (xhr.status !== 200) {
+ console.log('Error');
+ reject(xhr.responseText);
+ } else {
+ console.log('ok');
+ resolve(xhr.responseText);
+ }
+ }
+ };
+ xhr.send();
+ });
+}
+
+let addEventToBtn = (className, container, req) => {
+ container.addEventListener('click', (e) => {
+ console.log(req);
+ if(e.target.classList.contains(className)){
+ console.log(e.target);
+ getRequest(`${API}/${req}`);
+ }
+ });
+}
class ProductList {
- constructor(container = '.products') {
+ constructor(
+ container = '.products',
+ textBtn = 'купить',
+ classBtn = 'buy-btn',
+ req = 'addToBasket.json'
+ ){
this.container = document.querySelector(container);
this._goods = [];
this._productsObjects = [];
+ this.textBtn = textBtn;
+ this.classBtn = classBtn;
// this._fetchGoods();
// this._render();
@@ -28,6 +63,7 @@ class ProductList {
this._goods = data;
this._render();
console.log(this.getTotalPrice());
+ addEventToBtn(classBtn, this.container, req);
});
}
@@ -52,8 +88,8 @@ class ProductList {
_render() {
for (const product of this._goods) {
- const productObject = new ProductItem(product);
- console.log(productObject);
+ const productObject = new ProductItem(product, this.textBtn, this.classBtn);
+ //console.log(productObject);
this._productsObjects.push(productObject);
this.container.insertAdjacentHTML('beforeend', productObject.getHTMLString());
@@ -62,25 +98,58 @@ class ProductList {
}
class ProductItem {
- constructor(product, img = 'https://via.placeholder.com/200x150') {
- this.id = product.id;
- this.title = product.title;
+ constructor(
+ product,
+ btnText,
+ classBtn = 'buy-btn',
+ img = 'https://via.placeholder.com/200x150'
+ ){
+ this.id = product.id_product;
+ this.title = product.product_name;
this.price = product.price;
this.img = img;
+ this.btnText = btnText;
+ this.classBtn = classBtn;
}
-
getHTMLString() {
return `
${this.title}
${this.price} \u20bd
-
+
`;
}
}
-// const cart = new Cart();
-// const list = new ProductList(cart);
+class CartList extends ProductList{
+ constructor(
+ container = '.cart-block',
+ textBtn = 'удалить',
+ classBtn = 'delete-btn',
+ req = 'deleteFromBasket.json'
+ ){
+ super(container,textBtn,classBtn,req);
+ this.getProducts('getBasket.json')
+ .then((data) => {
+ this._goods = data;
+ this._render();
+ });
+ console.log(this.getTotalPrice());
+ console.log(this.classBtn, this.container);
+ this.open()
+ }
+ open(){
+ document.querySelector('.btn-cart').addEventListener('click', (e)=>{
+
+ e.target.nextElementSibling.classList.toggle('active');
+
+ });
+ }
+
+}
+
+
const list = new ProductList();
+const cartList = new CartList();