xysiboi/PIbd-23_Baryshev_D.A._InternetProgramming_cyxarukShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

done

Browse Source
This commit is contained in:
Baryshev Dmitry
2025-05-17 12:54:19 +04:00
parent 684c9d7675
commit 801a6cac28
2 changed files with 70 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
catalog.html
View File

@@ -10,12 +10,22 @@
<link rel="stylesheet" href="css/styles.css" />
<style>
.like-btn.liked {
color: #dc3545 !important;
color: #000000 !important;
border-color: #dc3545 !important;
}
.like-btn.liked i {
color: #dc3545 !important;
}
/* Черная оконтовка при наведении на нажатую кнопку */
.like-btn.liked:hover i {
text-shadow: 0 0 2px #000000,
0 0 2px #000000,
0 0 2px #000000;
}
/* Плавное изменение */
.like-btn i {
transition: text-shadow 0.2s ease;
}
</style>
</head>
<body>
@@ -69,10 +79,10 @@
</style>
<main class="container my-4">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="accordion" id="accordionExample" >
<div class="accordion-item" >
<h2 class="accordion-header" id="headingOne" >
<button class="accordion-button" type="button" data-bs-toggle="collapse" style="background-color: #b0d8ff;" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Добавить товар
</button>
</h2>
@@ -110,7 +120,7 @@
</div>
</div>
<h1 class="text-center mb-4">Каталог товаров</h1>
<h1 class="text-center mb-4 mt-2">Каталог товаров</h1>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5" id="productsContainer">
<!-- Карточка товара 1 -->
@@ -279,30 +289,27 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Функция для обработки кликов по кнопкам "В избранное"
function handleLikeButtonClick() {
const icon = this.querySelector('i');
this.classList.toggle('liked');
if (this.classList.contains('liked')) {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-outline-danger');
icon.classList.remove('bi-heart');
icon.classList.add('bi-heart-fill');
const icon = this.querySelector("i");
this.classList.toggle("liked");
if (this.classList.contains("liked")) {
this.classList.remove("btn-outline-secondary");
this.classList.add("btn-outline-danger");
icon.classList.remove("bi-heart");
icon.classList.add("bi-heart-fill");
} else {
this.classList.remove('btn-outline-danger');
this.classList.add('btn-outline-secondary');
icon.classList.remove('bi-heart-fill');
icon.classList.add('bi-heart');
this.classList.remove("btn-outline-danger");
this.classList.add("btn-outline-secondary");
icon.classList.remove("bi-heart-fill");
icon.classList.add("bi-heart");
}
}
// Добавляем обработчики для всех кнопок "В избранное"
document.querySelectorAll('.like-btn').forEach(button => {
button.addEventListener('click', handleLikeButtonClick);
document.querySelectorAll(".like-btn").forEach((button) => {
button.addEventListener("click", handleLikeButtonClick);
});
// Функция для добавления товара
document.getElementById("addProductForm").addEventListener("submit", function (e) {
e.preventDefault();
@@ -341,11 +348,9 @@
const container = document.getElementById("productsContainer");
container.insertAdjacentHTML("beforeend", productCard);
// Добавляем обработчик для новой кнопки
container.lastElementChild.querySelector('.like-btn')
.addEventListener('click', handleLikeButtonClick);
container.lastElementChild.querySelector(".like-btn").addEventListener("click", handleLikeButtonClick);
this.reset();
});
</script>

65
dist/catalog.html vendored
View File

@@ -10,12 +10,22 @@
<link rel="stylesheet" href="css/styles.css" />
<style>
.like-btn.liked {
color: #dc3545 !important;
color: #000000 !important;
border-color: #dc3545 !important;
}
.like-btn.liked i {
color: #dc3545 !important;
}
/* Черная оконтовка при наведении на нажатую кнопку */
.like-btn.liked:hover i {
text-shadow: 0 0 2px #000000,
0 0 2px #000000,
0 0 2px #000000;
}
/* Плавное изменение */
.like-btn i {
transition: text-shadow 0.2s ease;
}
</style>
</head>
<body>
@@ -69,10 +79,10 @@
</style>
<main class="container my-4">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="accordion" id="accordionExample" >
<div class="accordion-item" >
<h2 class="accordion-header" id="headingOne" >
<button class="accordion-button" type="button" data-bs-toggle="collapse" style="background-color: #b0d8ff;" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Добавить товар
</button>
</h2>
@@ -110,7 +120,7 @@
</div>
</div>
<h1 class="text-center mb-4">Каталог товаров</h1>
<h1 class="text-center mb-4 mt-2">Каталог товаров</h1>
<!-- Карточки товаров -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5" id="productsContainer">
<!-- Карточка товара 1 -->
@@ -279,30 +289,27 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Функция для обработки кликов по кнопкам "В избранное"
function handleLikeButtonClick() {
const icon = this.querySelector('i');
this.classList.toggle('liked');
if (this.classList.contains('liked')) {
this.classList.remove('btn-outline-secondary');
this.classList.add('btn-outline-danger');
icon.classList.remove('bi-heart');
icon.classList.add('bi-heart-fill');
const icon = this.querySelector("i");
this.classList.toggle("liked");
if (this.classList.contains("liked")) {
this.classList.remove("btn-outline-secondary");
this.classList.add("btn-outline-danger");
icon.classList.remove("bi-heart");
icon.classList.add("bi-heart-fill");
} else {
this.classList.remove('btn-outline-danger');
this.classList.add('btn-outline-secondary');
icon.classList.remove('bi-heart-fill');
icon.classList.add('bi-heart');
this.classList.remove("btn-outline-danger");
this.classList.add("btn-outline-secondary");
icon.classList.remove("bi-heart-fill");
icon.classList.add("bi-heart");
}
}
// Добавляем обработчики для всех кнопок "В избранное"
document.querySelectorAll('.like-btn').forEach(button => {
button.addEventListener('click', handleLikeButtonClick);
document.querySelectorAll(".like-btn").forEach((button) => {
button.addEventListener("click", handleLikeButtonClick);
});
// Функция для добавления товара
document.getElementById("addProductForm").addEventListener("submit", function (e) {
e.preventDefault();
@@ -341,11 +348,9 @@
const container = document.getElementById("productsContainer");
container.insertAdjacentHTML("beforeend", productCard);
// Добавляем обработчик для новой кнопки
container.lastElementChild.querySelector('.like-btn')
.addEventListener('click', handleLikeButtonClick);
container.lastElementChild.querySelector(".like-btn").addEventListener("click", handleLikeButtonClick);
this.reset();
});
</script>