{"id":9461,"date":"2024-01-09T18:03:00","date_gmt":"2024-01-09T18:03:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9461"},"modified":"2024-01-22T16:04:55","modified_gmt":"2024-01-22T11:04:55","slug":"javascript-timer-countdown-minutes-seconds","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/","title":{"rendered":"JavaScript Timer Countdown Minutes Seconds"},"content":{"rendered":"<p>This JavaScript code snippet helps you to create a countdown timer with minutes and seconds that allows you to set countdowns for various durations. It works by calculating the time remaining in minutes and seconds, displaying it, and notifying when the timer ends. It helps you manage your time effectively, whether for short breaks or longer tasks.<\/p>\n<p>It&#8217;s ideal for productivity apps, fitness routines, or cooking timers, providing a user-friendly countdown experience.<\/p>\n<h2>How to Create JavaScript Timer Countdown with Minutes and Seconds<\/h2>\n<p>1. First, create an HTML structure that includes buttons to set various countdown times and a display area for the timer. Customize it according to your design preferences.<\/p>\n<pre class=\"prettyprint linenums lang-html\">  &lt;div class=\"timer\"&gt;\r\n    &lt;div class=\"timer__controls\"&gt;\r\n      &lt;button data-time=\"20\" class=\"timer__button\"&gt;20 Secs&lt;\/button&gt;\r\n      &lt;button data-time=\"300\" class=\"timer__button\"&gt;Work 5&lt;\/button&gt;\r\n      &lt;button data-time=\"900\" class=\"timer__button\"&gt;Quick 15&lt;\/button&gt;\r\n      &lt;button data-time=\"1200\" class=\"timer__button\"&gt;Snack 20&lt;\/button&gt;\r\n      &lt;button data-time=\"3600\" class=\"timer__button\"&gt;Lunch Break&lt;\/button&gt;\r\n      &lt;form name=\"customForm\" id=\"custom\"&gt;\r\n        &lt;input type=\"text\" name=\"minutes\" placeholder=\"Enter Minutes\"&gt;\r\n      &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"display\"&gt;\r\n      &lt;h1 class=\"display__time-left\"&gt;&lt;\/h1&gt;\r\n      &lt;p class=\"display__end-time\"&gt;&lt;\/p&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n<\/pre>\n<p>2. Apply CSS styles to your HTML elements, or you can use the following CSS code for a clean and attractive timer interface.<\/p>\n<pre class=\"prettyprint linenums lang-css\">\/*  \r\n* CSS created by Wes Bos as part of his course. \r\n*\/\r\n\r\nmain {\r\n  box-sizing: border-box;\r\n  font-size: 10px;\r\n  background: #8E24AA;\r\n  background: linear-gradient(45deg,  #42a5f5 0%,#478ed1 50%,#0d47a1 100%) !important;\r\n}\r\n\r\n*, *:before, *:after {\r\n  box-sizing: inherit;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n  text-align: center;\r\n  font-family: 'Inconsolata', monospace;\r\n}\r\n\r\n.display__time-left {\r\n  font-weight: 100;\r\n  font-size: 20rem;\r\n  margin: 0;\r\n  color: white;\r\n  text-shadow: 4px 4px 0 rgba(0,0,0,0.05);\r\n}\r\n\r\n.timer {\r\n  display: flex;\r\n  min-height: 100vh;\r\n  flex-direction: column;\r\n}\r\n\r\n.timer__controls {\r\n  display: flex;\r\n}\r\n\r\n.timer__controls &gt; * {\r\n  flex: 1;\r\n}\r\n\r\n.timer__controls form {\r\n  flex: 1;\r\n  display: flex;\r\n}\r\n\r\n.timer__controls input {\r\n  flex: 1;\r\n  border: 0;\r\n  padding: 2rem;\r\n}\r\n\r\n.timer__button {\r\n  background: none;\r\n  border: 0;\r\n  cursor: pointer;\r\n  color: white;\r\n  font-size: 2rem;\r\n  text-transform: uppercase;\r\n  background: rgba(0,0,0,0.1);\r\n  border-bottom: 3px solid rgba(0,0,0,0.2);\r\n  border-right: 1px solid rgba(0,0,0,0.2);\r\n  padding: 1rem;\r\n  font-family: 'Inconsolata', monospace;\r\n}\r\n\r\n.timer__button:hover,\r\n.timer__button:focus {\r\n  background: rgba(0,0,0,0.2);\r\n  outline: 0;\r\n}\r\n\r\n.display {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.display__end-time {\r\n  font-size: 4rem;\r\n  color: white;\r\n}<\/pre>\n<p>3. Finally, add the following JavaScript code to your project. This code creates the timer logic and handles user interactions. It consists of several functions to start, display, and end the countdown.<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/\/ Create the universal variable 'countdown' that lives in the window. \r\nlet countdown;\r\n\r\nconst timerDisplay = document.querySelector('.display__time-left');\r\nconst endTime = document.querySelector('.display__end-time');\r\n\r\n\/\/ Get all data-keys with built-in timer settings\r\nconst buttons = document.querySelectorAll('[data-time');\r\n\r\n\r\n\/\/ This is our main function\r\nfunction timer(seconds) {\r\n    \/\/If any timers are already going, clear them\r\n    clearInterval(countdown);\r\n\r\n    \/\/ Date.now is a new JS function, will give time in MS.\r\n    const now = Date.now();\r\n\r\n    \/\/ Find time in SECONDS by multiplying default MS by 1000\r\n    const then = now + seconds * 1000;\r\n\r\n    \/\/ Run another function, defined below, as soon as this function is invoked\r\n    displayTimeLeft(seconds);\r\n\r\n    \/\/ Show the end time, another function defined below. \r\n    displayEndTime(then);\r\n\r\n    \/\/ Set this function to the variable that lives in the browser. Set interval is a function that runs every 1000 ms \r\n    countdown = setInterval(() =&gt; {\r\n        const secondsLeft = Math.round((then - Date.now()) \/ 1000);\r\n      \r\n        \/\/ Check when timer is done. \r\n        if(secondsLeft &lt; 0){\r\n            clearInterval(countdown);\r\n            return;\r\n        }\r\n      \r\n        \/\/display it\r\n        displayTimeLeft(secondsLeft);\r\n      \r\n      \r\n\/\/ Run this function every 1000 ms\r\n    }, 1000);\r\n}\r\n\r\n\r\n\/\/Convert seconds to the formatted display value\r\nfunction displayTimeLeft(seconds) {\r\n\r\n    \/\/ Round seconds to whole numbers\r\n    const minutes = Math.floor(seconds \/ 60);\r\n\r\n    \/\/ Get the number of whole seconds remaining\r\n    const remainderSeconds = seconds % 60;\r\n\r\n    \/\/ Check if display needs a leading 0, if there is less than 10 seconds. so, '9' will display as '09'\r\n    const display = `${minutes}:${remainderSeconds &lt; 10 ? '0' : ''}${remainderSeconds}`;\r\n\r\n    \/\/Change title of document to be the seconds left\r\n    document.title = display;\r\n    timerDisplay.textContent = display;\r\n\r\n}\r\n\r\n\/\/ Show the static, unchanging END time\r\nfunction displayEndTime(timestamp) {\r\n  \r\n    \/\/ Pass in the timestamp, which has all of the info below built in. This is a default JS method\r\n    const end = new Date(timestamp);\r\n\r\n    \/\/ Extract hours and minutes from the timestamp\r\n    const hour = end.getHours();\r\n    const minutes = end.getMinutes();\r\n\r\n    \/\/ Display the time.\r\n    \/\/ Check if past 12 noon, subtract 12 hours (not military time)\r\n    \/\/ Check if less than 10 minutes. '9' becomes '09'\r\n    endTime.textContent = `Be Back at ${hour &gt; 12 ? hour - 12 : hour}:${minutes &lt; 10 ? '0' : ''}${minutes}`;\r\n}\r\n\r\n\/\/ Get data from the data attribute buttons, and set them as the timer\r\nfunction startTimer(){\r\n\r\n    \/\/ ParseInt to only get whole number\r\n    const seconds = parseInt(this.dataset.time);\r\n    timer(seconds);\r\n}\r\n\r\n\/\/ Function to get data from pre-set button in data attributes\r\nbuttons.forEach(button =&gt; button.addEventListener('click', startTimer));\r\n\r\n\/\/ If you give your form a custom name (name=\"minutes\" in our HTML in this case), you can select it this way\r\ndocument.customForm.addEventListener('submit', function(e){\r\n\r\n    \/\/prevent default browser behavior of reloading the page on time form submit\r\n    e.preventDefault();\r\n\r\n    \/\/Get the number of minutes from the input field\r\n    const mins = this.minutes.value;\r\n\r\n    \/\/ Convert the minutes to seconds, which is what our timer uses\r\n    timer(mins * 60);\r\n    this.reset();\r\n\r\n})\r\n\r\n\r\n\/*\r\ntodo\/ ideas to enhance this timer: \r\nadd timer sound when timer ends\r\n\r\nadd transitions to the countdown. \r\n\r\nadd a \"pause\" button\r\n\r\n*\/<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created a Timer Countdown with Minutes and Seconds using JavaScript. Users can easily set timers for different purposes, making it a versatile addition to various projects. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code snippet helps you to create a countdown timer with minutes and seconds that allows you to set&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9468,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[115,71],"class_list":["post-9461","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript","tag-countdown-timer","tag-timer"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. 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\/javascript-timer-countdown-minutes-seconds\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\" \/>\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-01-09T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:04:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Timer Countdown Minutes Seconds\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:04:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\"},\"wordCount\":213,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png\",\"keywords\":[\"Countdown Timer\",\"Timer\"],\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\",\"name\":\"JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:04:55+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Timer Countdown Minutes Seconds\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#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\":\"JavaScript Timer Countdown Minutes Seconds\"}]},{\"@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":"JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim","description":"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. 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\/javascript-timer-countdown-minutes-seconds\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim","og_description":"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-09T18:03:00+00:00","article_modified_time":"2024-01-22T11:04:55+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.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":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Timer Countdown Minutes Seconds","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:04:55+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/"},"wordCount":213,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png","keywords":["Countdown Timer","Timer"],"articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/","name":"JavaScript Timer Countdown Minutes Seconds &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:04:55+00:00","description":"Here is a free code snippet to create a JavaScript Timer Countdown Minutes Seconds. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Timer-Countdown-Minutes-Seconds.png","width":1280,"height":960,"caption":"JavaScript Timer Countdown Minutes Seconds"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-timer-countdown-minutes-seconds\/#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":"JavaScript Timer Countdown Minutes Seconds"}]},{"@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":1372,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9461","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=9461"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9461\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9468"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}