{"id":11487,"date":"2024-03-22T13:56:46","date_gmt":"2024-03-22T08:56:46","guid":{"rendered":"https:\/\/codehim.com\/?p=11487"},"modified":"2024-03-22T14:10:00","modified_gmt":"2024-03-22T09:10:00","slug":"squid-game-prize-counter-using-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/","title":{"rendered":"Squid Game Prize Counter Using JavaScript"},"content":{"rendered":"

This JavaScript code snippet helps you to create a Squid Game Prize Counter that dynamically displays and animates a prize amount. It counts digits individually<\/a>. It helps create dynamic counters or displays.<\/p>\n

You can use this code on any website or web application to display dynamic prize amounts. It enhances user engagement by showcasing changing prize values in a visually appealing manner. Perfect for gaming websites, fundraising platforms, or any site featuring fluctuating monetary rewards.<\/p>\n

How to Create Squid Game Prize Counter Using JavaScript<\/h2>\n

1. First of all, load the Google Fonts<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@900&display=swap\" rel=\"stylesheet\">\r\n<\/pre>\n
2. Create a new HTML file and open it in your text editor. Define the basic structure of your HTML document. Within the <body><\/code> tags, create an element with an ID to represent the prize amount. For example:<\/p>\n
<div id=\"app\">\r\n  <div id=\"prize\">\r\n    <div id=\"prize-lines\" class=\"prize-filter\"><\/div>\r\n    <div id=\"prize-shadow\" class=\"prize-filter\"><\/div>\r\n    <h2 id=\"prize-label\">\r\n      <span class=\"asterisk\">*<\/span>\r\n      <span>CASH PRIZE<\/span>\r\n      <span class=\"asterisk\">*<\/span>      \r\n    <\/h2>\r\n    <h1 id=\"prize-text\"><\/h1>\r\n  <\/div>\r\n  \r\n  <div id=\"shapes\">\r\n    <i class=\"fa-regular fa-circle\"><\/i>\r\n    <i class=\"fa-regular fa-square\"><\/i>\r\n    <i class=\"fa-regular fa-triangle\"><\/i>\r\n  <\/div>\r\n  \r\n  <div id=\"actions-wrapper\">\r\n    <div id=\"actions\">\r\n      <div id=\"theme-actions\">\r\n        <button class=\"theme-button\" data-theme=\"green\" data-selected=\"true\" onclick=\"handleChangeTheme(event)\">\r\n          <i class=\"fa-regular fa-circle\"><\/i>\r\n        <\/button>\r\n        <button class=\"theme-button\" data-theme=\"blue\" onclick=\"handleChangeTheme(event)\">\r\n          <i class=\"fa-regular fa-square\"><\/i>\r\n        <\/button>\r\n        <button class=\"theme-button\" data-theme=\"pink\" onclick=\"handleChangeTheme(event)\">\r\n          <i class=\"fa-regular fa-triangle\"><\/i>\r\n        <\/button>\r\n      <\/div>\r\n      <button id=\"redo-button\" type=\"button\" onclick=\"handleRedo()\">\r\n        <i class=\"fa-solid fa-arrows-repeat\"><\/i>\r\n        <span>Rerun<\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/div>\r\n<\/div><\/pre>\n
3. Include the following CSS code to style the prize counter and make it visually appealing. This CSS will define the appearance of the prize counter, including fonts, colors, and animations.<\/p>\n
:root {\r\n  --dark-rgb: 23 28 28;\r\n  --darker-rgb: 8 13 7;\r\n  \r\n  --green: 9 252 8;\r\n  --blue: 59 130 246;\r\n  --pink: 231 60 126;\r\n  \r\n  --background-rgb: 12 12 12;\r\n  --theme-rgb: var(--green);\r\n}\r\n\r\nbody {\r\n  background-color: black !important;\r\n  height: 100vh;  \r\n  overflow: hidden;\r\n  font-family: \"Orbitron\", sans-serif;\r\n}\r\n\r\nbutton {  \r\n  font-family: \"Orbitron\", sans-serif;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n#app {\r\n  height: 100%;\r\n  width: 100%;\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: linear-gradient(\r\n    60deg, \r\n    rgb(var(--background-rgb)) 30%, \r\n    rgb(var(--theme-rgb) \/ 8%) 50%, \r\n    rgb(var(--background-rgb)) 70%\r\n  );\r\n}\r\n\r\n#shapes {\r\n  height: calc(100% - 2rem);\r\n  width: calc(100% - 2rem);  \r\n  position: fixed;\r\n  left: 0%;\r\n  top: 0%;\r\n  z-index: 1;\r\n  margin: 1rem;\r\n  border: 0.15rem dashed rgb(var(--theme-rgb) \/ 30%);\r\n  pointer-events: none;\r\n}\r\n\r\n#shapes:before,\r\n#shapes:after {\r\n  content: \"\";\r\n  position: absolute;\r\n  background-color: rgb(255 255 255 \/ 15%);\r\n}\r\n\r\n#shapes:before {\r\n  height: 0.2rem;\r\n  width: 30%;\r\n  min-width: 10rem;\r\n  left: 10%;\r\n  top: 20%;\r\n}\r\n\r\n#shapes:after {\r\n  width: 0.2rem;\r\n  height: 20%;\r\n  min-height: 14rem;\r\n  right: 25%;\r\n  bottom: -2rem;\r\n}\r\n\r\n@keyframes float {\r\n  from, to {\r\n    translate: 0% 0%;\r\n  }\r\n  \r\n  50% {\r\n    translate: 0% 10%;\r\n  }\r\n}\r\n\r\n#shapes > i {\r\n  position: absolute;\r\n  color: white;\r\n  opacity: 0.1;\r\n  animation: float 6000ms infinite;\r\n  color: rgb(var(--theme-rgb));\r\n}\r\n\r\n#shapes > i.fa-circle {\r\n  font-size: 3rem;\r\n  left: 16%;\r\n  top: 4%;\r\n}\r\n\r\n#shapes > i.fa-triangle {\r\n  font-size: 8rem;\r\n  right: 8%;\r\n  top: 16%;\r\n  rotate: 4deg;\r\n  animation-delay: -2000ms;\r\n}\r\n\r\n#shapes > i.fa-square {\r\n  font-size: 4rem;\r\n  left: 32%;\r\n  bottom: 16%;\r\n  rotate: -2deg;\r\n  animation-delay: -4000ms;\r\n}\r\n\r\n#prize {\r\n  width: 88rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  position: relative;\r\n  z-index: 2;\r\n  background-color: rgb(var(--darker-rgb));\r\n  border: 1.5rem solid rgb(255 255 255 \/ 2.5%);\r\n  padding: 10rem 4rem;  \r\n  box-shadow: 0rem 0rem 10rem 4rem rgb(0 0 0 \/ 75%);\r\n  backdrop-filter: blur(1rem);\r\n}\r\n\r\n#prize-label,\r\n#prize-text {\r\n  color: rgb(var(--theme-rgb));\r\n  text-align: center;\r\n}\r\n\r\n#prize-label {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 2rem;\r\n  font-size: 3rem;\r\n  opacity: 0.75;\r\n}\r\n\r\n#prize-label > span {\r\n  display: inline-flex; \r\n}\r\n\r\n#prize-label > .asterisk {\r\n  padding-top: 0.25em;\r\n  line-height: 0.5em;\r\n}\r\n\r\n#prize-text {  \r\n  display: flex;\r\n  gap: 1rem;\r\n  height: 10rem;\r\n  line-height: 10rem;\r\n  font-size: 11rem;\r\n}\r\n\r\n#prize-text > .digit {  \r\n  width: 8rem;\r\n  position: relative;\r\n  overflow: hidden;\r\n  border-bottom: 0.25rem solid rgb(var(--theme-rgb));\r\n}\r\n\r\n#prize-text > .digit > .digit-track {  \r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: absolute; \r\n  left: 0%;\r\n  top: 0%;\r\n  translate: 0% 0%;\r\n  transition: translate 3000ms cubic-bezier(.1,.67,0,1);\r\n}\r\n\r\n.prize-filter {\r\n  height: 100%;\r\n  width: 100%;\r\n  position: absolute;\r\n  left: 0%;\r\n  top: 0%;\r\n  pointer-events: none;\r\n}\r\n\r\n@keyframes pan-lines {\r\n  from {\r\n    background-position: 0% 0%;\r\n  }\r\n  \r\n  to {\r\n    background-position: 0% -100%;\r\n  }\r\n}\r\n\r\n#prize-lines {\r\n  background: linear-gradient(\r\n    rgb(var(--darker-rgb) \/ 15%) 0%,\r\n    rgb(var(--darker-rgb) \/ 75%) 28%,\r\n    rgb(var(--darker-rgb) \/ 15%) 56%,\r\n    rgb(var(--darker-rgb) \/ 5%) 56%,\r\n    rgb(var(--darker-rgb) \/ 5%) 100%\r\n  );\r\n  background-size: 100% 7px;\r\n  z-index: 2;\r\n  animation: pan-lines 360s infinite linear;\r\n}\r\n\r\n#prize-shadow {\r\n  background: radial-gradient(\r\n    rgb(var(--theme-rgb) \/ 1%) 20%, \r\n    rgb(var(--darker-rgb) \/ 80%) 70%\r\n  );\r\n  z-index: 3;\r\n}\r\n\r\n#actions-wrapper {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  position: fixed;\r\n  bottom: 2rem;\r\n  z-index: 10;\r\n}\r\n\r\n#actions {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n  padding: 1rem;\r\n  background-color: rgb(0 0 0 \/ 50%);\r\n  border: 1px solid rgb(255 255 255 \/ 5%);\r\n  border-radius: 0.5rem;\r\n  backdrop-filter: blur(1rem);\r\n}\r\n\r\n#actions button {\r\n  height: 3rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n  padding: 0rem 1.5rem;\r\n  background-color: rgb(255 255 255 \/ 5%);  \r\n  border-radius: 0.25rem;\r\n  border: 1px solid rgb(255 255 255 \/ 5%);\r\n  color: white;\r\n  font-size: 0.8rem;\r\n  text-transform: uppercase;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\n#actions button:is(:hover, :focus-visible) {\r\n  background-color: rgb(255 255 255 \/ 7%);\r\n}\r\n\r\n#actions button:focus-visible {\r\n  border-color: rgb(255 255 255 \/ 15%);\r\n}\r\n\r\n#redo-button > i {  \r\n  padding-top: 0.2rem;\r\n}\r\n\r\n#theme-actions {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n\r\n#theme-actions > .theme-button > i {\r\n  color: white;\r\n  font-size: 1.25rem;\r\n}\r\n\r\n#theme-actions > .theme-button[data-theme=\"green\"][data-selected=\"true\"] > i {\r\n  color: rgb(var(--green));\r\n}\r\n\r\n#theme-actions > .theme-button[data-theme=\"blue\"][data-selected=\"true\"] > i {\r\n  color: rgb(var(--blue));\r\n}\r\n\r\n#theme-actions > .theme-button[data-theme=\"pink\"][data-selected=\"true\"] > i {\r\n  color: rgb(var(--pink));\r\n}\r\n\r\n@media(max-width: 1700px) {\r\n  #prize {\r\n    scale: 0.75;\r\n  }\r\n}\r\n\r\n@media(max-width: 1300px) {\r\n  #prize {\r\n    scale: 0.5;\r\n  }\r\n}\r\n\r\n@media(max-width: 900px) {\r\n  #prize {\r\n    scale: 0.3;\r\n  }\r\n}\r\n\r\n@media(max-width: 600px) {\r\n  #prize {\r\n    scale: 0.2;\r\n  }\r\n}<\/pre>\n
4. Now, load the Font Awesome Kit<\/a> by adding the following CDN link just before closing the body tag:<\/p>\n
<script src='https:\/\/codepen.io\/Hyperplexed\/pen\/xxYJYjM\/54407644e24173ad6019b766443bf2a6.js'><\/script><\/pre>\n
5. Finally, add the following JavaScript code to your project. It calculates and displays the prize amount dynamically. It includes functions for setting up the counter, animating the counter, and resetting the animation.<\/p>\n
const MINIMUM_ADDITIONAL_ITERATION_COUNT = 2;\r\n\r\nconst config = {  \r\n  additionalIterationCount: Math.max(MINIMUM_ADDITIONAL_ITERATION_COUNT, 3),\r\n  transitionDuration: 3000,\r\n  prize: 4560000,\r\n  digits: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]\r\n}\r\n\r\nconst USD = new Intl.NumberFormat(\"en-US\", {\r\n  style: \"currency\",\r\n  currency: \"USD\",\r\n  maximumFractionDigits: 0\r\n});\r\n\r\nconst getPrizeText = () => document.getElementById(\"prize-text\"),\r\n      getTracks = () => document.querySelectorAll(\".digit > .digit-track\");\r\n\r\nconst getFormattedPrize = () => USD.format(config.prize),\r\n      getPrizeDigitByIndex = index => parseInt(config.prize.toString()[index]),\r\n      determineIterations = index => index + config.additionalIterationCount;\r\n\r\nconst createElement = (type, className, text) => {\r\n  const element = document.createElement(type);\r\n  element.className = className;\r\n  if(text !== undefined) element.innerText = text;\r\n  return element;\r\n}\r\n\r\nconst createCharacter = character => createElement(\"span\", \"character\", character);\r\n\r\nconst createDigit = (digit, trackIndex) => {\r\n  const digitElement = createElement(\"span\", \"digit\"),\r\n        trackElement = createElement(\"span\", \"digit-track\");\r\n  \r\n  let digits = [],\r\n      iterations = determineIterations(trackIndex);\r\n  \r\n  for(let i = 0; i < iterations; i++) {\r\n    digits = [...digits, ...config.digits];\r\n  }\r\n  \r\n  trackElement.innerText = digits.join(\" \");\r\n  \r\n  trackElement.style.transitionDuration = `${config.transitionDuration}ms`;\r\n  \r\n  digitElement.appendChild(trackElement);\r\n  \r\n  return digitElement;\r\n}\r\n\r\nconst setup = () => {\r\n  let index = 0;\r\n  \r\n  const prizeText = getPrizeText();\r\n  \r\n  for(const character of getFormattedPrize()) {\r\n    const element = isNaN(character) \r\n      ? createCharacter(character) : createDigit(character, index++);\r\n    \r\n    prizeText.appendChild(element);\r\n  }  \r\n}\r\n\r\nconst animate = () => {\r\n  getTracks().forEach((track, index) => {\r\n    const digit = getPrizeDigitByIndex(index),\r\n          iterations = determineIterations(index),\r\n          activeDigit = ((iterations - 1) * 10) + digit;\r\n    \r\n    track.style.translate = `0rem ${activeDigit * -10}rem`;\r\n  });\r\n}\r\n\r\nconst resetTrackPosition = track => {\r\n  track.style.transitionDuration = \"0ms\";\r\n  track.style.translate = \"0rem 0rem\";\r\n  track.offsetHeight;\r\n  track.style.transitionDuration = `${config.transitionDuration}ms`;\r\n}\r\n\r\nconst resetAnimation = () => {\r\n  for(const track of getTracks()) resetTrackPosition(track);\r\n}\r\n\r\nwindow.onload = () => {\r\n  setup();\r\n  \r\n  setTimeout(animate);  \r\n};\r\n\r\nconst handleRedo = () => {\r\n  resetAnimation();\r\n  \r\n  animate();\r\n}\r\n\r\nconst updateTheme = theme => {\r\n  document.documentElement.style.setProperty(\"--theme-rgb\", `var(--${theme})`);\r\n  \r\n  for(const button of document.querySelectorAll(\".theme-button\")) {\r\n    button.dataset.selected = theme === button.dataset.theme;\r\n  }\r\n}\r\n\r\nconst handleChangeTheme = e => updateTheme(e.currentTarget.dataset.theme);\r\n\r\nupdateTheme(\"green\");<\/pre>\n
That’s all! hopefully, you have successfully created Squid Game Prize Counter using JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code snippet helps you to create a Squid Game Prize Counter that dynamically displays and animates a prize…<\/p>\n","protected":false},"author":1,"featured_media":11505,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[115],"class_list":["post-11487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-countdown-timer"],"acf":[],"yoast_head":"\nSquid Game Prize Counter Using JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Squid Game Prize Counter Using JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-22T08:56:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T09:10:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Squid Game Prize Counter Using JavaScript\",\"datePublished\":\"2024-03-22T08:56:46+00:00\",\"dateModified\":\"2024-03-22T09:10:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\"},\"wordCount\":253,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png\",\"keywords\":[\"Countdown Timer\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\",\"name\":\"Squid Game Prize Counter Using JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png\",\"datePublished\":\"2024-03-22T08:56:46+00:00\",\"dateModified\":\"2024-03-22T09:10:00+00:00\",\"description\":\"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Squid Game Prize Counter Using JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Squid Game Prize Counter Using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Squid Game Prize Counter Using JavaScript — CodeHim","description":"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.","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:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Squid Game Prize Counter Using JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-22T08:56:46+00:00","article_modified_time":"2024-03-22T09:10:00+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Squid Game Prize Counter Using JavaScript","datePublished":"2024-03-22T08:56:46+00:00","dateModified":"2024-03-22T09:10:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/"},"wordCount":253,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png","keywords":["Countdown Timer"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/","url":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/","name":"Squid Game Prize Counter Using JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png","datePublished":"2024-03-22T08:56:46+00:00","dateModified":"2024-03-22T09:10:00+00:00","description":"Here is a free code snippet to create a Squid Game Prize Counter Using JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Squid-Game-Prize-Counter-Using-JavaScript.png","width":1280,"height":960,"caption":"Squid Game Prize Counter Using JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/squid-game-prize-counter-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Squid Game Prize Counter Using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1853,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11487"}],"version-history":[{"count":4,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11487\/revisions"}],"predecessor-version":[{"id":11527,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11487\/revisions\/11527"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11505"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}