diff --git a/index.html b/index.html
index 8e75e52..2a6261f 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,11 @@
Memory FlipCard Game
-
+
-
+
@@ -25,7 +29,7 @@
-
+
@@ -33,7 +37,7 @@
-
+
@@ -41,7 +45,7 @@
-
+
@@ -49,7 +53,7 @@
-
+
@@ -57,7 +61,7 @@
-
+
@@ -65,7 +69,7 @@
-
+
@@ -73,7 +77,103 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
index f8050ad..54f7f9f 100644
--- a/script.js
+++ b/script.js
@@ -3,7 +3,7 @@ timeTag = document.querySelector(".time b"),
flipsTag = document.querySelector(".flips b"),
refreshBtn = document.querySelector(".details button");
-let maxTime = 30;
+let maxTime = 90;
let timeLeft = maxTime;
let flips = 0;
let matchedCards = 0;
@@ -42,7 +42,7 @@ function flipCard({target: clickedCard}){
function matchCards(icon1, icon2){
if(icon1 === icon2){
matchedCards++;
- if(matchedCards == 6 && timeLeft > 0){
+ if(matchedCards == 10 && timeLeft > 0){
return clearInterval(timer);
}
cardOne.removeEventListener("click", flipCard);
@@ -74,7 +74,7 @@ function shuffleCards(){
flipsTag.innerText = flips;
disableDeck = isPlaying = false;
- let arr = ["bxl-tiktok", "bxl-instagram-alt", "bxl-twitter", "bxl-youtube", "bxl-tiktok", "bxl-instagram-alt", "bxl-twitter", "bxl-youtube"];
+ let arr = ["bxl-linkedin", "bxs-file-css", "bxl-php", "bxl-unity", "bxl-visual-studio", "bxl-steam", "bxl-aws", "bx-qr", "bxl-docker", "bxl-heroku", "bxl-linkedin", "bxs-file-css", "bxl-php", "bxl-unity", "bxl-visual-studio", "bxl-steam", "bxl-aws", "bx-qr", "bxl-docker", "bxl-heroku"];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, index) =>{
diff --git a/style.css b/style.css
index 5faed99..f6f33f0 100644
--- a/style.css
+++ b/style.css
@@ -24,7 +24,7 @@ body{
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
-.cards, .card, .view, .details, p{
+.cards, .card, .view, .details, .level, p{
display: flex;
align-items: center;
justify-content: center;
@@ -42,12 +42,12 @@ body{
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
- height: calc(100% / 4 - 10px);
- width: calc(100% / 4 - 10px);
+ height: calc(100% / 6 - 10px);
+ width: calc(100% / 5 - 10px);
}
.card.shake{
- animation: shake 0.35s ease-in-out;
+ animation: shake 0.20s ease-in-out;
}
@keyframes shake{