A Coding Boy

demo post

only for demo nasa prospect

only for demo the gonnies

most popular

how to create parallax website

how to create a beautiful card

how to create a netflix login page

how to create flipping ui card

how to create image generator website

Build A Memory Card Game in HTML CSS & JavaScript

Memory card is a simple matching cards game in which all the cards are flipped backside on a surface, and two cards are flipped face up over each turn. The objective of this game is to match all the pairs of cards.

In this game (Memory Card Game in JavaScript), You’ll see the two demos. In demo 1, there are 16 cards where every two cards have the same images, but each card is placed randomly, and you have to find them. There is no time limit to find the pairs of cards.

Memory Card Game in JavaScript [Source Codes]

To create this Memory or Matching Card Game in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files, you have to paste the given codes into your file.

Remember, If you copy-paste the codes, then you won’t get images that are used in this game, and also you won’t get source codes of demo 2 of this game. If you want these, you can easily download the source files of this memory card game from the bottom download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>

<head>

<title>Memory Card Game in JavaScript | CodingNepal</title>

</head>

<body>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</div>

</div>

</li>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>  <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Memory Card Game in JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="wrapper"> <ul class="cards"> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-1.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-6.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-3.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-2.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-1.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-5.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-2.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-6.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-3.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-5.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> <li class="card"> <div class="view front-view"> <img src="images/que_icon.svg" alt="icon"> </div> <div class="view back-view"> <img src="images/img-4.png" alt="card-img"> </div> </li> </ul> </div> <script src="script.js"></script> </body> </html>

Second, paste the following codes into your style.css file

/* Import Google Font - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

body{

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

background: #6563FF;

}

.wrapper{

padding: 25px;

border-radius: 10px;

background: #F8F8F8;

box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}

.cards, .card, .view{

display: flex;

align-items: center;

justify-content: center;

}

.cards{

height: 400px;

width: 400px;

flex-wrap: wrap;

justify-content: space-between;

}

.cards .card{

cursor: pointer;

list-style: none;

user-select: none;

position: relative;

perspective: 1000px;

transform-style: preserve-3d;

height: calc(100% / 4 - 10px);

width: calc(100% / 4 - 10px);

}

.card.shake{

animation: shake 0.35s ease-in-out;

}

@keyframes shake {

0%, 100%{

transform: translateX(0);

}

20%{

transform: translateX(-13px);

}

40%{

transform: translateX(13px);

}

60%{

transform: translateX(-8px);

}

80%{

transform: translateX(8px);

}

.card .view{

width: 100%;

height: 100%;

position: absolute;

border-radius: 7px;

background: #fff;

pointer-events: none;

backface-visibility: hidden;

box-shadow: 0 3px 10px rgba(0,0,0,0.1);

transition: transform 0.25s linear;

}

.card .front-view img{

width: 19px;

}

.card .back-view img{

max-width: 45px;

}

.card .back-view{

transform: rotateY(-180deg);

}

.card.flip .back-view{

transform: rotateY(0);

}

.card.flip .front-view{

transform: rotateY(180deg);

}

@media screen and (max-width: 700px) {

.cards{

height: 350px;

width: 350px;

}

.card .front-view img{

width: 17px;

}

.card .back-view img{

max-width: 40px;

}

@media screen and (max-width: 530px) {

.cards{

height: 300px;

width: 300px;

}

.card .front-view img{

width: 15px;

}

.card .back-view img{

max-width: 35px;

}

/* Import Google Font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #6563FF; } .wrapper{ padding: 25px; border-radius: 10px; background: #F8F8F8; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .cards, .card, .view{ display: flex; align-items: center; justify-content: center; } .cards{ height: 400px; width: 400px; flex-wrap: wrap; justify-content: space-between; } .cards .card{ cursor: pointer; list-style: none; user-select: none; position: relative; perspective: 1000px; transform-style: preserve-3d; height: calc(100% / 4 - 10px); width: calc(100% / 4 - 10px); } .card.shake{ animation: shake 0.35s ease-in-out; } @keyframes shake { 0%, 100%{ transform: translateX(0); } 20%{ transform: translateX(-13px); } 40%{ transform: translateX(13px); } 60%{ transform: translateX(-8px); } 80%{ transform: translateX(8px); } } .card .view{ width: 100%; height: 100%; position: absolute; border-radius: 7px; background: #fff; pointer-events: none; backface-visibility: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.25s linear; } .card .front-view img{ width: 19px; } .card .back-view img{ max-width: 45px; } .card .back-view{ transform: rotateY(-180deg); } .card.flip .back-view{ transform: rotateY(0); } .card.flip .front-view{ transform: rotateY(180deg); } @media screen and (max-width: 700px) { .cards{ height: 350px; width: 350px; } .card .front-view img{ width: 17px; } .card .back-view img{ max-width: 40px; } } @media screen and (max-width: 530px) { .cards{ height: 300px; width: 300px; } .card .front-view img{ width: 15px; } .card .back-view img{ max-width: 35px; } }

Last, paste the following codes into your script.js file.

const cards = document.querySelectorAll(".card");

let matched = 0;

let cardOne, cardTwo;

let disableDeck = false;

function flipCard({target: clickedCard}) {

if(cardOne !== clickedCard && !disableDeck) {

clickedCard.classList.add("flip");

if(!cardOne) {

return cardOne = clickedCard;

}

cardTwo = clickedCard;

disableDeck = true;

let cardOneImg = cardOne.querySelector(".back-view img").src,

cardTwoImg = cardTwo.querySelector(".back-view img").src;

matchCards(cardOneImg, cardTwoImg);

}

function matchCards(img1, img2) {

if(img1 === img2) {

matched++;

if(matched == 8) {

setTimeout(() => {

return shuffleCard();

}, 1000);

}

cardOne.removeEventListener("click", flipCard);

cardTwo.removeEventListener("click", flipCard);

cardOne = cardTwo = "";

return disableDeck = false;

}

setTimeout(() => {

cardOne.classList.add("shake");

cardTwo.classList.add("shake");

}, 400);

setTimeout(() => {

cardOne.classList.remove("shake", "flip");

cardTwo.classList.remove("shake", "flip");

cardOne = cardTwo = "";

disableDeck = false;

}, 1200);

}

function shuffleCard() {

matched = 0;

disableDeck = false;

cardOne = cardTwo = "";

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];

arr.sort(() => Math.random() > 0.5 ? 1 : -1);

cards.forEach((card, i) => {

card.classList.remove("flip");

let imgTag = card.querySelector(".back-view img");

imgTag.src = `images/img-${arr[i]}.png`;

card.addEventListener("click", flipCard);

});

}

shuffleCard();

cards.forEach(card => {

card.addEventListener("click", flipCard);

});

That’s all, now you’ve successfully built a Memory Card Game in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problem, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it. After you extracted this zip file, you’ll get two folders of both demo 1 and demo 2 of this game.

live demo

Download files

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}