{"id":236,"date":"2024-07-10T18:27:23","date_gmt":"2024-07-10T18:27:23","guid":{"rendered":"https:\/\/projects.emat.kent.edu\/24sp-emat\/?page_id=236"},"modified":"2024-07-10T19:08:07","modified_gmt":"2024-07-10T19:08:07","slug":"memory-card-2","status":"publish","type":"page","link":"https:\/\/projects.emat.kent.edu\/24sp-emat\/memory-card-2\/","title":{"rendered":"Memory Card"},"content":{"rendered":"\n<div class=\"wp-site-blocks\">\n\n\n<main class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\"><\/div>\n\n\n<div class=\"entry-content wp-block-post-content has-global-padding is-layout-constrained wp-block-post-content-is-layout-constrained\">\n\t\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<title> <\/title>\n  \n    <div class=\"wrapper\">\n      <ul class=\"cards\">\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/13.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/8.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/11.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/12.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/13.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/9.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/12.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/8.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/11.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/10.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/9.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/10.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/7.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/6.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/7.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n        <li class=\"card\">\n          <div class=\"view front-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/memory.png\" alt=\"icon\">\n          <\/div>\n          <div class=\"view back-view\">\n            <img decoding=\"async\" src=\"http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/6.png\" alt=\"card-img\">\n          <\/div>\n        <\/li>\n      <\/ul>\n    <\/div>\n    \n  <script>\n\t  const cards = document.querySelectorAll(\".card\");\nlet matched = 0;\nlet cardOne, cardTwo;\nlet disableDeck = false;\nfunction flipCard({target: clickedCard}) {\n    if(cardOne !== clickedCard && !disableDeck) {\n        clickedCard.classList.add(\"flip\");\n        if(!cardOne) {\n            return cardOne = clickedCard;\n        }\n        cardTwo = clickedCard;\n        disableDeck = true;\n        let cardOneImg = cardOne.querySelector(\".back-view img\").src,\n        cardTwoImg = cardTwo.querySelector(\".back-view img\").src;\n        matchCards(cardOneImg, cardTwoImg);\n    }\n}\nfunction matchCards(img1, img2) {\n    if(img1 === img2) {\n        matched++;\n        if(matched === 8) {\n            setTimeout(() => {\n                return shuffleCard();\n            }, 1000);\n        }\n        cardOne.removeEventListener(\"click\", flipCard);\n        cardTwo.removeEventListener(\"click\", flipCard);\n        cardOne = cardTwo = \"\";\n        return disableDeck = false;\n    }\n    setTimeout(() => {\n        cardOne.classList.add(\"shake\");\n        cardTwo.classList.add(\"shake\");\n    }, 400);\n    setTimeout(() => {\n        cardOne.classList.remove(\"shake\", \"flip\");\n        cardTwo.classList.remove(\"shake\", \"flip\");\n        cardOne = cardTwo = \"\";\n        disableDeck = false;\n    }, 1200);\n}\nfunction shuffleCard() {\n    matched = 0;\n    disableDeck = false;\n    cardOne = cardTwo = \"\";\n    let arr = [13, 10, 9, 12, 11, 6, 7, 8, 13, 10, 9, 12, 11, 6, 7, 8];\n    arr.sort(() => Math.random() > 0.5 ? 1 : -1);\n    cards.forEach((card, i) => {\n        card.classList.remove(\"flip\");\n        let imgTag = card.querySelector(\".back-view img\");\n        imgTag.src = `http:\/\/projects.emat.kent.edu\/24sp-emat\/wp-content\/uploads\/sites\/5\/2024\/04\/${arr[i]}.png`;\n        card.addEventListener(\"click\", flipCard);\n    });\n}\nshuffleCard();\n    \ncards.forEach(card => {\n    card.addEventListener(\"click\", flipCard);\n});\n<\/script>\n\n<style>\n\t@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: Poppins, sans-serif;\n}\nbody{\n  display: flex;\n  align-items: top;\n  justify-content: center;\n  min-height: 100vh;\n}\n\n.wrapper{\n margin: 25px;\n width: 475px;\n padding: 30px;\n  border-radius: 10px;\n  background: #F8F8F8;\n  box-shadow: 0 10px 30px cmyk(0,0,0,10%);\n}\n.cards, .card, .view{\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.cards{\n  height: 400px;\n  width: 400px;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n.cards .card{\n  cursor: pointer;\n  list-style: none;\n  user-select: none;\n  position: relative;\n  perspective: 1000px;\n  transform-style: preserve-3d;\n  height: calc(100% \/ 4 - 10px);\n  width: calc(100% \/ 4 - 10px);\n}\n.card.shake{\n  animation: shake 0.35s ease-in-out;\n}\n@keyframes shake {\n  0%, 100%{\n    transform: translateX(0);\n  }\n  20%{\n    transform: translateX(-13px);\n  }\n  40%{\n    transform: translateX(13px);\n  }\n  60%{\n    transform: translateX(-8px);\n  }\n  80%{\n    transform: translateX(8px);\n  }\n}\n.card .view{\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  border-radius: 7px;\n  background: #fff;\n  pointer-events: none;\n  backface-visibility: hidden;\n  box-shadow: 0 3px 10px cmyk(0,0,0,10%);\n  transition: transform 0.25s linear;\n}\n.card .front-view img{\n  width: 80px;\n}\n.card .back-view img{\n  max-width: 80px;\n}\n.card .back-view{\n  transform: rotateY(-180deg);\n}\n.card.flip .back-view{\n  transform: rotateY(0);\n}\n.card.flip .front-view{\n  transform: rotateY(180deg);\n}\ncontext and (max-width: 700px) {\n  .cards{\n    height: 350px;\n    width: 350px;\n  }\n  .card .front-view img{\n    width: 80px;\n  }\n  .card .back-view img{\n    max-width: 80px;\n  }\n}\ncontext and (max-width: 530px) {\n  .cards{\n    height: 300px;\n    width: 300px;\n  }\n  .card .front-view img{\n    width: 80px;\n  }\n  .card .back-view img{\n    max-width: 80px;\n  }\n}\n<\/style>\n<\/div><\/main><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/\">Home<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/word-scramble-2\/\">Word Scramble<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/tic-tac-toe-2\/\">Tic Tac Toe<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/projects.emat.kent.edu\/24sp-emat\/hangman-7\/\">Hangman<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":17,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-236","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":0,"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/pages\/236\/revisions"}],"wp:attachment":[{"href":"https:\/\/projects.emat.kent.edu\/24sp-emat\/wp-json\/wp\/v2\/media?parent=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}