bubble/js-dom
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/js-dom.git synced 2026-10-11 18:29:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sergey 2019-08-17 16:03:30 +03:00 committed by GitHub
commit b0c9af175d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 476 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
img/cart.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.75 22.5C7.375 22.5 6.2625 23.625 6.2625 25C6.2625 26.375 7.375 27.5 8.75 27.5C10.125 27.5 11.25 26.375 11.25 25C11.25 23.625 10.125 22.5 8.75 22.5ZM1.25 2.5V5H3.75L8.25 14.4875L6.5625 17.55C6.3625 17.9 6.25 18.3125 6.25 18.75C6.25 20.125 7.375 21.25 8.75 21.25H23.75V18.75H9.275C9.1 18.75 8.9625 18.6125 8.9625 18.4375L9 18.2875L10.125 16.25H19.4375C20.375 16.25 21.2 15.7375 21.625 14.9625L26.1 6.85C26.2 6.675 26.25 6.4625 26.25 6.25C26.25 5.5625 25.6875 5 25 5H6.5125L5.3375 2.5H1.25ZM21.25 22.5C19.875 22.5 18.7625 23.625 18.7625 25C18.7625 26.375 19.875 27.5 21.25 27.5C22.625 27.5 23.75 26.375 23.75 25C23.75 23.625 22.625 22.5 21.25 22.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 777 B

1
img/close.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B

172
index.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Мой магазин</title>
<!-- Styles CSS -->
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/media.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="header-title">
<h1>мой магазин</h1>
</div>
<div class="cart">
<span class="cart-link">
<a href="#">Моя корзина</a>
</span>
<span class="counter">0</span>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<h2>Список товаров:</h2>
<div class="main-content">
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1033180284.jpg" alt="#">
</div>
<div class="card-price">
<h5>33990 ₽</h5>
</div>
<div class="card-info">
<span>Игровая приставка Sony PlayStation 4 Pro</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1027495663.jpg" alt="#">
</div>
<div class="card-price">
<h5>16499 ₽</h5>
</div>
<div class="card-info">
<span>Игровая приставка Sony PlayStation 3 Super Slim</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1024358491.jpg" alt="#">
</div>
<div class="card-price">
<h5>23411 ₽</h5>
</div>
<div class="card-info">
<span>Игровая приставка Xbox One S</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1021386685.jpg" alt="#">
</div>
<div class="card-price">
<h5>24751 ₽</h5>
</div>
<div class="card-info">
<span>Игровая приставка Nintendo Switch</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1024928305.jpg" alt="#">
</div>
<div class="card-price">
<h5>3624 ₽</h5>
</div>
<div class="card-info">
<span>Игровая приставка Sega Retro Genesis HD</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1026748248.jpg" alt="#">
</div>
<div class="card-price">
<h5>1279 ₽</h5>
</div>
<div class="card-info">
<span>Коврик для мыши Orico MPA9040</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1015773076.jpg" alt="#">
</div>
<div class="card-price">
<h5>3990 ₽</h5>
</div>
<div class="card-info">
<span>1С:Предприятие 8.3. Версия для обучения программированию</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
<div class="card">
<div class="card-img">
<img src="https://cdn1.ozone.ru/multimedia/c400/1025053907.jpg" alt="#">
</div>
<div class="card-price">
<h5>4959 ₽</h5>
</div>
<div class="card-info">
<span>Коврик для мыши Trust GXT 760 Glide RGB</span>
</div>
<div class="card-btn">
<button class="btn-add">В корзину</button>
</div>
</div>
</div>
</div>
</main>
<!-- Modal Cart -->
<div class="cart-modal">
<div class="container">
<div class="cart-wrapper">
<div class="close-cart">
<img src="img/close.svg" alt="#">
</div>
<h1>Ваша корзина:</h1>
<span class="total-price">Общая сумма: 0 рублей</span>
<div class="cart-content">
<div class="cart-title_info">
<span>Ваша корзина пока пуста</span>
</div>
</div>
</div>
</div>
</div>
<!-- Script JS -->
<script src="js/index.js"></script>
</body>
</html>

78
js/index.js Normal file
View File

@ -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();

32
styles/media.css Normal file
View File

@ -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;
}
}

190
styles/style.css Normal file
View File

@ -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;
}
}