{"id":9605,"date":"2024-01-20T18:05:00","date_gmt":"2024-01-20T18:05:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9605"},"modified":"2024-01-22T16:05:56","modified_gmt":"2024-01-22T11:05:56","slug":"make-a-pomodoro-timer-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/","title":{"rendered":"Make a Pomodoro Timer in JavaScript"},"content":{"rendered":"

This JavaScript code creates a Pomodoro Timer. It allows setting session and break times. The timer starts, pauses, and stops. The code dynamically updates the timer display and progress bar to track time intervals. It features buttons to adjust session and break times, providing a visual interface for time management. This timer follows the Pomodoro technique, aiding productivity by managing work and break intervals effectively.<\/p>\n

It helps users manage their work time and break intervals efficiently, enhancing productivity and focus.<\/p>\n

How to Make a Pomodoro Timer In JavaScript<\/h2>\n

1. Copy the HTML code provided into your HTML file. This code defines the structure of the Pomodoro Timer, including session and break settings, timer display, and control buttons.<\/p>\n

<div class=\"container\">\r\n<!--   <h3>Pomodoro Clock<\/h3> -->\r\n  <div class=\"circle total-progress\">\r\n    <div class=\"seconds progress\">\r\n      <div class=\"middle\">\r\n        <div id=\"time-status\">\r\n          <div id=\"timer-type\"><\/div>\r\n          <span class=\"hidden\" id=\"hours-left\"><\/span>\r\n          <span id=\"min-left\"><\/span>\r\n          <span id=\"sec-left\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"settings\">\r\n    <div class=\"session-settings\">\r\n      <span class=\"settings-headers\">session time<\/span>\r\n      <span id=\"session-time\"><\/span>\r\n      <button class=\"settings-btn-plus\" id=\"session-plus\" type=\"button\">+<\/button>\r\n      <button class=\"settings-btn-minus\" id=\"session-minus\" type=\"button\">-<\/button>\r\n    <\/div>\r\n    <div class=\"break-settings\">\r\n      <span class=\"settings-headers\">break time<\/span>\r\n      <span id=\"break-time\"><\/span>\r\n      <button class=\"settings-btn-plus\" id=\"break-plus\" type=\"button\">+<\/button>\r\n      <button class=\"settings-btn-minus\" id=\"break-minus\" type=\"button\">-<\/button>\r\n    <\/div>\r\n    <div class=\"operations\">\r\n      <button type=\"button\" class=\"operation-btn\" id=\"start\">start<\/button>\r\n<!--       <button type=\"button\" class=\"operation-btn\" id=\"pause\">pause<\/button> -->\r\n      <button type=\"button\" class=\"operation-btn\" id=\"stop\">stop<\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"footer\">&copyjulsmorozova<\/div>\r\n<\/div><\/pre>\n
2. The CSS code styles the timer and provides a visually appealing design. You can customize the styles to match your website’s aesthetics.<\/p>\n
* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  height: 100vh;\r\n  width: 100%;\r\n  margin: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  font-family: Tahoma, Verdana, sans-serif;\r\n  color: #777;\r\n  background-color: #0E1826;\r\n}\r\n\r\nbutton {\r\n  outline: none;\r\n  border: none;\r\n  min-width: 2rem;\r\n  min-height: 2rem;\r\n  background: none;\r\n  color: #777;\r\n  font-size: 1.7rem;\r\n  margin: 0.3rem;\r\n}\r\nbutton:hover {\r\n  color: #64D7DB;\r\n}\r\n\r\n.hidden {\r\n  display: none;\r\n}\r\n\r\n.container {\r\n  padding: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.circle {\r\n  width: 15rem;\r\n  height: 15rem;\r\n  min-height: 15rem;\r\n  background-color: #64D7DB;\r\n  border: 0.125rem solid #b0b0b0;\r\n  border-radius: 50%;\r\n  margin: 2rem 0 1rem;\r\n  color: #4097B2;\r\n  font-size: 3rem;\r\n  display: flex;\r\n  position: relative;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.circle.total-progress {\r\n  background-image: linear-gradient(90deg, transparent 50%, #0E1826 50%), linear-gradient(90deg, #0E1826 50%, transparent 50%);\r\n}\r\n.circle .seconds {\r\n  border-radius: 50%;\r\n  background-color: #BFD7EA;\r\n  width: 90%;\r\n  height: 90%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n.circle .seconds.progress {\r\n  background-image: linear-gradient(90deg, transparent 50%, #0E1826 50%), linear-gradient(90deg, #0E1826 50%, transparent 50%);\r\n}\r\n\r\n.middle {\r\n  border-radius: 50%;\r\n  background-color: #0E1826;\r\n  width: 90%;\r\n  height: 90%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n#time-status {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n#time-status #timer-type {\r\n  width: 100%;\r\n  text-align: center;\r\n  margin: -1.3rem 0 0.5rem;\r\n  font-size: 1.3rem;\r\n  color: #777;\r\n}\r\n\r\n.settings {\r\n  width: 60%;\r\n  margin: 1rem;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n}\r\n.settings .session-settings, .settings .break-settings {\r\n  width: 45%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n}\r\n.settings .session-settings .settings-headers, .settings .session-settings #session-time, .settings .session-settings #break-time, .settings .break-settings .settings-headers, .settings .break-settings #session-time, .settings .break-settings #break-time {\r\n  width: 100%;\r\n  text-align: center;\r\n  margin: 0.5rem;\r\n}\r\n.settings .session-settings #session-time, .settings .session-settings #break-time, .settings .break-settings #session-time, .settings .break-settings #break-time {\r\n  font-size: 1.6rem;\r\n  color: #4097B2;\r\n}\r\n\r\n.operations {\r\n  margin: 1rem;\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n.operations button {\r\n  margin: 0.5rem;\r\n  width: 4rem;\r\n  height: 2rem;\r\n  line-height: 1.8rem;\r\n  font-size: 0.9rem;\r\n  color: #BFD7EA;\r\n  background-color: #777;\r\n}\r\n.operations button:hover {\r\n  opacity: 0.5;\r\n}\r\n\r\n.footer {\r\n  height: 2rem;\r\n  line-height: 2rem;\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  padding: 0 1.5rem;\r\n  margin: 1rem 0 0;\r\n}<\/pre>\n
3. Finally, add the following JavaScript code to your project.\u00a0It manages session and break durations, controls the timer, and updates the display. You can explore the code to see how it works.<\/p>\n
var increaseButtons = document.querySelectorAll('.settings-btn-plus');\r\nvar decreaseButtons = document.querySelectorAll('.settings-btn-minus');\r\nvar startBtn = document.querySelector(\"#start\");\r\nvar stopBtn = document.querySelector(\"#stop\");\r\nvar sessionTimeBlock = document.querySelector(\"#session-time\");\r\nvar breakTimeBlock = document.querySelector(\"#break-time\");\r\nvar timeStatusBlock = document.querySelector(\"#time-status\");\r\nvar hoursSpan = document.querySelector(\"#hours-left\");\r\nvar minSpan = document.querySelector(\"#min-left\");\r\nvar secSpan = document.querySelector(\"#sec-left\");\r\nvar timerTypeName = document.querySelector(\"#timer-type\");\r\nvar totalProgress = document.querySelector(\".total-progress\");\r\nvar secondsProgress = document.querySelector(\".progress\");\r\n\r\nvar timer = '';\/\/below used for setInterval\/clearInterval\r\nvar timerActive = false;\r\nvar timerType = 'session';\/\/is then changed to break\r\nvar startTime = 1500; \/\/start of the session: session time by default\r\nvar sessionTime = 1500;\/\/default session time stored in seconds\r\nvar breakTime = 300; \/\/default break time stored in seconds;\r\nvar currentTime = 1500; \/\/time displayed on timer in seconds\r\n\r\nfunction displayDefaultTime() {\r\n  sessionTimeBlock.innerHTML = displayMinutes(sessionTime) + ' min';\r\n  breakTimeBlock.innerHTML = displayMinutes(breakTime) + ' min';\r\n  displayCurrentTime();\r\n}\r\n\r\nfunction handleTotalProgress(startTime, currentTime) {\r\n  var progressColor = '';\r\n  if (timerType === 'session') {\r\n      progressColor = '#64D7DB';\r\n      totalProgress.style.backgroundColor = '#64D7DB';\r\n    }\r\n    else {\r\n      progressColor = '#A75ACE';\r\n      totalProgress.style.backgroundColor = '#A75ACE';\r\n    }\r\n  var timePassed = startTime - currentTime;\r\n  var deg;\r\n  if (timePassed < (startTime \/ 2)) {\r\n    deg = 90 + (360 * timePassed \/ startTime)\r\n    totalProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, #0E1826 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';\r\n  }\r\n  else if (timePassed >= (startTime \/ 2)) {\r\n    deg = -90 + (360 * timePassed \/ startTime);\r\n    totalProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, '+progressColor+' 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';\r\n  }\r\n}\r\n\r\nfunction handleSecondsProgress(currentTime) {\r\n  var progressBarColor = '';\r\n  if (timerType === 'session') {\r\n    progressBarColor = '#BFD7EA';\r\n    secondsProgress.style.backgroundColor = '#BFD7EA';\r\n  }\r\n  else {\r\n    progressBarColor = '#F9EDF9';\r\n    secondsProgress.style.backgroundColor = '#F9EDF9';\r\n  }\r\n  var secondsPassed = 60 - convertFromSec(currentTime).seconds;\r\n  var deg;\r\n  if (secondsPassed < (60 \/ 2)) {\r\n    deg = 90 + (360 * secondsPassed \/ 60)\r\n    secondsProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, #0E1826 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';\r\n  }\r\n  else if (secondsPassed >= (60 \/ 2)) {\r\n    deg = -90 + (360 * secondsPassed \/ 60);\r\n    secondsProgress.style.backgroundImage = 'linear-gradient('+deg+'deg, transparent 50%, '+progressBarColor+' 50%),linear-gradient(90deg, #0E1826 50%, transparent 50%)';\r\n  }\r\n}\r\n\r\nfunction displayCurrentTime() {\r\n  if (convertFromSec(currentTime).hours) {\r\n    hoursSpan.classList.remove('hidden');\r\n    hoursSpan.innerHTML = convertFromSec(currentTime).hours + ': ';\r\n  } \r\n  else {\r\n    hoursSpan.innerHTML = '';\r\n  }\r\n  minSpan.innerHTML = convertFromSec(currentTime).minutes + ': ';\r\n  secSpan.innerHTML = convertFromSec(currentTime).seconds;\r\n}\r\n\r\nfunction addLeadingZero(time) {\r\n  return time < 10? '0' + time : time;\r\n}\r\n\r\nfunction displayMinutes(timeInSec) {\r\n  return parseInt(timeInSec \/ 60);\r\n}\r\n\r\nfunction convertFromSec(timeInSec) {\r\n  var result = { hours: 0, minutes: 0, seconds: 0 };\r\n  var seconds = timeInSec % 60;\r\n  var minutes = parseInt(timeInSec \/ 60) % 60;\r\n  var hours = parseInt(timeInSec \/ 3600);\r\n  if (hours > 0) {\r\n    result.hours = hours;\r\n  }\r\n  result.minutes = addLeadingZero(minutes);\r\n  result.seconds = addLeadingZero(seconds);\r\n  return result;\r\n}\r\n\r\nfunction countDown() {\r\n  timerTypeName.innerHTML = timerType;\r\n  if (currentTime > 0) {\r\n    currentTime --;\r\n    displayCurrentTime();\r\n    handleTotalProgress(startTime, currentTime);\r\n    handleSecondsProgress(currentTime);\r\n    if (currentTime === 0) {\r\n      if (timerType === 'session') {\r\n        currentTime = breakTime;\r\n        startTime = breakTime;\r\n        timerType = 'break';\r\n        timerTypeName.innerHTML = timerType;\r\n      }\r\n      else {\r\n        currentTime = sessionTime;\r\n        startTime = sessionTime;\r\n        timerType = 'session';\r\n        timerTypeName.innerHTML = timerType;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nfunction toggleTimer() {\r\n  if (timerActive) {\r\n    clearInterval(timer);\r\n    startBtn.innerHTML = 'start';\r\n    timerActive = false;\r\n  }\r\n  else {\r\n    startBtn.innerHTML = 'pause';\r\n    timer = setInterval(countDown, 1000);\r\n    timerActive = true;\r\n  }\r\n}\r\n\r\nfunction stopTimer() {\r\n  timerActive = false;\r\n  startBtn.innerHTML = 'start';\r\n  clearInterval(timer);\r\n  timerType = 'session';\r\n  currentTime = sessionTime;\r\n  handleTotalProgress(startTime, currentTime);\r\n  handleSecondsProgress(currentTime);\r\n  displayDefaultTime();\r\n}\r\n\r\nfunction displayChangedTime(e, time) {\r\n  if (e.target.id === 'session-plus' || e.target.id === 'session-minus') {\r\n    sessionTimeBlock.innerHTML = displayMinutes(sessionTime) + ' min';\r\n  }\r\n  else if (e.target.id === 'break-plus' || e.target.id === 'break-minus') {\r\n    breakTimeBlock.innerHTML = displayMinutes(breakTime) + ' min';\r\n  }\r\n}\r\n\r\nstartBtn.addEventListener('click', toggleTimer);\r\nstopBtn.addEventListener('click', stopTimer);\r\n\r\nfor (var i = 0; i < increaseButtons.length; i++) {\r\n  increaseButtons[i].addEventListener('click', function(e) {\r\n    if (!timerActive) {\r\n      if (e.target.id === 'session-plus') {\r\n        sessionTime += 60;\r\n        currentTime = sessionTime;\r\n        startTime = sessionTime;\r\n        displayChangedTime(e, sessionTime);\r\n        displayCurrentTime();\r\n      }\r\n      else if (e.target.id === 'break-plus') {\r\n        breakTime += 60;\r\n        displayChangedTime(e, breakTime);\r\n        displayCurrentTime();\r\n      }\r\n    }\r\n  });\r\n} \r\n\r\nfor (var i = 0; i < decreaseButtons.length; i++) {\r\n  decreaseButtons[i].addEventListener('click', function(e) {\r\n    if (!timerActive) {\r\n      if (e.target.id === 'session-minus') {\r\n        if (sessionTime > 60) {\r\n          sessionTime -= 60;\r\n          currentTime = sessionTime;\r\n          startTime = sessionTime;\r\n          displayChangedTime(e, sessionTime);\r\n          displayCurrentTime();\r\n        }\r\n      }\r\n      else if (e.target.id === 'break-minus') {\r\n        if (breakTime > 60) {\r\n          breakTime -= 60;\r\n          displayChangedTime(e, breakTime);\r\n          displayCurrentTime();\r\n        }\r\n      }\r\n    }\r\n  });\r\n} \r\n\r\ndocument.addEventListener('DOMContentLoaded', displayDefaultTime);<\/pre>\n
By default, the session time is set to 25 minutes, and the break time is set to 5 minutes. You can adjust these durations by clicking the “+” and “-” buttons next to the session and break labels.<\/p>\n
That’s all! hopefully, you have successfully created a Pomodoro Timerin JavaScript. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This JavaScript code creates a Pomodoro Timer. It allows setting session and break times. The timer starts, pauses, and stops….<\/p>\n","protected":false},"author":1,"featured_media":9620,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[58],"tags":[115],"class_list":["post-9605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-date-time","tag-countdown-timer"],"acf":[],"yoast_head":"\nMake a Pomodoro Timer in JavaScript — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Make a Pomodoro Timer in 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\/date-time\/make-a-pomodoro-timer-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Pomodoro Timer in JavaScript — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Make a Pomodoro Timer in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-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-01-20T18:05:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-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\/date-time\/make-a-pomodoro-timer-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Make a Pomodoro Timer in JavaScript\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/\"},\"wordCount\":236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png\",\"keywords\":[\"Countdown Timer\"],\"articleSection\":[\"Date & Time\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/\",\"name\":\"Make a Pomodoro Timer in JavaScript — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png\",\"datePublished\":\"2024-01-20T18:05:00+00:00\",\"dateModified\":\"2024-01-22T11:05:56+00:00\",\"description\":\"Here is a free code snippet to create a Make a Pomodoro Timer in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Make a Pomodoro Timer in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Date & Time\",\"item\":\"https:\/\/codehim.com\/category\/date-time\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Make a Pomodoro Timer in 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":"Make a Pomodoro Timer in JavaScript — CodeHim","description":"Here is a free code snippet to create a Make a Pomodoro Timer in 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\/date-time\/make-a-pomodoro-timer-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Make a Pomodoro Timer in JavaScript — CodeHim","og_description":"Here is a free code snippet to create a Make a Pomodoro Timer in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-20T18:05:00+00:00","article_modified_time":"2024-01-22T11:05:56+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-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\/date-time\/make-a-pomodoro-timer-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Make a Pomodoro Timer in JavaScript","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:56+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/"},"wordCount":236,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png","keywords":["Countdown Timer"],"articleSection":["Date & Time"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/","url":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/","name":"Make a Pomodoro Timer in JavaScript — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png","datePublished":"2024-01-20T18:05:00+00:00","dateModified":"2024-01-22T11:05:56+00:00","description":"Here is a free code snippet to create a Make a Pomodoro Timer in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/11\/Make-a-Pomodoro-Timer-in-JavaScript.png","width":1280,"height":960,"caption":"Make a Pomodoro Timer in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/date-time\/make-a-pomodoro-timer-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Date & Time","item":"https:\/\/codehim.com\/category\/date-time\/"},{"@type":"ListItem","position":3,"name":"Make a Pomodoro Timer in 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":1770,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9605","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=9605"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9605\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9620"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}