commit b0c9af175d403f2105ce30671a85d01e205af204 Author: Sergey <32025367+sergeyyarkov@users.noreply.github.com> Date: Sat Aug 17 16:03:30 2019 +0300 Add files via upload diff --git a/img/cart.svg b/img/cart.svg new file mode 100644 index 0000000..a1243f2 --- /dev/null +++ b/img/cart.svg @@ -0,0 +1,3 @@ + diff --git a/img/close.svg b/img/close.svg new file mode 100644 index 0000000..dea8678 --- /dev/null +++ b/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..51622f3 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + + + Мой магазин + + + + + + + + +

мой магазин

+ + Моя корзина + + 0 +

Список товаров:

33990 ₽

+ Игровая приставка Sony PlayStation 4 Pro +

+ +

16499 ₽

+ Игровая приставка Sony PlayStation 3 Super Slim +

+ +

23411 ₽

+ Игровая приставка Xbox One S +

+ +

24751 ₽

+ Игровая приставка Nintendo Switch +

+ +

3624 ₽

+ Игровая приставка Sega Retro Genesis HD +

+ +

1279 ₽

+ Коврик для мыши Orico MPA9040 +

+ +

3990 ₽

+ 1С:Предприятие 8.3. Версия для обучения программированию +

+ +

4959 ₽

+ Коврик для мыши Trust GXT 760 Glide RGB +

+ +

+ + + + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..debdb81 --- /dev/null +++ b/js/index.js @@ -0,0 +1,78 @@ +function actionPage() { + // Клонирование Item + const cards = document.querySelectorAll('.main-content .card'); + const cartContent = document.querySelector('.cart-wrapper .cart-content'); + const cartTitleInfo = document.querySelector('.cart-title_info'); + const counter = document.querySelector('.counter'); + const cartWrapper = document.querySelector('.cart-wrapper'); + + cards.forEach((card) => { + const btnAdd = card.querySelector('.btn-add'); + btnAdd.addEventListener('click', () => { + btnAdd.style.backgroundColor = '#2aa60c'; + const cardClone = card.cloneNode(true); + cartContent.appendChild(cardClone); + // Счетчик + const cardsCart = document.querySelectorAll('.cart-content .card'); + counter.textContent = cardsCart.length; + // Grid Css + if (cardsCart.length != 0) { + cartTitleInfo.remove(); + cartContent.style.display = 'grid'; + cartContent.style.gridTemplateColumns = '1fr 1fr 1fr'; + cartContent.style.gridGap = '10px'; + } + cardsCart.forEach((card) => { + const btnCard = card.querySelector('.btn-add'); + btnCard.textContent = 'Удалить из корзины'; + btnCard.style.backgroundColor = '#de2c2c'; + btnCard.addEventListener('click', () => { + card.remove(); + totalPrice(); + const cardsCart = document.querySelectorAll('.cart-content .card'); + counter.textContent = cardsCart.length; + }); + }); + + + totalPrice(); + + function totalPrice() { + // Общая сумма + const cardPrice = document.querySelectorAll('.cart-content .card .card-price h5'); + const totalPrice = document.querySelector('.total-price'); + let total = 0; + if (cardPrice.length != 0) { + cardPrice.forEach((card) => { + total += parseFloat(card.textContent); + totalPrice.textContent = `Общая сумма: ${total} рублей`; + }); + } else { + total = 0; + totalPrice.textContent = `Общая сумма: ${total} рублей`; + cartWrapper.appendChild(cartTitleInfo); + } + } + + }); + + }); + + + + // Модальное окно + const cartLink = document.querySelector('.cart-link a'), + cartModal = document.querySelector('.cart-modal'), + cartClose = document.querySelector('.close-cart img'); + // Открытие + cartLink.addEventListener('click', () => { + cartModal.style.display = 'block'; + document.body.style.overflow = 'hidden'; + }); + // Закрытие + cartClose.addEventListener('click', () => { + cartModal.style.display = 'none'; + document.body.style.overflow = ''; + }); +} +actionPage(); \ No newline at end of file diff --git a/styles/media.css b/styles/media.css new file mode 100644 index 0000000..cdc29da --- /dev/null +++ b/styles/media.css @@ -0,0 +1,32 @@ +@media (max-width: 1200px) { + .main-content { + grid-template-columns: 1fr 1fr 1fr; + } +} +@media (max-width: 900px) { + .main-content { + grid-template-columns: 1fr 1fr; + } +} +@media (max-width: 768px) { + header .header-content { + grid-template-columns: 1fr; + text-align: center; + } + header .cart { + text-align: center; + } + header .cart-link { + font-size: 20px; + } +} +@media (max-width: 576px) { + .main-content { + grid-template-columns: 1fr; + } +} +@media (max-widtH: 420px) { + header .header-title h1 { + font-size: 30px; + } +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..d5221e5 --- /dev/null +++ b/styles/style.css @@ -0,0 +1,190 @@ +body { + font-family: 'Montserrat', sans-serif; + color: #2f2f2f; +} +header { + padding-top: 20px; +} +a { + text-decoration: none; + color: #2f2f2f; + outline: none; +} +a:hover { + border-bottom: 1px solid #2f2f2f; +} +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding-left: 15px; + padding-right: 15px; +} +.header-content { + display: grid; + grid-template-columns: 1fr 1fr; +} +.header-title h1 { + text-transform: uppercase; + font-weight: 700; + font-size: 38px; + -ms-flex-item-align: center; + align-self: center; +} +.cart { + -ms-flex-item-align: center; + align-self: center; + text-align: right; +} +.cart-link { + font-weight: 400; + font-size: 24px; +} +.cart-link::before { + content: ''; + width: 30px; + height: 30px; + display: inline-block; + background: url(../img/cart.svg) no-repeat center center; + position: relative; + top: 5px; + right: 10px; +} +.counter { + background-color: #143DA8; + width: 25px; + height: 25px; + color: #fff; + border-radius: 100%; + display: inline-block; + text-align: center; + font-size: 14px; + font-weight: 700; + position: relative; + bottom: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + padding-top: 3px; + padding-left: 1px; +} +main h2 { + font-weight: 400; + font-size: 24px; + margin-top: 60px; +} +.main-content { + display: grid; + grid-template-columns: repeat(4, minmax(270px, 280px)); + grid-gap: 20px; + margin-top: 50px; + grid-auto-rows: minmax(270px, auto); + margin-bottom: 5rem; +} +.card-img img { + max-width: 200px; + max-height: 200px; +} +.card-img { + text-align: center; + height: 200px; + display: grid; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-items: center; +} +.card { + background-color: #FCFCFC; + border: 1px solid #D0D0D0; + border-radius: 3px; + padding-top: 15px; + padding-bottom: 15px; + padding-left: 25px; + padding-right: 25px; + display: grid; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; +} +.card-price h5 { + font-weight: 700; + font-size: 24px; + margin-bottom: 10px; + margin-top: 30px; +} +.card-info span { + font-weight: 400; + font-size: 14px; +} +.card-info { + overflow: hidden; +} +.card-btn { + -ms-flex-item-align: end; + align-self: end; +} +.card-btn button { + background: #143DA8; + color: #fff; + text-align: center; + border: none; + border-radius: 2px; + height: 40px; + width: 100%; + margin-top: 15px; + font-family: 'Montserrat', sans-serif; + font-weight: 700; + font-size: 14px; + cursor: pointer; + -webkit-transition: all 0.1s; + transition: all 0.1s; +} +.card-btn button:hover { + opacity: .8; +} +.cart-modal { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0, .8); + overflow: auto; + display: none; +} +.cart-wrapper { + max-width: 1200px; + margin-left: auto; + margin-right: auto; + background-color: #fff; + border-radius: 3px; + max-height: auto; + min-height: 600px; + margin-top: 2rem; + margin-bottom: 2rem; + padding: 40px; + color: #2f2f2f; +} +.cart-title_info { + margin-top: 11%; + font-size: 20px; + text-align: center; + padding-top: 70px; + padding-bottom: 70px; + border: 5px dashed grey; +} +.close-cart img { + width: 40px; + cursor: pointer; + float: right; +} +.cart-wrapper h1 { + margin-top: 0; +} +.cart-content { + /* display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 5px; */ + margin-top: 20px; +} +} \ No newline at end of file