Merge pull request #7 from AlbShar/feature/cart

Feature/cart

README.md

@@ -11,9 +11,10 @@ https://albshar.github.io/ubereats/
 ## Features
 
 - Light/dark mode toggle
-- Filter/Search list
-- Login form and signup page 
-- Slider and tabs
+- Search list
+- Signup page with function compare of passwords
+- Slider/tabs
+- Shopping cart
 
 
 ## Preview
@@ -23,17 +24,17 @@ https://albshar.github.io/ubereats/
 
 ## Tech Stack
 
-- HTML, SCSS, vanilla Javascript;
-- Linter JSHint;
-- Methodology BEM;
-- Perfect Pixel;
-- Grid system flexboxgrid2.
+- HTML, SCSS, vanilla Javascript
+- Linter JSHint
+- Methodology BEM
+- Perfect Pixel
+- Grid system flexboxgrid2
+- LocalStorage
 
 
 ## Lessons Learned
 
-What did you learn while building this project? What challenges did you face and how did you overcome them?
-
 - Creating UI-components with vanilla Javascript;
 - Debugging websites on iOS devices (iPhone, iPad);
+- Refactor JS script;
 

blocks/common.blocks/actions/__cart-text/actions__cart-text.scss

@@ -3,7 +3,9 @@
         font: 400 1rem var(--font-family);
         color: var(--color-text-title);
         margin-left: 10px;
-    }
-}
-
 
+        @media screen and (min-width: 460px) {
+            display: none;
+        }
+    }
+}

blocks/common.blocks/actions/__cart/actions__cart.scss

@@ -1,6 +1,5 @@
 .actions {
     &__cart {
-        filter: var(--filter);
 
         @media screen and (min-width: 1123.8px) {
             margin-right: 15px;

blocks/common.blocks/actions/actions.scss

@@ -9,6 +9,7 @@
         z-index: 3;
         background-color: var(--color-bg);
         width: 100vw;
+        height: 100vh;
         max-height: calc(100% - 62px);
         transform: translateX(150%);
         transition: transform 0.9s ease-in-out;
@@ -31,8 +32,5 @@
 @import "__sign-in/actions__sign-in.scss";
 @import "__sign-in-text/actions__sign-in-text.scss";
 @import "./__cart/actions__cart.scss";
-@import "./__cart-text/actions__cart-text.scss";
 @import "./_visible/actions_visible.scss";
-@import "./__cart-svg/actions__cart-svg.scss";
-@import "./__cart-quantity/actions__cart-quantity.scss";
-@import "./__cart-content/actions__cart-content.scss";
+@import "./__cart-text/actions__cart-text.scss";

blocks/common.blocks/actions/showLoginForm.js

@@ -1,10 +1,8 @@
 const modal = document.querySelector('#modal');
 const btnSignIn = document.querySelector('#signIn');
+const showLoginForm = () => {
+    modal.style.display = "block";
+};
 
-function showLoginForm() {
-    btnSignIn.onclick = () => {
-        modal.style.display = "block";
-    };
-}
 
-export {showLoginForm, modal};
+export {showLoginForm, btnSignIn, modal};

blocks/common.blocks/btn/btn.scss

@@ -0,0 +1,15 @@
+.btn {
+        border: none;
+        background-color: #2f7007;
+        padding: 7px 15px;
+        font: 500 0.9rem var(--font-family);
+        color: #fff;
+        border-radius: 5px;
+        text-transform: uppercase;
+        cursor: pointer;
+
+        &[disabled] {
+           opacity: 0.5;
+        }
+
+}

blocks/common.blocks/burger/burger.js

@@ -1,58 +1,57 @@
+import {cartQuantity} from "../cart/cart.js";
 const burger = document.querySelector('#burger');
 const nav = document.querySelector('#menu');
 const navItems = nav.querySelectorAll('[data-about="actions_item"]');
 const basketWrapper = document.querySelector('#basketWrapper');
-const basketText = document.createElement('div');
-const switchText = document.createElement('div');
+const basketText = document.createElement('span');
+const switchText = document.createElement('span');
 const iconRegistr = document.createElement('span');
 const iconSignIn = document.createElement('span');
 const switchWrapper = document.querySelector('#switchWrapper');
 const registWrapper = document.querySelector('#registWrapper');
 const signInWrapper = document.querySelector('#signInWrapper');
-let clickEvent = ('click' || 'touchstart' || 'touchend' || 'touchcancel' || 'touchmove');
+const cartIcon = document.querySelector('.cart__svg');
 
-
-function toggleBurger() {
-    burger.addEventListener(clickEvent ,() => {
+const toggleBurger = () => {
     document.body.classList.toggle('stop-scroll');
     burger.classList.toggle('burger_active');
     nav.classList.toggle('actions_visible');
 
-    basketText.innerHTML = "Корзина";
-    basketText.className = 'actions__cart-text';
-    basketWrapper.append(basketText);
-
     switchText.innerHTML = "Сменить тему";
-    switchText.className = 'switch__text';
+    switchText.classList.add('switch__text');
     switchWrapper.append(switchText);
 
-    iconRegistr.style.transform = 'scale(1.3)';
-    iconRegistr.className = 'fa fa-user-plus';
-    iconRegistr.style.marginLeft = '22px';
-    iconRegistr.style.marginRight = '13px';
-    iconRegistr.style.filter = 'var(--filter)';
+    iconRegistr.classList.add('fa', 'fa-user-plus');
     registWrapper.prepend(iconRegistr);
 
-    iconSignIn.style.transform = 'scale(1.5)';
-    iconSignIn.className = 'fa fa-user-circle';
-    iconSignIn.style.marginLeft = '20px';
-    iconSignIn.style.marginRight = '10px';
-    iconSignIn.style.filter = 'var(--filter)';
+    iconSignIn.classList.add('fa', 'fa-user-circle'); 
     signInWrapper.prepend(iconSignIn);
 
-});
-
-    navItems.forEach(el => {
-        el.addEventListener('click', () => {
-            document.body.classList.remove('stop-scroll');
-            burger.classList.remove('burger_active');
-            nav.classList.remove('actions_visible');
+    if (basketWrapper) {
+        basketText.classList.add('actions__cart-text');    
+        basketText.innerHTML = "Корзина";
+        basketWrapper.append(basketText);    
+    }
+
+};
+
+const deleteTextCart = (event) => {
+    if (event.target == cartIcon || event.target.classList.contains('cart-product__delete') || event.target == cartQuantity) {
+        return ;
+    } else {
+        console.log(event.target);
+        document.body.classList.remove('stop-scroll');
+        burger.classList.remove('burger_active');
+        nav.classList.remove('actions_visible');
+        if (basketWrapper) {
             basketText.remove();
-            switchText.remove();
-            iconRegistr.remove();
-            iconSignIn.remove();
-        });
-    });
-}
-
-export {toggleBurger};
+        }
+        switchText.remove();
+        iconRegistr.remove();
+        iconSignIn.remove();  
+
+    }
+
+};
+
+export {toggleBurger, navItems, burger, deleteTextCart};

blocks/common.blocks/cart-content/__bottom/cart-content__bottom.scss

@@ -1,5 +1,8 @@
 .cart-content {
     &__bottom {
-
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 20px;
     }
 }

blocks/common.blocks/cart-content/__btn/cart-content__btn.scss

@@ -1,5 +1,10 @@
 .cart-content {
     &__btn {
-
+        margin-right: 15px;
+
+        @media screen and (max-width: 370px) {
+            margin-right: 0 !important;
+            padding: 5px 10px !important;
+        }
     }
 }

blocks/common.blocks/cart-content/__fullprice-number/cart-content__fullprice-number.scss

@@ -0,0 +1,6 @@
+.cart-content {
+    &__fullprice-number {
+        font: 700 1rem var(--font-family);
+        color: var(--color-text-title);
+    }
+}

blocks/common.blocks/cart-content/__fullprice-summary/cart-content__fullprice-summary.scss

@@ -0,0 +1,7 @@
+.cart-content {
+    &__fullprice-summary {
+        font: 500 1rem var(--font-family);
+        color: var(--color-text-title);
+
+    }
+}

blocks/common.blocks/cart-content/__fullprace/cart-content__fullprace.scss → blocks/common.blocks/cart-content/__fullprice/cart-content__fullprice.scss

@@ -1,5 +1,4 @@
 .cart-content {
     &__fullprace {
-
     }
 }

blocks/common.blocks/cart-content/__list/cart-content__list.scss

@@ -1,5 +1,9 @@
 .cart-content {
     &__list {
-
+        max-height: 330px;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: scroll;
     }
 }

blocks/common.blocks/cart-content/_active/cart-content_active.scss

@@ -0,0 +1,7 @@
+.cart-content{
+    &_active {
+        opacity: 1;
+    visibility: visible;
+    transition: opacity 0.3s, visibility 0.3s;
+    }
+}

blocks/common.blocks/cart-content/cart-content.scss

@@ -1,9 +1,33 @@
 .cart-content {
-    display: none;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    top: 180%;
+    background-color: var(--color-bg);
+    width: 440px;
+    box-shadow: 0 4px 4px rgba(135,135,135,0.25);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s, visibility 0.3s;
+
+    @media screen and (max-width: 459.9px) {
+        left: -95px;
+        width: 360px;
+    }
+
+    @media screen and (max-width: 370px) {
+        width: 320px;
+
+
+    }
 }
+
 @import "./__bottom/cart-content__bottom.scss";
-@import "./__btn/cart-content__btn.scss";
-@import "./__fullprace/cart-content__fullprace.scss";
+@import "./__fullprice/cart-content__fullprice.scss";
 @import "./__item/cart-content__item.scss";
 @import "./__list/cart-content__list.scss";
-@import "./__product/cart-content__product.scss";
+@import "./__product/cart-content__product.scss";
+@import "./__fullprice-number/cart-content__fullprice-number.scss";
+@import "./__fullprice-summary/cart-content__fullprice-summary.scss";
+@import "./_active/cart-content_active.scss";
+@import "./__btn/cart-content__btn.scss";

blocks/common.blocks/cart-product/__delete/cart-product__delete.scss

@@ -1,5 +1,15 @@
 .cart-product {
     &__delete {
-
+        width: 20px;
+        height: 20px;
+        border: none;
+        padding: 0;
+        background-color: transparent;
+        background-image: url(../../blocks/common.blocks/cart-product/delete.svg);
+        background-size: cover;
+        background-position: center;
+        background-repeat:no-repeat ;
+        cursor: pointer;
+        filter: var(--filter);
     }
 }

blocks/common.blocks/cart-product/__png/cart-product__png.scss

@@ -1,5 +1,8 @@
 .cart-product {
     &__png {
-
+        max-width: 100px;
+        max-height: 100%;
+        object-fit: cover;
+        margin-right: 20px;
     }
 }

blocks/common.blocks/cart-product/__price/cart-product__price.scss

@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
 .cart-product {
     &__price {
-
+        font: 500 0.8125rem var(--font-family);
+        color: var(--color-text-subtitle);
     }
 }

blocks/common.blocks/cart-product/__text/cart-product__text.scss

@@ -1,5 +1,8 @@
 .cart-product {
     &__text {
-
+        display: flex;
+        flex-direction: column;
+        align-items:flex-start;
+        flex: 0 1 65%
     }
 }

blocks/common.blocks/cart-product/__title/cart-product__title.scss

@@ -1,5 +1,8 @@
 .cart-product {
     &__title {
-
+        font: 700 0.8125rem var(--font-family);
+        color: var(--color-text-title);
+        max-width: 280px;
+        text-align: left;
     }
 }

blocks/common.blocks/cart-product/cart-product.scss

@@ -1,3 +1,8 @@
+.cart-product {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+}
 @import "./__delete/cart-product__delete.scss";
 @import "./__png/cart-product__png.scss";
 @import "./__price/cart-product__price.scss";