{"id":18657,"date":"2020-06-29T20:18:07","date_gmt":"2020-06-30T03:18:07","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18657"},"modified":"2023-12-01T03:36:01","modified_gmt":"2023-12-01T11:36:01","slug":"javascript-countdown-timer","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/","title":{"rendered":"JavaScript Countdown Timer: A Tutorial"},"content":{"rendered":"\n<p>Countdown timers are used all over the Internet by people who want to count down to a major event.<br><\/p>\n\n\n\n<p>You could use a countdown timer to count down to the launch of your new website. A countdown timer could mark when you are going to make a product announcement. There are so many possibilities for you to explore.<br><\/p>\n\n\n\n<p>In this guide, we\u2019ll show you how to create a countdown timer in JavaScript using three technologies: HTML, CSS and JavaScript. Let\u2019s begin!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up Our Webpage<\/h2>\n\n\n\n<p>The first step is to set up our basic web page. In this guide, we\u2019re not going to worry about using any external libraries. We\u2019ll keep it simple and use plain old HTML, CSS and JavaScript.<br><\/p>\n\n\n\n<p>Let\u2019s start by creating our HTML file:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\t&lt;script&gt;\n\t\t\/\/ We'll store our JavaScript code here\n\t&lt;\/script&gt;\n\t&lt;style&gt;\n\t\t\/\/ We'll write our CSS styles here\n\t&lt;\/style&gt;\n\t&lt;body&gt;\n\t\t&lt;h1&gt;It's almost time\u2026&lt;\/h1&gt;\n\t\t&lt;div id=\"timer\"&gt;&lt;\/div&gt;\n\t&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Our code doesn\u2019t return anything special right now, see below:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/R2NGpe_JBVTrd1CTX6bj0xxC6EWjx69-NKUOzbewfyXngI-oYzidJ9LRnFPj_o3WxALWraSpxhHvDq56HYRxkmuk4ITXdYeD1Ss5rolK5v4bruOw6Q88sWnLgXNM38V3k-aQZ_-Q\" alt=\"\"\/><\/figure>\n\n\n\n<p>It appears this way because we haven\u2019t added any styles to our code yet or created our JavaScript timer. Let\u2019s move on to creating the JavaScript that will power our timer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating our Timer<\/h2>\n\n\n\n<p>JavaScript has a handy object called Date which we can use to work with dates and times. We\u2019re going to use this object for two purposes: to get a timestamp of the time to which we want to count down, and to get the current date.&nbsp;<br><\/p>\n\n\n\n<p>In this tutorial, we\u2019re going to write all of our scripts in a &lt;script&gt;&lt;\/script&gt; tag. We\u2019re not going to be using any external scripts.<br><\/p>\n\n\n\n<p>Subtracting the date to which we are counting down from our current date will give us the difference between these two dates:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var timeLeft = +new Date(\"2021-05-04\") - +new Date();<\/pre><\/div>\n\n\n\n<p>This code will calculate how many days are left until the next Star Wars Day, which is May 4th, 2021.<br><\/p>\n\n\n\n<p>While we now know the difference between these two days, there\u2019s a few problems. First, we don\u2019t have a timer that counts down yet. Second, our date isn\u2019t stored in a format easily readable by humans. It\u2019s stored in milliseconds, which isn\u2019t exactly convenient for us. We need to convert the time into days, hours and minutes.<br><\/p>\n\n\n\n<p>To calculate the time remaining in a more readable format, we are going to use the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var daysLeft = Math.floor(timeLeft \/ (1000 * 60 * 60 * 24));\nvar hoursLeft = Math.floor((timeLeft \/ (1000 * 60 * 60)) % 24);\nvar minutesLeft = Math.floor((timeLeft \/ 1000) \/ 60 % 60);<\/pre><\/div>\n\n\n\n<p>We can format the values into a string using this code:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>const timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;<\/pre><\/div>\n\n\n\n<p>In this code, we use string interpolation to substitute in the values we calculated earlier. This will give us a timestamp like: 314 days 13 hours 52 minutes.<br><\/p>\n\n\n\n<p>Now that we\u2019ve generated our timestamp, we can place it on our webpage:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>document.getElementById(\"timer\").innerHTML = timeLeftText;<\/pre><\/div>\n\n\n\n<p>We can move all of our code into a function: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function countdown() {\n\tvar daysLeft = Math.floor(timeLeft \/ (1000 * 60 * 60 * 24));\nvar hoursLeft = Math.floor((timeLeft \/ (1000 * 60 * 60)) % 24);\nvar minutesLeft = Math.floor((timeLeft \/ 1000) \/ 60 % 60);\nconst timeLeftText = `${daysLeft} days ${hoursLeft} hours ${minutesLeft} minutes.`;\ndocument.getElementById(\"timer\").innerHTML = timeLeftText;\n}\ncountdown();<\/pre><\/div>\n\n\n\n<p>When we load our page, the following is returned:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/EfRhjIXfKI0qr9Qip8DdoH8lp_TQ_obM21mBWUWsriveOZmbeC9OHzFTWyIyDSPF5fM3bfMtA1VIigHlHf-HxeHjXwe4304_F3A1FUpUVmnKGMaI8j8F4Uxhp8GDuvbqae7an0bU\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now we have our timer. We\u2019re done for the day, right? Nope; not so fast. If you wait a minute, you\u2019ll see our timer doesn\u2019t actually count down. That\u2019s because we need to tell our browser to update every minute. We do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>setInterval(countdown, 60000);<\/pre><\/div>\n\n\n\n<p>This code should be added after our countdown() function is declared. This will refresh our page every 60,000 milliseconds. This is equivalent to every 60 seconds.<br><\/p>\n\n\n\n<p>Now when we update our code you\u2019ll see that it changes every minute!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding Some Styles<\/h2>\n\n\n\n<p>Our countdown timer may be functional, but it\u2019s not exactly aesthetically pleasing. Let\u2019s create a few styles to make our page more attractive:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\nbody {\n\tpadding-top: 20%;\n\theight: 100vh;\nbackground: linear-gradient(to bottom right, #CAA89C, #434EFC);\n}\nh1, p {\n\ttext-align: center;\n\tcolor: white;\n}\n&lt;\/style&gt;<\/pre><\/div>\n\n\n\n<p>Our webpage now looks like this:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"484\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08.jpg\" alt=\"\" class=\"wp-image-18659\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08.jpg 1020w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08-768x364.png 768w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08-770x365.png 770w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08-20x9-1.jpg 20w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/Screen-Shot-2020-06-23-at-11.16.08-385x183.png 385w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n\n\n\n<p>As you can see, our page now has a gradient background, our text is aligned to the center and our text appears in white. It looks great!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Countdown timers are an important feature of many sites. You\u2019ll see countdowns on both personal and professional web pages. A person\u2019s blog may feature a countdown to their wedding. A company website may feature a countdown to a product launch.<br><\/p>\n\n\n\n<p>Now you\u2019re ready to create your own JavaScript countdown timer like an expert!<\/p>\n","protected":false},"excerpt":{"rendered":"Countdown timers are used all over the Internet by people who want to count down to a major event. You could use a countdown timer to count down to the launch of your new website. A countdown timer could mark when you are going to make a product announcement. There are so many possibilities for&hellip;","protected":false},"author":240,"featured_media":18658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-18657","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript Countdown Timer: A Tutorial | Career Karma<\/title>\n<meta name=\"description\" content=\"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Countdown Timer: A Tutorial\" \/>\n<meta property=\"og:description\" content=\"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T03:18:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:36:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript Countdown Timer: A Tutorial\",\"datePublished\":\"2020-06-30T03:18:07+00:00\",\"dateModified\":\"2023-12-01T11:36:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\"},\"wordCount\":660,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\",\"name\":\"JavaScript Countdown Timer: A Tutorial | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg\",\"datePublished\":\"2020-06-30T03:18:07+00:00\",\"dateModified\":\"2023-12-01T11:36:01+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg\",\"width\":1020,\"height\":676},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Countdown Timer: A Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript Countdown Timer: A Tutorial | Career Karma","description":"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.","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:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Countdown Timer: A Tutorial","og_description":"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-06-30T03:18:07+00:00","article_modified_time":"2023-12-01T11:36:01+00:00","og_image":[{"width":1020,"height":676,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript Countdown Timer: A Tutorial","datePublished":"2020-06-30T03:18:07+00:00","dateModified":"2023-12-01T11:36:01+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/"},"wordCount":660,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/","url":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/","name":"JavaScript Countdown Timer: A Tutorial | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg","datePublished":"2020-06-30T03:18:07+00:00","dateModified":"2023-12-01T11:36:01+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Countdown timers are an important feature of many sites. On Career Karma, learn how to write a countdown timer using vanilla JavaScript.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/lukas-blazek-UAvYasdkzq8-unsplash.jpg","width":1020,"height":676},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-countdown-timer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Countdown Timer: A Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18657"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18657\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18658"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}