Skip to content

Commit 63b8f8b

Browse files
solygambassolygambas
committedMar 16, 2021
add memory cards
1 parent a1f7c95 commit 63b8f8b

File tree

3 files changed

+141
-27
lines changed

3 files changed

+141
-27
lines changed
 

‎72-memory cards/index.html

+2-24
Original file line numberDiff line numberDiff line change
@@ -22,29 +22,7 @@ <h1>
2222
<i class="fas fa-plus"></i> Add New Card
2323
</button>
2424
</h1>
25-
<div id="cards-container" class="cards">
26-
<!-- <div class="card active">
27-
<div class="inner-card">
28-
<div class="inner-card-front">
29-
<p>What is PHP?</p>
30-
</div>
31-
<div class="inner-card-back">
32-
<p>A programming language</p>
33-
</div>
34-
</div>
35-
</div>
36-
37-
<div class="card">
38-
<div class="inner-card">
39-
<div class="inner-card-front">
40-
<p>What is PHP?</p>
41-
</div>
42-
<div class="inner-card-back">
43-
<p>A programming language</p>
44-
</div>
45-
</div>
46-
</div> -->
47-
</div>
25+
<div id="cards-container" class="cards"></div>
4826
<div class="navigation">
4927
<button id="prev" class="nav-button">
5028
<i class="fas fa-arrow-left"></i>
@@ -71,7 +49,7 @@ <h1>
7149
<textarea id="answer" placeholder="Enter Answer..."></textarea>
7250
</div>
7351

74-
<button id="add-card" class="btn">
52+
<button id="add-card" class="btn btn-margin">
7553
<i class="fas fa-plus"></i> Add Card
7654
</button>
7755
</div>

‎72-memory cards/script.js

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
const cardsContainer = document.getElementById("cards-container");
2+
const prevButton = document.getElementById("prev");
3+
const nextButton = document.getElementById("next");
4+
const currentElement = document.getElementById("current");
5+
const showButton = document.getElementById("show");
6+
const hideButton = document.getElementById("hide");
7+
const questionElement = document.getElementById("question");
8+
const answerElement = document.getElementById("answer");
9+
const addCardButton = document.getElementById("add-card");
10+
const clearButton = document.getElementById("clear");
11+
const addContainer = document.getElementById("add-container");
12+
13+
let currentActiveCard = 0;
14+
const cardsElement = [];
15+
16+
// const cardsData = [
17+
// {
18+
// question: "What does CSS stand for?",
19+
// answer: "Cascading Style Sheets",
20+
// },
21+
// {
22+
// question: "What year was JavaScript launched?",
23+
// answer: "1995",
24+
// },
25+
// {
26+
// question: "What does HTML stand for?",
27+
// answer: "Hypertext Markup Language",
28+
// },
29+
// ];
30+
const cardsData = getCardsData();
31+
32+
function createCards() {
33+
cardsData.forEach((data, index) => createCard(data, index));
34+
}
35+
36+
function createCard(data, index) {
37+
const card = document.createElement("div");
38+
card.classList.add("card");
39+
if (index === 0) card.classList.add("active");
40+
card.innerHTML = `
41+
<div class="inner-card">
42+
<div class="inner-card-front">
43+
<p>${data.question}</p>
44+
</div>
45+
<div class="inner-card-back">
46+
<p>${data.answer}</p>
47+
</div>
48+
</div>
49+
`;
50+
card.addEventListener("click", () => card.classList.toggle("show-answer"));
51+
cardsElement.push(card);
52+
cardsContainer.appendChild(card);
53+
updateCurrentText();
54+
}
55+
56+
function updateCurrentText() {
57+
currentElement.innerText = `${currentActiveCard + 1}/${cardsElement.length}`;
58+
}
59+
60+
function getCardsData() {
61+
const cards = JSON.parse(localStorage.getItem("cards"));
62+
return cards === null ? [] : cards;
63+
}
64+
65+
function setCardsData(cards) {
66+
localStorage.setItem("cards", JSON.stringify(cards));
67+
history.go(0);
68+
}
69+
70+
// Event Listeners
71+
nextButton.addEventListener("click", () => {
72+
cardsElement[currentActiveCard].className = "card left";
73+
currentActiveCard++;
74+
if (currentActiveCard > cardsElement.length - 1) {
75+
currentActiveCard = 0;
76+
}
77+
cardsElement[currentActiveCard].className = "card active";
78+
updateCurrentText();
79+
});
80+
81+
prevButton.addEventListener("click", () => {
82+
cardsElement[currentActiveCard].className = "card right";
83+
currentActiveCard--;
84+
if (currentActiveCard < 0) {
85+
currentActiveCard = cardsElement.length - 1;
86+
}
87+
cardsElement[currentActiveCard].className = "card active";
88+
updateCurrentText();
89+
});
90+
91+
showButton.addEventListener("click", () => addContainer.classList.add("show"));
92+
hideButton.addEventListener("click", () =>
93+
addContainer.classList.remove("show")
94+
);
95+
96+
addCardButton.addEventListener("click", () => {
97+
const question = questionElement.value;
98+
const answer = answerElement.value;
99+
if (question.trim() && answer.trim()) {
100+
const newCard = { question, answer };
101+
createCard(newCard);
102+
questionElement.value = "";
103+
answerElement.value = "";
104+
addContainer.classList.remove("show");
105+
cardsData.push(newCard);
106+
setCardsData(cardsData);
107+
}
108+
});
109+
110+
clearButton.addEventListener("click", () => {
111+
localStorage.clear();
112+
cardsContainer.innerHTML = "";
113+
history.go(0);
114+
});
115+
116+
// Init
117+
createCards();

‎72-memory cards/style.css

+22-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
22

33
:root {
4+
--primary-color: #8e44ad;
45
--background-color: #b8c6db;
56
--secondary-background-color: #f5f7fa;
67
--light-color: #fff;
@@ -26,17 +27,17 @@ body {
2627

2728
h1 button {
2829
position: absolute;
29-
top: 0;
30+
top: 2rem;
3031
right: 2rem;
3132
z-index: 2;
3233
}
3334

3435
.btn {
36+
cursor: pointer;
3537
background-color: var(--background-color);
36-
border: 1px solid var(--border-color);
38+
border: none;
3739
border-radius: 0.625rem;
3840
font-size: 0.875rem;
39-
margin-top: 1.25rem;
4041
padding: 0.5rem 1rem;
4142
}
4243

@@ -50,6 +51,20 @@ h1 button {
5051
background-color: transparent;
5152
}
5253

54+
.btn-margin {
55+
margin-top: 1.25rem;
56+
width: 90%;
57+
}
58+
59+
.btn:hover {
60+
background-color: var(--primary-color);
61+
color: var(--light-color);
62+
}
63+
64+
.btn:focus, .navigation .nav-button:focus {
65+
outline: none;
66+
}
67+
5368
.clear {
5469
position: absolute;
5570
bottom: 2rem;
@@ -149,6 +164,10 @@ h1 button {
149164
font-size: 1rem;
150165
}
151166

167+
.navigation .nav-button:hover {
168+
transform: scale(1.2)
169+
}
170+
152171
.navigation p {
153172
margin: 0 1.5rem;
154173
}

0 commit comments

Comments
 (0)