The code is working fine. Data is stored with localstroge. It can include titles and cards. Click on the title to see the cards. The problem is that when I click on the desired title, the same cards appear. I want each title to have its own cards.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Footer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.flip-card {
height: 300px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.flip-card-back {
background-color: #f44336;
color: white;
transform: rotateY(180deg);
display: flex;
justify-content: center;
align-items: center;
}
.hidden {
display: none;
}
</style>
</head>
<body class="d-flex flex-column min-vh-100">
<header class="bg-primary text-white py-3 mb-4">
<div class="container text-center">
<h1>My Application</h1>
<p class="lead">Manage your titles effectively</p>
</div>
</header>
<main class="container my-4">
<div class="list-group mb-5" id="chatList">
</div>
<div id="playCards" class="mb-5 text-center text-success" style="font-size: 1.5rem;">
<div class="row hidden" id="cards">
</div>
</div>
</main>
<footer class="bg-dark text-white text-center py-3 mt-auto position-fixed w-100 bottom-0">
<button type="button" id="footerButton"
class="btn btn-danger rounded-circle d-block justify-content-center align-items-center shadow-lg"
data-bs-toggle="modal" data-bs-target="#exampleFooterModal"
style="width: 60px; height: 60px; top: -30px; left: 50%; transform: translateX(-50%); position: absolute; font-size: 24px; font-weight: bold;">
+
</button>
<button type="button" id="playCardFooterButton"
class="btn btn-success rounded-circle d-none justify-content-center align-items-center shadow-lg"
data-bs-toggle="modal" data-bs-target="#exampleFooterCardModal"
style="width: 60px; height: 60px; top: -30px; left: 50%; transform: translateX(-50%); position: absolute; font-size: 24px; font-weight: bold; display: none;">
+
</button>
</footer>
<div class="modal fade" id="exampleFooterModal" tabindex="-1" aria-labelledby="exampleFooterModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleFooterModalLabel">Add New Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="titleForm">
<div class="mb-3">
<label for="titleInput" class="form-label">Enter Title</label>
<input type="text" class="form-control" id="titleInput" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleFooterCardModal" tabindex="-1" aria-labelledby="exampleFooterCardModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleFooterCardModalLabel">Add New Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="titleCardForm">
<div class="mb-3">
<label for="titleInputFront" class="form-label">Enter Title</label>
<input type="text" class="form-control" id="titleInputFront" required>
</div>
<div class="mb-3">
<label for="titleInputBack" class="form-label">Enter Title</label>
<input type="text" class="form-control" id="titleInputBack" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="contextModal" tabindex="-1" aria-labelledby="contextModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contextModalLabel">Item Actions</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button id="editBtn" class="btn btn-warning w-100 mb-2">Edit</button>
<button id="deleteBtn" class="btn btn-danger w-100">Delete</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const titleForm = document.getElementById('titleForm');
const titleCardForm = document.getElementById('titleCardForm');
const titleInput = document.getElementById('titleInput');
const titleCardFront = document.getElementById('titleCardFront');
const titleCardBack = document.getElementById('titleCardBack');
const titleInputFront = document.getElementById('titleInputFront');
const titleInputBack = document.getElementById('titleInputBack');
const cards = document.getElementById('cards');
const chatList = document.getElementById('chatList');
const playCards = document.getElementById('playCards');
const footerButton = document.getElementById('footerButton');
const playCardFooterButton = document.getElementById('playCardFooterButton');
let currentTitleElement = null;
let currentTitleCardElement = null;
document.addEventListener('DOMContentLoaded', function () {
const savedTitles = JSON.parse(localStorage.getItem('titles')) || [];
savedTitles.forEach(title => addTitleToList(title));
const savedCardFronts = JSON.parse(localStorage.getItem('cardFronts')) || [];
const savedCardBacks = JSON.parse(localStorage.getItem('cardBacks')) || [];
for (let i = 0; i < savedCardFronts.length; i++) {
addCardToList(savedCardFronts[i], savedCardBacks[i]);
}
});
titleForm.addEventListener('submit', function (event) {
event.preventDefault();
const title = titleInput.value.trim();
if (title) {
addTitleToList(title);
// Save to localStorage
const savedTitles = JSON.parse(localStorage.getItem('titles')) || [];
savedTitles.push(title);
localStorage.setItem('titles', JSON.stringify(savedTitles));
titleInput.value = '';
const modal = bootstrap.Modal.getInstance(document.getElementById('exampleFooterModal'));
modal.hide();
}
});
titleCardForm.addEventListener('submit', function (event) {
event.preventDefault();
const inputFront = titleInputFront.value.trim();
const inputBack = titleInputBack.value.trim();
if (inputFront && inputBack) {
addCardToList(inputFront, inputBack);
const savedCardFronts = JSON.parse(localStorage.getItem('cardFronts')) || [];
savedCardFronts.push(inputFront);
localStorage.setItem('cardFronts', JSON.stringify(savedCardFronts));
const savedCardBacks = JSON.parse(localStorage.getItem('cardBacks')) || [];
savedCardBacks.push(inputBack);
localStorage.setItem('cardBacks', JSON.stringify(savedCardBacks));
titleInputFront.value = ''
titleInputBack.value = ''
const modal = bootstrap.Modal.getInstance(document.getElementById('exampleFooterCardModal'));
modal.hide();
}
});
function addTitleToList(title) {
const newItem = document.createElement('button');
newItem.className = 'list-group-item d-flex justify-content-between align-items-center';
newItem.innerHTML = `<h5 class="mb-1">${title}</h5>`;
cards.classList.add('hidden');
newItem.addEventListener('contextmenu', function (event) {
event.preventDefault();
currentTitleElement = newItem;
const contextModal = new bootstrap.Modal(document.getElementById('contextModal'));
contextModal.show();
});
newItem.addEventListener('click', function (event) {
event.preventDefault();
cards.classList.toggle('hidden');
chatList.style.display = 'none';
playCardFooterButton.className = "btn btn-success rounded-circle d-block justify-content-center align-items-center shadow-lg";
});
chatList.appendChild(newItem);
}
function addCardToList(inputFront, inputBack) {
const newCard = document.createElement('div')
newCard.className = 'col-12 col-md-6 col-lg-4'
newCard.innerHTML = `
<div class="flip-card mb-3" onclick="flipCard(this)">
<div class="flip-card-inner">
<div class="flip-card-front">
${inputFront}
</div>
<div class="flip-card-back">
${inputBack}
</div>
</div>
</div>`
newCard.addEventListener('contextmenu', function (event) {
event.preventDefault();
currentTitleCardElement = newCard;
const contextModal = new bootstrap.Modal(document.getElementById('contextModal'));
contextModal.show();
});
cards.appendChild(newCard);
}
deleteBtn.addEventListener('click', function () {
if (currentTitleElement || currentTitleCardElement) {
let index;
if (currentTitleElement) {
// 'titles' elementni o'chirish
const titleText = currentTitleElement.querySelector('h5').textContent;
const savedTitles = JSON.parse(localStorage.getItem('titles')) || [];
const updatedTitles = savedTitles.filter(title => title !== titleText);
localStorage.setItem('titles', JSON.stringify(updatedTitles));
currentTitleElement.remove();
currentTitleElement = null;
} else if (currentTitleCardElement) {
// 'cardFronts' va 'cardBacks' elementni o'chirish
index = Array.from(cards.children).indexOf(currentTitleCardElement);
currentTitleCardElement.remove();
const savedCardFronts = JSON.parse(localStorage.getItem('cardFronts')) || [];
const savedCardBacks = JSON.parse(localStorage.getItem('cardBacks')) || [];
if (index >= 0) {
savedCardFronts.splice(index, 1);
savedCardBacks.splice(index, 1);
localStorage.setItem('cardFronts', JSON.stringify(savedCardFronts));
localStorage.setItem('cardBacks', JSON.stringify(savedCardBacks));
}
}
// Modalni yopish
const modal = bootstrap.Modal.getInstance(document.getElementById('contextModal'));
modal.hide();
}
});
document.getElementById('editBtn').addEventListener('click', function () {
if (currentTitleElement || currentTitleCardElement) {
if (currentTitleElement) {
// 'titles'ni tahrirlash
const titleText = currentTitleElement.querySelector('h5').textContent;
const newValue = prompt("Yangi nomni kiriting:", titleText);
if (newValue && newValue.trim() !== "") {
// LocalStorage'ni yangilash
const savedTitles = JSON.parse(localStorage.getItem('titles')) || [];
const index = savedTitles.indexOf(titleText);
if (index >= 0) {
savedTitles[index] = newValue;
localStorage.setItem('titles', JSON.stringify(savedTitles));
// DOMni real vaqt rejimida yangilash
currentTitleElement.querySelector('h5').textContent = newValue;
}
}
} else if (currentTitleCardElement) {
const frontText = currentTitleCardElement.querySelector('.flip-card-front').textContent.trim();
const backText = currentTitleCardElement.querySelector('.flip-card-back').textContent.trim();
const newFrontValue = prompt('1', frontText)
const newBackValue = prompt('2', backText)
if (newFrontValue && newFrontValue.trim() !== "" && newBackValue && newBackValue.trim() !== "") {
const savedCardFronts = JSON.parse(localStorage.getItem('cardFronts')) || [];
const indexFronts = savedCardFronts.indexOf(frontText);
const savedCardBacks = JSON.parse(localStorage.getItem('cardBacks')) || [];
const indexBacks = savedCardBacks.indexOf(backText);
if (indexFronts >= 0 || indexBacks >= 0) {
savedCardFronts[indexFronts] = newFrontValue;
savedCardBacks[indexBacks] = newBackValue;
localStorage.setItem('cardFronts', JSON.stringify(savedCardFronts))
localStorage.setItem('cardBacks', JSON.stringify(savedCardBacks))
currentTitleCardElement.querySelector('.flip-card-front').textContent = newFrontValue;
currentTitleCardElement.querySelector('.flip-card-back').textContent = newBackValue;
}
}
}
// Modalni yopish
const modal = bootstrap.Modal.getInstance(document.getElementById('contextModal'));
modal.hide();
}
});
function flipCard(card) {
card.classList.toggle('flipped');
}
</script>
</body>
</html>
I can’t figure out what the problem is. I asked for help from several places but to no avail.