{"id":3205,"date":"2022-01-15T00:00:27","date_gmt":"2022-01-15T00:00:27","guid":{"rendered":"https:\/\/code-boxx.com\/?p=3205"},"modified":"2023-06-30T02:28:05","modified_gmt":"2023-06-30T02:28:05","slug":"simple-memory-game-javascript","status":"publish","type":"post","link":"https:\/\/code-boxx.com\/simple-memory-game-javascript\/","title":{"rendered":"Simple Memory Game in Vanilla Javascript (Free Download)"},"content":{"rendered":"<p>Welcome to a beginner&#8217;s tutorial on how to create a simple memory game in Javascript. Interested to learn how to create browser games in Javascript? Or looking for a simple project to do? Then the class memory game is a good place to get started since it is not too complicated &#8211; Read on to find out!<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-101\"><\/div>\n<p>&nbsp;<\/p>\n<h2 class=\"in-head-d\">TABLE OF CONTENTS<\/h2>\n<div class=\"toc\">\n<div><a href=\"#sec-game\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-gear.svg\" width=\"36\" height=\"36\" \/>Javascript Memory Game<\/a><\/div>\n<div><a href=\"#sec-download\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\" width=\"36\" height=\"36\" \/>Download &amp; Notes<\/a><\/div>\n<div><a href=\"#sec-extra\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\" width=\"36\" height=\"36\" \/>Extra Bits &amp; Links<\/a><\/div>\n<div><a href=\"#sec-end\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\" width=\"36\" height=\"36\" \/>The End<\/a><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div id=\"sec-game\" class=\"sec-head\" style=\"background: #f0ffe0;\">\n<h2 class=\"in-head-d\">JAVASCRIPT MEMORY GAME<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-gear.svg\" width=\"80\" height=\"80\" \/><\/p>\n<p>All right, let us now get into a demo of the memory game, and some details of the mechanics.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">MEMORY GAME DEMO<\/span><\/h3>\n<div class=\"code-example\">\n<div id=\"mem-game\"><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-102\"><\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 1) THE HTML<\/span><\/h3>\n<div class=\"ref-head\">memory.html<\/div>\n<pre><code> &lt;div id=\"mem-game\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>HTML is the easiest component, we will use Javascript to generate the <code>&lt;img&gt;<\/code> cards into\u00a0<code style=\"font-style: inherit; font-weight: inherit;\">&lt;div id=\"mem-game\"&gt;<\/code>. That&#8217;s all.<\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 2) THE CSS<\/span><\/h3>\n<div class=\"ref-head\">memory.css<\/div>\n<pre><code>\/* (A) CONTAINER *\/\r\n#mem-game {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  grid-gap: 10px;\r\n  max-width: 420px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* (B) CARDS *\/\r\n.mem-card {\r\n  padding: 10px;\r\n  cursor: pointer;\r\n  background: #e5e5e5;\r\n}\r\n.mem-card.open { background: #fea; }\r\n.mem-card.right { background: #b3ffc0; }\r\n.mem-card.wrong { background: #ffb6b6; }<\/code><\/pre>\n<ul>\n<li>The important part here is essentially <code>display: grid<\/code>\u00a0and <code>grid-template-columns: auto auto auto auto<\/code>. CSS literally does the rest of the layout magic.<\/li>\n<li>The rest are kind of self-explanatory too.\n<ul style=\"list-style-type: circle;\">\n<li><code>.mem-card.open<\/code> is the style for opened cards.<\/li>\n<li><code>.mem-card.right<\/code> for cards that are correctly matched.<\/li>\n<li><code>.mem-card.wrong<\/code> for cards that are wrongly matched.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-103\"><\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 3) BASIC JAVASCRIPT MECHANICS<\/span><\/h3>\n<div class=\"ref-head\">memory.js<\/div>\n<pre><code>var mem = {\r\n  \/\/ (A) PROPERTIES\r\n  \/\/ (A1) HTML ELEMENT\r\n  hWrap : null, \/\/ html game wrapper\r\n \r\n  \/\/ (A2) GAME SETTINGS &amp; FLAGS\r\n  url : \"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/\", \/\/ optional,\r\n  moves : 0, \/\/ total number of moves url to images\r\n  sets : 6, \/\/ number of sets to match\r\n  grid : [], \/\/ current game grid\r\n  matched : 0, \/\/ number of sets that have been matched\r\n  last : null, \/\/ last opened card\r\n  lock : null, \/\/ timer, lock game controls when showing mismatched cards\r\n  hint : 1000, \/\/ how long to show mismatched cards\r\n  \/\/ ...\r\n}<\/code><\/pre>\n<ul>\n<li>Captain Obvious, <code>var mem<\/code> holds all the game mechanics.<\/li>\n<li>There are quite a number of flags, but the essentials are:\n<ul style=\"list-style-type: circle;\">\n<li><code>mem.sets<\/code> We define the total number of sets to pair.<\/li>\n<li>Since there are 6 images in this example, <code>mem.grid<\/code> will be an array of 12 (randomly shuffled) HTML images to pair.<\/li>\n<li>As the player matches a pair correctly, we track it with <code>mem.matched<\/code>; When <code>mem.matched == mem.sets<\/code>, the game ends.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 4) PRELOAD IMAGES<\/span><\/h3>\n<div class=\"ref-head\">memory.js<\/div>\n<pre><code>\/\/ (B) PRELOAD\r\npreload : () =&gt; {\r\n  \/\/ (B1) GET HTML GAME WRAPPER\r\n  mem.hWrap = document.getElementById(\"mem-game\");\r\n \r\n  \/\/ (B2) PRELOAD IMAGES\r\n  let img, loaded = -1;\r\n  for (let i=0; i&lt;=mem.sets; i++) {\r\n    img = document.createElement(\"img\");\r\n    img.onload = () =&gt; {\r\n      loaded++;\r\n      if (loaded == mem.sets) { mem.reset(); }\r\n    };\r\n    img.src = `${mem.url}smiley-${i}.png`;\r\n  }\r\n},\r\nwindow.addEventListener(\"DOMContentLoaded\", mem.preload);<\/code><\/pre>\n<p><code>mem.preload()<\/code> is the first thing that runs on window load. Shouldn&#8217;t be too difficult to understand &#8211; We preload all the images before proceeding to start the game.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-106\"><\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 5) START\/RESTART GAME<\/span><\/h3>\n<div class=\"ref-head\">memory.js<\/div>\n<pre><code>\/\/ (C) RESET GAME\r\nreset : () =&gt; {\r\n  \/\/ (C1) RESET ALL FLAGS\r\n  clearTimeout(mem.lock); mem.lock = null;\r\n  mem.moves = 0; mem.matched = 0;\r\n  mem.last = null; mem.grid = [];\r\n  for (let s=1; s&lt;=mem.sets; s++) {\r\n    mem.grid.push(s); mem.grid.push(s);\r\n  }\r\n \r\n \u00a0\/\/ (C2) RANDOM RESHUFFLE CARDS\r\n  \/\/ credits : https:\/\/gomakethings.com\/how-to-shuffle-an-array-with-vanilla-js\/\r\n  let current = mem.sets * 2, temp, random;\r\n  while (0 !== current) {\r\n    random = Math.floor(Math.random() * current);\r\n    current -= 1;\r\n    temp = mem.grid[current];\r\n    mem.grid[current] = mem.grid[random];\r\n    mem.grid[random] = temp;\r\n  }\r\n \r\n \u00a0\/\/ (C3) CREATE HTML CARDS\r\n  mem.hWrap.innerHTML = \"\";\r\n  for (let id in mem.grid) {\r\n    let card = document.createElement(\"img\");\r\n    card.className = \"mem-card\";\r\n    card.src = `${mem.url}smiley-0.png`;\r\n    card.onclick = () =&gt; mem.open(card);\r\n    card.set = mem.grid[id];\r\n    card.open = false;\r\n    mem.hWrap.appendChild(card);\r\n    mem.grid[id] = card;\r\n  }\r\n},<\/code><\/pre>\n<p>Now, this looks confusing, but keep calm and look carefully.<\/p>\n<ul>\n<li><strong>(C1)<\/strong> We reset all the game flags. In particular, regenerate <code>mem.grid<\/code> in running order &#8211; <code>[1, 1, 2, 2, 3, 3, ... 6, 6]<\/code><\/li>\n<li><strong>(C2)<\/strong> Reshuffle <code>mem.grid<\/code> randomly.<\/li>\n<li><strong>(C3)<\/strong> Loop through <code>mem.grid<\/code> and generate the HTML images.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-107\"><\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">PART 6) SELECT A CARD<\/span><\/h3>\n<div class=\"ref-head\">memory.js<\/div>\n<pre><code>\/\/ (D) OPEN A CARD\r\nopen : card =&gt; { if (mem.lock == null) { if (!card.open) {\r\n  \/\/ (D1) UPDATE FLAGS &amp; HTML\r\n  card.open = true;\r\n  mem.moves++;\r\n  card.src = `${mem.url}smiley-${card.set}.png`;\r\n  card.classList.add(\"open\");\r\n \r\n \u00a0\/\/ (D2) FIRST CARD - SET IN LAST\r\n  if (mem.last == null) { mem.last = card; }\r\n \r\n \u00a0\/\/ (D3) SECOND CARD - CHECK MATCH\r\n  else {\r\n    \/\/ (D3-1) REMOVE CSS CLASS\r\n    card.classList.remove(\"open\");\r\n    mem.last.classList.remove(\"open\");\r\n \r\n    \/\/ (D3-2) MATCHED\r\n    if (card.set == mem.last.set) {\r\n      \/\/ UPDATE FLAGS + CSS\r\n      mem.matched++;\r\n      card.classList.add(\"right\");\r\n      mem.last.classList.add(\"right\");\r\n      mem.last = null;\r\n \r\n      \/\/ END GAME?\r\n      if (mem.matched == mem.sets) {\r\n        alert(\"YOU WIN! TOTAL MOVES \" + mem.moves);\r\n        mem.reset();\r\n      }\r\n    }\r\n \r\n   \u00a0\/\/ (D3-3) NOT MATCHED - CLOSE BOTH CARDS ONLY AFTER A WHILE\r\n    else {\r\n      card.classList.add(\"wrong\");\r\n      mem.last.classList.add(\"wrong\");\r\n      mem.lock = setTimeout(() =&gt; {\r\n        card.classList.remove(\"wrong\");\r\n        mem.last.classList.remove(\"wrong\");\r\n        card.open = false;\r\n        mem.last.open = false;\r\n        card.src = `${mem.url}smiley-0.png`;\r\n        mem.last.src = `${mem.url}smiley-0.png`;\r\n        mem.last = null;\r\n        mem.lock = null;\r\n      }, mem.hint);\r\n    }\r\n  }\r\n}}}<\/code><\/pre>\n<p>When the player picks a card, a number of things happen.<\/p>\n<ul>\n<li><strong>(D1)<\/strong> We set <code>card.open = true<\/code> to mark the card as &#8220;currently open&#8221;; Clicking on this card while it is already open does nothing.<\/li>\n<li><strong>(D2)<\/strong> Remember this game is about matching pairs? If it is the first opened card, we simply set it into <code>mem.last<\/code>.<\/li>\n<li><strong>(D3)<\/strong> On opening the second card, we check if it matches with <code>mem.last<\/code>.\n<ul style=\"list-style-type: circle;\">\n<li><strong>(D3-2)<\/strong> Increment <code>mem.matched<\/code> if it is a match, check if the game has ended.<\/li>\n<li><strong>(D3-3)<\/strong> If not, we let the cards remain open for a second before closing both of them.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id=\"ezoic-pub-ad-placeholder-108\"><\/div>\n<p>&nbsp;<\/p>\n<div id=\"sec-download\" class=\"sec-head\" style=\"background: #ffe8de;\">\n<h2 class=\"in-head-d\">DOWNLOAD &amp; NOTES<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-download.svg\" width=\"80\" height=\"80\" \/><\/p>\n<p>Here is the download link to the example code, so you don&#8217;t have to copy-paste everything.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">SORRY FOR THE ADS...<\/span><\/h3>\r\n<p>But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a \"paid scripts\" business, and I don't \"block people with Adblock\". Every little bit of support helps.<\/p>\r\n\r\n<p><a class=\"ast-button\" href=\"https:\/\/www.paypal.com\/paypalme\/wstoh\/5\" target=\"_blank\" rel=\"nofollow noopener\">Buy Me A Coffee<\/a> <a class=\"ast-button\" href=\"https:\/\/payhip.com\/codeboxx\" target=\"_blank\" rel=\"nofollow noopener\">Code Boxx eBooks<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">EXAMPLE CODE DOWNLOAD<\/span><\/h3>\n<p><a href=\"https:\/\/gist.github.com\/code-boxx\/4dd86946a1899172145e447fed30cd26\" target=\"_blank\" rel=\"noopener noreferrer\">Click here for the source code on GitHub gist<\/a>, just click on &#8220;download zip&#8221; or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"sec-extra\" class=\"sec-head\" style=\"background: #f8d5ff;\">\n<h2 class=\"in-head-d\">EXTRA BITS &amp; LINKS<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-plus-square.svg\" width=\"80\" height=\"80\" \/><\/p>\n<p>That&#8217;s all for this project, and here is a small section on some extras and links that may be useful to you.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">GAME RULES<\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3217 aligncenter\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/JS-mem-game-20230630.webp\" alt=\"\" width=\"436\" height=\"328\" \/><\/p>\n<p>For the people who somehow cannot figure the game out&#8230;<\/p>\n<ul>\n<li>There are a number of &#8220;cards&#8221; that are scattered randomly across a grid in pairs.<\/li>\n<li>The player opens a pair of cards in the grid &#8211; If the cards match, that is &#8220;one point&#8221; and the player will continue to find the next pair.<\/li>\n<li>But if the cards don&#8217;t match, they will &#8220;fold back&#8221; to become hidden.<\/li>\n<li>The player will have to try to remember all the positions of the cards and match all of them to win.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">COMPATIBILITY CHECKS<\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/caniuse.com\/arrow-functions\" target=\"_blank\" rel=\"noopener\">Arrow Functions<\/a> &#8211; CanIUse<\/li>\n<li><a href=\"https:\/\/caniuse.com\/template-literals\" target=\"_blank\" rel=\"noopener\">Template Literals<\/a> &#8211; CanIUse<\/li>\n<\/ul>\n<p>This example will work on all modern &#8220;Grade A&#8221; browsers.<\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"color: #008000;\">LINKS &amp; REFERENCES<\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/code-boxx.com\/javascript-blackjack\/\" target=\"_blank\" rel=\"noopener\">Javascript BlackJack<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-javascript-minesweeper\/\" target=\"_blank\" rel=\"noopener\">Javascript MineSweeper<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-hangman-game-javascript\/\" target=\"_blank\" rel=\"noopener\">Javascript Hangman<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-javascript-quiz\/\" target=\"_blank\" rel=\"noopener\">Javascript Quiz<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-memory-game-javascript\/\" target=\"_blank\" rel=\"noopener\">Javascript Memory Game<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-javascript-number-guessing-game\/\" target=\"_blank\" rel=\"noopener\">Javascript Number Guessing Game<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/simple-javascript-tic-tac-toe\/\" target=\"_blank\" rel=\"noopener\">Javascript Tic-Tac-Toe<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/code-boxx.com\/javascript-rock-paper-scissors-game\/\" target=\"_blank\" rel=\"noopener\">Javascript Rock Paper Scissors Game<\/a> &#8211; Code Boxx<\/li>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\/Matching_game\" target=\"_blank\" rel=\"noopener noreferrer\">Matching Game &#8211; Wikipedia<\/a><\/li>\n<li><a href=\"https:\/\/pixabay.com\/illustrations\/emoji-emoticon-smilies-icon-faces-2074153\/\" target=\"_blank\" rel=\"noopener noreferrer\">Emoji Icon set on Pixabay (free to use)<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div id=\"sec-end\" class=\"sec-head\" style=\"background: #f1f1f1;\">\n<h2 class=\"in-head-d\">THE END<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2019\/08\/ico-thumbs-up.svg\" width=\"80\" height=\"80\" \/><\/p>\n<p>Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!<\/p>\n<\/div>\n<style>#mem-game{display:grid;grid-template-columns:auto auto auto auto;grid-gap:10px;max-width:420px;margin:0 auto}.mem-card{padding:10px;cursor:pointer;background:#e5e5e5}.mem-card.open{background:#fea}.mem-card.right{background:#b3ffc0}.mem-card.wrong{background:#ffb6b6}<\/style>\n<p><script defer src=\"https:\/\/code-boxx.com\/wp-content\/uploads\/2022\/01\/mem-game-m.js\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to a beginner&#8217;s tutorial on how to create a simple memory game in Javascript. Interested to learn how to create browser games in Javascript? Or looking for a simple project to do? Then the class memory game is a good place to get started since it is not too complicated &#8211; Read on to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":21155,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[15],"tags":[],"class_list":["post-3205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js"],"_links":{"self":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/3205"}],"collection":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/comments?post=3205"}],"version-history":[{"count":0,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/posts\/3205\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media\/21155"}],"wp:attachment":[{"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/media?parent=3205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/categories?post=3205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-boxx.com\/wp-json\/wp\/v2\/tags?post=3205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}