{"id":2111,"date":"2022-07-06T17:14:00","date_gmt":"2022-07-06T12:14:00","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=2111"},"modified":"2022-07-15T00:00:43","modified_gmt":"2022-07-14T19:00:43","slug":"wordle-clone-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/","title":{"rendered":"Wordle Clone JavaScript &#8211; Full Source Code"},"content":{"rendered":"\n<p>In this tutorial, you will learn how to create a <strong>JavaScript Wordle clone<\/strong>. I&#8217;ll also provide the full <strong>wordle source code<\/strong> in this article.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Download Files Containing List of Words<\/h2>\n\n\n\n<p>Before getting started, download these JavaScript files and place them in the root folder of your project. Basically, both of these files contain a JavaScript array of all the possible words. These files were huge in size, that&#8217;s why I&#8217;m providing the download link here instead of the source code.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.edopedia.com\/assets\/downloads\/static\/wordle_clone_javascript\/targetWords.js\" target=\"_blank\" rel=\"noreferrer noopener\" download=\"\">targetWords.js<\/a><\/li><li><a href=\"https:\/\/www.edopedia.com\/assets\/downloads\/static\/wordle_clone_javascript\/dictionary.js\" target=\"_blank\" rel=\"noreferrer noopener\" download=\"\">dictionary.js<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">index.html<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;UTF-8&quot;&gt;\n  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;\n  &lt;script src=&quot;targetWords.js&quot; defer&gt;&lt;\/script&gt;\n  &lt;script src=&quot;dictionary.js&quot; defer&gt;&lt;\/script&gt;\n  &lt;script src=&quot;script.js&quot; defer&gt;&lt;\/script&gt;\n  &lt;title&gt;Wordle Clone JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=&quot;alert-container&quot; data-alert-container&gt;&lt;\/div&gt;\n  &lt;div data-guess-grid class=&quot;guess-grid&quot;&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;tile&quot;&gt;&lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;div data-keyboard class=&quot;keyboard&quot;&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;Q&quot;&gt;Q&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;W&quot;&gt;W&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;E&quot;&gt;E&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;R&quot;&gt;R&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;T&quot;&gt;T&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;Y&quot;&gt;Y&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;U&quot;&gt;U&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;I&quot;&gt;I&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;O&quot;&gt;O&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;P&quot;&gt;P&lt;\/button&gt;\n    &lt;div class=&quot;space&quot;&gt;&lt;\/div&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;A&quot;&gt;A&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;S&quot;&gt;S&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;D&quot;&gt;D&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;F&quot;&gt;F&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;G&quot;&gt;G&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;H&quot;&gt;H&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;J&quot;&gt;J&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;K&quot;&gt;K&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;L&quot;&gt;L&lt;\/button&gt;\n    &lt;div class=&quot;space&quot;&gt;&lt;\/div&gt;\n    &lt;button data-enter class=&quot;key large&quot;&gt;Enter&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;Z&quot;&gt;Z&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;X&quot;&gt;X&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;C&quot;&gt;C&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;V&quot;&gt;V&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;B&quot;&gt;B&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;N&quot;&gt;N&lt;\/button&gt;\n    &lt;button class=&quot;key&quot; data-key=&quot;M&quot;&gt;M&lt;\/button&gt;\n    &lt;button data-delete class=&quot;key large&quot;&gt;\n      &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; width=&quot;24&quot;&gt;\n        &lt;path fill=&quot;var(--color-tone-1)&quot; d=&quot;M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H7.07L2.4 12l4.66-7H22v14zm-11.59-2L14 13.41 17.59 17 19 15.59 15.41 12 19 8.41 17.59 7 14 10.59 10.41 7 9 8.41 12.59 12 9 15.59z&quot;&gt;&lt;\/path&gt;\n      &lt;\/svg&gt;\n    &lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">styles.css<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">*, *::after, *::before {\n  box-sizing: border-box;\n  font-family: Arial;\n}\n\nbody {\n  background-color: hsl(240, 3%, 7%);\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  margin: 0;\n  padding: 1em;\n  font-size: clamp(.5rem, 2.5vmin, 1.5rem);\n}\n\n.keyboard {\n  display: grid;\n  grid-template-columns: repeat(20, minmax(auto, 1.25em));\n  grid-auto-rows: 3em;\n  gap: .25em;\n  justify-content: center;\n}\n\n.key {\n  font-size: inherit;\n  grid-column: span 2;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: hsl(\n    var(--hue, 200),\n    var(--saturation, 1%),\n    calc(var(--lightness-offset, 0%) + var(--lightness, 51%))\n  );\n  color: white;\n  fill: white;\n  text-transform: uppercase;\n  border-radius: .25em;\n  cursor: pointer;\n  user-select: none;\n}\n\n.key.large {\n  grid-column: span 3;\n}\n\n.key &gt; svg {\n  width: 1.75em;\n  height: 1.75em;\n}\n\n.key:hover, .key:focus {\n  --lightness-offset: 10%;\n}\n\n.key.wrong {\n  --lightness: 23%;\n}\n\n.key.wrong-location {\n  --hue: 49;\n  --saturation: 51%;\n  --lightness: 47%;\n}\n\n.key.correct {\n  --hue: 115;\n  --saturation: 29%;\n  --lightness: 43%;\n}\n\n.guess-grid {\n  display: grid;\n  justify-content: center;\n  align-content: center;\n  flex-grow: 1;\n  grid-template-columns: repeat(5, 4em);\n  grid-template-rows: repeat(6, 4em);\n  gap: .25em;\n  margin-bottom: 1em;\n}\n\n.tile {\n  font-size: 2em;\n  color: white;\n  border: .05em solid hsl(240, 2%, 23%);\n  text-transform: uppercase;\n  font-weight: bold;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  transition: transform 250ms linear;\n}\n\n.tile[data-state=&quot;active&quot;] {\n  border-color: hsl(200, 1%, 34%);\n}\n\n.tile[data-state=&quot;wrong&quot;] {\n  border: none;\n  background-color: hsl(240, 2%, 23%);\n}\n\n.tile[data-state=&quot;wrong-location&quot;] {\n  border: none;\n  background-color: hsl(49, 51%, 47%);\n}\n\n.tile[data-state=&quot;correct&quot;] {\n  border: none;\n  background-color: hsl(115, 29%, 43%);\n}\n\n.tile.shake {\n  animation: shake 250ms ease-in-out;\n}\n\n.tile.dance {\n  animation: dance 500ms ease-in-out;\n}\n\n.tile.flip {\n  transform: rotateX(90deg);\n}\n\n@keyframes shake {\n  10% {\n    transform: translateX(-5%);\n  }\n\n  30% {\n    transform: translateX(5%);\n  }\n\n  50% {\n    transform: translateX(-7.5%);\n  }\n\n  70% {\n    transform: translateX(7.5%);\n  }\n\n  90% {\n    transform: translateX(-5%);\n  }\n\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes dance {\n  20% {\n    transform: translateY(-50%);\n  }  \n\n  40% {\n    transform: translateY(5%);\n  }  \n\n  60% {\n    transform: translateY(-25%);\n  }  \n\n  80% {\n    transform: translateY(2.5%);\n  }  \n\n  90% {\n    transform: translateY(-5%);\n  }  \n\n  100% {\n    transform: translateY(0);\n  }\n}\n\n.alert-container {\n  position: fixed;\n  top: 10vh;\n  left: 50vw;\n  transform: translateX(-50%);\n  z-index: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.alert {\n  pointer-events: none;\n  background-color: hsl(204, 7%, 85%);\n  padding: .75em;\n  border-radius: .25em;\n  opacity: 1;\n  transition: opacity 500ms ease-in-out;\n  margin-bottom: .5em;\n}\n\n.alert:last-child {\n  margin-bottom: 0;\n}\n\n.alert.hide {\n  opacity: 0;\n}<\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">script.js<\/h2>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const WORD_LENGTH = 5\nconst FLIP_ANIMATION_DURATION = 500\nconst DANCE_ANIMATION_DURATION = 500\nconst keyboard = document.querySelector(&quot;[data-keyboard]&quot;)\nconst alertContainer = document.querySelector(&quot;[data-alert-container]&quot;)\nconst guessGrid = document.querySelector(&quot;[data-guess-grid]&quot;)\nconst offsetFromDate = new Date(2022, 0, 1)\nconst msOffset = Date.now() - offsetFromDate\nconst dayOffset = msOffset \/ 1000 \/ 60 \/ 60 \/ 24\nconst targetWord = targetWords[Math.floor(dayOffset)]\n\nstartInteraction()\n\nfunction startInteraction() {\n  document.addEventListener(&quot;click&quot;, handleMouseClick)\n  document.addEventListener(&quot;keydown&quot;, handleKeyPress)\n}\n\nfunction stopInteraction() {\n  document.removeEventListener(&quot;click&quot;, handleMouseClick)\n  document.removeEventListener(&quot;keydown&quot;, handleKeyPress)\n}\n\nfunction handleMouseClick(e) {\n  if (e.target.matches(&quot;[data-key]&quot;)) {\n    pressKey(e.target.dataset.key)\n    return\n  }\n\n  if (e.target.matches(&quot;[data-enter]&quot;)) {\n    submitGuess()\n    return\n  }\n\n  if (e.target.matches(&quot;[data-delete]&quot;)) {\n    deleteKey()\n    return\n  }\n}\n\nfunction handleKeyPress(e) {\n  if (e.key === &quot;Enter&quot;) {\n    submitGuess()\n    return\n  }\n\n  if (e.key === &quot;Backspace&quot; || e.key === &quot;Delete&quot;) {\n    deleteKey()\n    return\n  }\n\n  if (e.key.match(\/^[a-z]$\/)) {\n    pressKey(e.key)\n    return\n  }\n}\n\nfunction pressKey(key) {\n  const activeTiles = getActiveTiles()\n  if (activeTiles.length &gt;= WORD_LENGTH) return\n  const nextTile = guessGrid.querySelector(&quot;:not([data-letter])&quot;)\n  nextTile.dataset.letter = key.toLowerCase()\n  nextTile.textContent = key\n  nextTile.dataset.state = &quot;active&quot;\n}\n\nfunction deleteKey() {\n  const activeTiles = getActiveTiles()\n  const lastTile = activeTiles[activeTiles.length - 1]\n  if (lastTile == null) return\n  lastTile.textContent = &quot;&quot;\n  delete lastTile.dataset.state\n  delete lastTile.dataset.letter\n}\n\nfunction submitGuess() {\n  const activeTiles = [...getActiveTiles()]\n  if (activeTiles.length !== WORD_LENGTH) {\n    showAlert(&quot;Not enough letters&quot;)\n    shakeTiles(activeTiles)\n    return\n  }\n\n  const guess = activeTiles.reduce((word, tile) =&gt; {\n    return word + tile.dataset.letter\n  }, &quot;&quot;)\n\n  if (!dictionary.includes(guess)) {\n    showAlert(&quot;Not in word list&quot;)\n    shakeTiles(activeTiles)\n    return\n  }\n\n  stopInteraction()\n  activeTiles.forEach((...params) =&gt; flipTile(...params, guess))\n}\n\nfunction flipTile(tile, index, array, guess) {\n  const letter = tile.dataset.letter\n  const key = keyboard.querySelector(`[data-key=&quot;${letter}&quot;i]`)\n  setTimeout(() =&gt; {\n    tile.classList.add(&quot;flip&quot;)\n  }, (index * FLIP_ANIMATION_DURATION) \/ 2)\n\n  tile.addEventListener(\n    &quot;transitionend&quot;,\n    () =&gt; {\n      tile.classList.remove(&quot;flip&quot;)\n      if (targetWord[index] === letter) {\n        tile.dataset.state = &quot;correct&quot;\n        key.classList.add(&quot;correct&quot;)\n      } else if (targetWord.includes(letter)) {\n        tile.dataset.state = &quot;wrong-location&quot;\n        key.classList.add(&quot;wrong-location&quot;)\n      } else {\n        tile.dataset.state = &quot;wrong&quot;\n        key.classList.add(&quot;wrong&quot;)\n      }\n\n      if (index === array.length - 1) {\n        tile.addEventListener(\n          &quot;transitionend&quot;,\n          () =&gt; {\n            startInteraction()\n            checkWinLose(guess, array)\n          },\n          { once: true }\n        )\n      }\n    },\n    { once: true }\n  )\n}\n\nfunction getActiveTiles() {\n  return guessGrid.querySelectorAll('[data-state=&quot;active&quot;]')\n}\n\nfunction showAlert(message, duration = 1000) {\n  const alert = document.createElement(&quot;div&quot;)\n  alert.textContent = message\n  alert.classList.add(&quot;alert&quot;)\n  alertContainer.prepend(alert)\n  if (duration == null) return\n\n  setTimeout(() =&gt; {\n    alert.classList.add(&quot;hide&quot;)\n    alert.addEventListener(&quot;transitionend&quot;, () =&gt; {\n      alert.remove()\n    })\n  }, duration)\n}\n\nfunction shakeTiles(tiles) {\n  tiles.forEach(tile =&gt; {\n    tile.classList.add(&quot;shake&quot;)\n    tile.addEventListener(\n      &quot;animationend&quot;,\n      () =&gt; {\n        tile.classList.remove(&quot;shake&quot;)\n      },\n      { once: true }\n    )\n  })\n}\n\nfunction checkWinLose(guess, tiles) {\n  if (guess === targetWord) {\n    showAlert(&quot;You Win&quot;, 5000)\n    danceTiles(tiles)\n    stopInteraction()\n    return\n  }\n\n  const remainingTiles = guessGrid.querySelectorAll(&quot;:not([data-letter])&quot;)\n  if (remainingTiles.length === 0) {\n    showAlert(targetWord.toUpperCase(), null)\n    stopInteraction()\n  }\n}\n\nfunction danceTiles(tiles) {\n  tiles.forEach((tile, index) =&gt; {\n    setTimeout(() =&gt; {\n      tile.classList.add(&quot;dance&quot;)\n      tile.addEventListener(\n        &quot;animationend&quot;,\n        () =&gt; {\n          tile.classList.remove(&quot;dance&quot;)\n        },\n        { once: true }\n      )\n    }, (index * DANCE_ANIMATION_DURATION) \/ 5)\n  })\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to create a JavaScript Wordle clone. I&#8217;ll also provide the full wordle source code in this article. Download Files Containing List of Words Before getting started, download these JavaScript files and place them in the root folder of your project. Basically, both of these files contain a JavaScript &#8230; <a title=\"Wordle Clone JavaScript &#8211; Full Source Code\" class=\"read-more\" href=\"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/\" aria-label=\"Read more about Wordle Clone JavaScript &#8211; Full Source Code\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-2111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wordle Clone JavaScript - Full Source Code<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to create a JavaScript Wordle clone. I&#039;ll also provide the full wordle source code in this article. Download Files\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wordle Clone JavaScript - Full Source Code\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to create a JavaScript Wordle clone. I&#039;ll also provide the full wordle source code in this article. Download Files\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-06T12:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-14T19:00:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wordle Clone JavaScript - Full Source Code","description":"In this tutorial, you will learn how to create a JavaScript Wordle clone. I'll also provide the full wordle source code in this article. Download Files","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:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Wordle Clone JavaScript - Full Source Code","og_description":"In this tutorial, you will learn how to create a JavaScript Wordle clone. I'll also provide the full wordle source code in this article. Download Files","og_url":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-07-06T12:14:00+00:00","article_modified_time":"2022-07-14T19:00:43+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Wordle Clone JavaScript &#8211; Full Source Code","datePublished":"2022-07-06T12:14:00+00:00","dateModified":"2022-07-14T19:00:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/"},"wordCount":97,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/","name":"Wordle Clone JavaScript - Full Source Code","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg","datePublished":"2022-07-06T12:14:00+00:00","dateModified":"2022-07-14T19:00:43+00:00","description":"In this tutorial, you will learn how to create a JavaScript Wordle clone. I'll also provide the full wordle source code in this article. Download Files","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/07\/wordle_clone_js.jpg","width":880,"height":495,"caption":"Wordle Clone JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/wordle-clone-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Wordle Clone JavaScript &#8211; Full Source Code"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=2111"}],"version-history":[{"count":0,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/2111\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/2113"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=2111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=2111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=2111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}