\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

Dynamic Card Flip Animation<\/strong>: Cards flip with smooth animations using CSS transitions and JavaScript classes.<\/li>
Timer and Flip Counter<\/strong>: Keep track of time and number of flips to increase competitiveness.<\/li>
Shuffle Cards<\/strong>: Randomize the card positions after each game for endless fun.<\/li>

Responsive Design<\/strong>: The game adapts to different screen sizes using media queries.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
How to Create a Memory Card Game in JavaScript\n\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Create Html :<\/strong><\/p>
Define a grid of cards, each with a front and back view:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n <head>\r\n <meta charset=\"utf-8\"> \r\n <title>Memory Card Game<\/title>\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <\/head>\r\n <body>\r\n <div class=\"wrapper\">\r\n <ul class=\"cards\">\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/1.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/2.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/3.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/4.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/5.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/6.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/5.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/3.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/1.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/4.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/2.png.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <li class=\"card\">\r\n <div class=\"view front-view\">\r\n <img decoding=\"async\" src=\"images\/que_icon.svg\" alt=\"icon\">\r\n <\/div>\r\n <div class=\"view back-view\">\r\n <img decoding=\"async\" src=\"images\/6.png.png\" alt=\"card-img\">\r\n <\/div>\r\n <\/li>\r\n <div class=\"details\">\r\n <p class=\"time\">Time: <span><b>20<\/b>s<\/span><\/p>\r\n <p class=\"flips\">Flips: <span><b>0<\/b><\/span><\/p>\r\n <button>Refresh<\/button>\r\n <\/div>\r\n <\/ul>\r\n <\/div>\r\n\r\n <script src=\"script.js\"><\/script>\r\n \r\n <\/body>\r\n<\/html><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b89c5ee elementor-widget elementor-widget-text-editor\" data-id=\"b89c5ee\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>CSS for Styling :<\/strong><\/p><p>Use <strong>flexbox<\/strong> for grid alignment and CSS animations for the flipping effect.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2de665 elementor-widget elementor-widget-code-highlight\" data-id=\"c2de665\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\r\n*{\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n}\r\np{\r\n font-size: 20px;\r\n}\r\nbody{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 100vh;\r\n background: #6563ff;\r\n}\r\n::selection{\r\n color: #fff;\r\n background: #6563ff;\r\n}\r\n.wrapper{\r\n padding: 25px;\r\n background: #f8f8f8;\r\n border-radius: 10px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n}\r\n.cards, .card, .view, .details, p{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.cards{\r\n height: 350px;\r\n width: 350px;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n}\r\n.cards .card{\r\n cursor: pointer;\r\n position: relative;\r\n perspective: 1000px;\r\n transform-style: preserve-3d;\r\n height: calc(100% \/ 4 - 10px);\r\n width: calc(100% \/ 4 - 10px);\r\n}\r\n.card.shake{\r\n animation: shake 0.35s ease-in-out;\r\n}\r\n@keyframes shake {\r\n 0%, 100%{\r\n transform: translateX(0);\r\n }\r\n 20%{\r\n transform: translateX(-13px);\r\n }\r\n 40%{\r\n transform: translateX(13px);\r\n }\r\n 60%{\r\n transform: translateX(-8px);\r\n }\r\n 80%{\r\n transform: translateX(8px);\r\n }\r\n}\r\n.cards .card .view{\r\n width: 100%;\r\n height: 100%;\r\n user-select: none;\r\n pointer-events: none;\r\n position: absolute;\r\n background: #fff;\r\n border-radius: 7px;\r\n backface-visibility: hidden;\r\n transition: transform 0.25s linear;\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n}\r\n.card .front-view img{\r\n max-width: 17px;\r\n}\r\n.card .back-view{\r\n transform: rotateY(-180deg);\r\n}\r\n.card .back-view img{\r\n max-width: 40px;\r\n}\r\n.card.flip .front-view{\r\n transform: rotateY(180deg);\r\n}\r\n.card.flip .back-view{\r\n transform: rotateY(0);\r\n}\r\n\r\n.details{\r\n width: 100%;\r\n margin-top: 15px;\r\n padding: 0 20px;\r\n border-radius: 7px;\r\n background: #fff;\r\n height: calc(100% \/ 4 - 30px);\r\n justify-content: space-between;\r\n box-shadow: 0 3px 10px rgba(0,0,0,0.1);\r\n}\r\n.details p{\r\n font-size: 18px;\r\n height: 17px;\r\n padding-right: 18px;\r\n border-right: 1px solid #ccc;\r\n}\r\n.details p span{\r\n margin-left: 8px;\r\n}\r\n.details p b{\r\n font-weight: 500;\r\n}\r\n.details button{\r\n cursor: pointer;\r\n font-size: 14px;\r\n color: #6563ff;\r\n border-radius: 4px;\r\n padding: 4px 11px;\r\n background: #fff;\r\n border: 2px solid #6563ff;\r\n transition: 0.3s ease;\r\n}\r\n.details button:hover{\r\n color: #fff;\r\n background: #6563ff;\r\n}\r\n\r\n@media screen and (max-width: 700px) {\r\n .cards{\r\n height: 350px;\r\n width: 350px;\r\n }\r\n .card .front-view img{\r\n max-width: 16px;\r\n }\r\n .card .back-view img{\r\n max-width: 40px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: 530px) {\r\n .cards{\r\n height: 300px;\r\n width: 300px;\r\n }\r\n .card .back-view img{\r\n max-width: 35px;\r\n }\r\n .details{\r\n margin-top: 10px;\r\n padding: 0 15px;\r\n height: calc(100% \/ 4 - 20px);\r\n }\r\n .details p{\r\n height: 15px;\r\n font-size: 17px;\r\n padding-right: 13px;\r\n }\r\n .details button{\r\n font-size: 13px;\r\n padding: 5px 10px;\r\n border: none;\r\n color: #fff;\r\n background: #6563ff;\r\n }\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f9cc1d8 elementor-widget elementor-widget-text-editor\" data-id=\"f9cc1d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>JavaScript for Game Logic : <\/strong>Implement functionality to shuffle cards, handle card flips, and detect matches:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-46f3bff elementor-widget elementor-widget-code-highlight\" data-id=\"46f3bff\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const cards = document.querySelectorAll(\".card\"),\r\ntimeTag = document.querySelector(\".time b\"),\r\nflipsTag = document.querySelector(\".flips b\"),\r\nrefreshBtn = document.querySelector(\".details button\");\r\n\r\nlet maxTime = 20;\r\nlet timeLeft = maxTime;\r\nlet flips = 0;\r\nlet matchedCard = 0;\r\nlet disableDeck = false;\r\nlet isPlaying = false;\r\nlet cardOne, cardTwo, timer;\r\n\r\nfunction initTimer() {\r\n if(timeLeft <= 0) {\r\n return clearInterval(timer);\r\n }\r\n timeLeft--;\r\n timeTag.innerText = timeLeft;\r\n}\r\n\r\nfunction flipCard({target: clickedCard}) {\r\n if(!isPlaying) {\r\n isPlaying = true;\r\n timer = setInterval(initTimer, 1000);\r\n }\r\n if(clickedCard !== cardOne && !disableDeck && timeLeft > 0) {\r\n flips++;\r\n flipsTag.innerText = flips;\r\n clickedCard.classList.add(\"flip\");\r\n if(!cardOne) {\r\n return cardOne = clickedCard;\r\n }\r\n cardTwo = clickedCard;\r\n disableDeck = true;\r\n let cardOneImg = cardOne.querySelector(\".back-view img\").src,\r\n cardTwoImg = cardTwo.querySelector(\".back-view img\").src;\r\n matchCards(cardOneImg, cardTwoImg);\r\n }\r\n}\r\n\r\nfunction matchCards(img1, img2) {\r\n if(img1 === img2) {\r\n matchedCard++;\r\n if(matchedCard == 6 && timeLeft > 0) {\r\n return clearInterval(timer);\r\n }\r\n cardOne.removeEventListener(\"click\", flipCard);\r\n cardTwo.removeEventListener(\"click\", flipCard);\r\n cardOne = cardTwo = \"\";\r\n return disableDeck = false;\r\n }\r\n\r\n setTimeout(() => {\r\n cardOne.classList.add(\"shake\");\r\n cardTwo.classList.add(\"shake\");\r\n }, 400);\r\n\r\n setTimeout(() => {\r\n cardOne.classList.remove(\"shake\", \"flip\");\r\n cardTwo.classList.remove(\"shake\", \"flip\");\r\n cardOne = cardTwo = \"\";\r\n disableDeck = false;\r\n }, 1200);\r\n}\r\n\r\nfunction shuffleCard() {\r\n timeLeft = maxTime;\r\n flips = matchedCard = 0;\r\n cardOne = cardTwo = \"\";\r\n clearInterval(timer);\r\n timeTag.innerText = timeLeft;\r\n flipsTag.innerText = flips;\r\n disableDeck = isPlaying = false;\r\n\r\n let arr = [1, 2, 3, 4, 5, 6, 1, 2, 3, 4, 5, 6];\r\n arr.sort(() => Math.random() > 0.5 ? 1 : -1);\r\n\r\n cards.forEach((card, index) => {\r\n card.classList.remove(\"flip\");\r\n let imgTag = card.querySelector(\".back-view img\");\r\n setTimeout(() => {\r\n imgTag.src = `images\/${arr[index]}.png`;\r\n }, 500);\r\n card.addEventListener(\"click\", flipCard);\r\n });\r\n}\r\n\r\nshuffleCard();\r\n\r\nrefreshBtn.addEventListener(\"click\", shuffleCard);\r\n\r\ncards.forEach(card => {\r\n card.addEventListener(\"click\", flipCard);\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d7248e elementor-widget elementor-widget-text-editor\" data-id=\"2d7248e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Interactive Features<\/strong><\/p><ul><li>Add a <strong>Restart Button<\/strong>: Reset the game and shuffle cards.<\/li><li>Introduce <strong>Levels<\/strong>: Increase the complexity with more cards.<\/li><li>Display a <strong>Leaderboard<\/strong>: Track top scores based on flips and time.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44dfe71 elementor-widget elementor-widget-heading\" data-id=\"44dfe71\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e628ba elementor-widget elementor-widget-text-editor\" data-id=\"0e628ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"flex max-w-full flex-col flex-grow\"><div class=\"min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"c61b3617-d851-4c81-a5bf-d7252e80985f\" data-message-model-slug=\"gpt-4o\"><div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\"><div class=\"markdown prose w-full break-words dark:prose-invert light\"><p>Creating a memory card game is a great way to practice JavaScript programming and understand core concepts like DOM manipulation, event handling, and animation. With additional features and reactivity, this project could be an important step forward for the creation of advanced interactive games.<\/p><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce1dc64 elementor-widget elementor-widget-shortcode\" data-id=\"ce1dc64\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode1459-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode1459-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode1459-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode1459-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">JavaScript Card Game Source Code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"flip-card-game.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Memory Card Game is a classic puzzle game designed to test your focus and memory skills. In this<\/p>\n","protected":false},"author":1,"featured_media":1441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"\n<title>How to create a memory card game using html, css and JS<\/title>\n<meta name=\"description\" content=\"In this tutorial, we will learn how to create a memory card game using HTML, CSS and javascript with codingtutorials.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a memory card game using html, css and JS\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to create a memory card game using HTML, CSS and javascript with codingtutorials.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-06T04:58:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-15T12:20:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n","yoast_head_json":{"title":"How to create a memory card game using html, css and JS","description":"In this tutorial, we will learn how to create a memory card game using HTML, CSS and javascript with codingtutorials.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/","og_locale":"en_US","og_type":"article","og_title":"How to create a memory card game using html, css and JS","og_description":"In this tutorial, we will learn how to create a memory card game using HTML, CSS and javascript with codingtutorials.","og_url":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-12-06T04:58:13+00:00","article_modified_time":"2025-02-15T12:20:27+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"How to create a memory card game using html, css and JS","datePublished":"2024-12-06T04:58:13+00:00","dateModified":"2025-02-15T12:20:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/"},"wordCount":253,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp","articleSection":["Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/","url":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/","name":"How to create a memory card game using html, css and JS","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp","datePublished":"2024-12-06T04:58:13+00:00","dateModified":"2025-02-15T12:20:27+00:00","description":"In this tutorial, we will learn how to create a memory card game using HTML, CSS and javascript with codingtutorials.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/12\/Memory-Card-Game.webp","width":1280,"height":720,"caption":"memory card game"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/memory-card-game-build-a-javascript-card-game\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"How to create a memory card game using html, css and JS"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=1440"}],"version-history":[{"count":31,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1440\/revisions"}],"predecessor-version":[{"id":2361,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/1440\/revisions\/2361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/1441"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=1440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=1440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=1440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}