{"id":3128,"date":"2022-09-13T18:01:37","date_gmt":"2022-09-13T13:01:37","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3128"},"modified":"2022-09-13T18:01:39","modified_gmt":"2022-09-13T13:01:39","slug":"build-a-new-year-countdown-timer-clock-in-javascript-html5","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/","title":{"rendered":"Build a New Year Countdown Timer Clock in JavaScript & HTML5"},"content":{"rendered":"\n

In this tutorial, you will learn how to make a New Year Countdown Timer Clock<\/strong> using HTML5, CSS3, and JavaScript. The complete source code<\/strong> of our countdown timer is given below.<\/p>\n\n\n\n

JavaScript New Year Countdown Timer Code<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n\n<head>\n\n    <!-- Meta Tags -->\n    <meta charset="utf-8">\n    <meta name="viewport"\n        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, height=device-height">\n    <meta name="generator" content="blob-project_content_v101_generalized">\n    <meta name="referrer" content="no-referrer">\n    <meta content="IE=Edge" http-equiv="X-UA-Compatible">\n    <meta charset="utf-8">\n    <meta data-react-helmet="true" property="og:title" content="New Year Countdown" \/>\n    <meta content="Every New year brings us new story" property="og:description">\n    <meta content="https:\/\/images-ext-2.discordapp.net\/external\/26f_oJ5O-1eueuQ8GQCjAsXBzKaFdwwILFHw10H6gOk\/https\/cdn.discordapp.com\/emojis\/729442670597898241.gif" property="og:image">\n    <meta name="theme-color" content="#ff0000">\n    <meta property="og:locale" content="en-IN" \/>\n\n    <!-- Link Tags -->\n    <link rel="stylesheet" href="https:\/\/unpkg.com\/applause-button@3.3.2\/dist\/applause-button.css" \/>\n    <link href="https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"\n        rel="stylesheet">\n    <link rel="stylesheet" href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css"\n        integrity="sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">\n\n    <link rel="stylesheet" href="style.css">\n    <link rel="icon" href="https:\/\/images-ext-2.discordapp.net\/external\/EsWU0uoIqK91LpTLWQqiBqujgr4MwucdFyoL9gco2Jw\/%3Fsize%3D2048\/https\/cdn.discordapp.com\/avatars\/767223932884353044\/ba31845f0dbe8e39df9638b489b338cb.webp" \/>\n    <script src="https:\/\/unpkg.com\/applause-button@3.3.2\/dist\/applause-button.js"><\/script>\n\n    <!-- Title -->\n    <title id="year"><\/title>\n\n<\/head>\n\n<body onclick="play();">\n    <audio autoplay id="audio">\n        <source src="https:\/\/cdn.discordapp.com\/attachments\/765919453766352916\/794473375035818004\/sound.mp3"\n            type="audio\/mpeg">\n    <\/audio>\n    <div class="container-fluid">\n        <div class="col-12 text-center mx-auto">\n            <h0 class="mt-5"><b id="currentyear"><\/b><\/h0>\n            <h1 class="mt-5">New Year Countdown<\/h1>\n        <\/div>\n    <\/div>\n    <div class="container">\n        <div class="row justify-content-center align-items-center">\n            <div class="col-lg-12 text-center my-5">\n                <div id="countdown" class="countdown">\n                    <div class="row">\n                        <div class="col-3">\n                            <div class="time mx-auto">\n                                <h1 id="days">00<\/h1>\n                                <small class="mini d-block">Days<\/small>\n                            <\/div>\n                        <\/div>\n                        <div class="col-3">\n                            <div class="time  mx-auto">\n                                <h1 id="hours">00<\/h1>\n                                <small class="mini d-block">Hours<\/small>\n                            <\/div>\n                        <\/div>\n                        <div class="col-3">\n                            <div class="time mx-auto">\n                                <h1 id="minutes">00<\/h1>\n                                <small class="mini d-block">Minutes<\/small>\n                            <\/div>\n                        <\/div>\n                        <div class="col-3">\n                            <div class="time mx-auto">\n                                <h1 id="seconds">00<\/h1>\n                                <small class="mini d-block">Seconds<\/small>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n        <\/div>\n    <\/div>\n    <div class="container-fluid">\n        <div class="col-12 text-center mx-auto">\n            \n            <h6 class="my-2">Made with <i class="fas fa-heart"><\/i> by <a\n                    href="https:\/\/www.edopedia.com\/" target="_blank"><b>Edopedia<\/b><\/a><\/h6>\n        <\/div>\n    <\/div>\n    <script src="https:\/\/code.jquery.com\/jquery-3.5.1.slim.min.js"\n        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj\/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">\n    <\/script>\n    <script src="https:\/\/use.fontawesome.com\/releases\/v5.15.1\/js\/all.js" data-auto-a11y="true"><\/script>\n    <script src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js"\n        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ\/JpcUGGOn+Y7RsweNrtN\/tE3MoK7ZeZDyx" crossorigin="anonymous">\n    <\/script>\n    <script src="main.js"><\/script>\n    <!-- 100% privacy friendly analytics -->\n<script async defer src="https:\/\/scripts.simpleanalyticscdn.com\/latest.js"><\/script>\n<noscript><img src="https:\/\/queue.simpleanalyticscdn.com\/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" \/><\/noscript>\n<\/body>\n\n<\/html><\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
* {\n    margin: 0;\n    padding: 0;\n    outline: none;\n    box-sizing: border-box;\n    font-family: Poppins, sans-serif;\n    -webkit-user-select: none;\n    -khtml-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    user-select: none;\n}\n\nbody {\n    \/*background: #020202;*\/\n    background: rgb(2,0,36);\n    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);\n    overflow-x: hidden;\n    scrollbar-width: thin;\n    color: #ffffff;\n}\n\nbody::-webkit-scrollbar {\n    width: 11px;\n}\n\nh1 {\n    font-size: 45px;\n}\n\nh0 {\n    font-size: 95px;\n    font-family: sans-serif;\n}\n\n\n\n.time {\n    background: #272727;\n    border-radius: 10px;\n}\n\n.time h1 {\n    padding: 40px 0px 26px 0px;\n    font-size: 50px;\n}\n\n.mini {\n    background: #222222;\n    font-size: 25px;\n    padding: 8px 0;\n    border-radius: 0px 0px 10px 10px;\n}\n\na {\n    color: #00d4ff;\n}\n\na:hover {\n    color: rgb(255, 255, 255);\n}<\/pre><\/div>\n\n\n\n
main.js<\/h3>\n\n\n\n
const currentyear = new Date().getFullYear();\nconst currentdate = new Date().getDate()\n\nconst audio = document.getElementById("audio");\nconst days = document.getElementById("days");\nconst hours = document.getElementById("hours");\nconst minutes = document.getElementById("minutes");\nconst seconds = document.getElementById("seconds");\nconst countDown = document.getElementById("countdown");\nconst currentYear = new Date().getFullYear();\nconst newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);\ndocument.getElementById("year").innerHTML = currentYear + 1 + " | Sachin Lohar"\ndocument.getElementById("currentyear").innerHTML = currentYear + 1\n\nfunction play() {\n    audio.play();\n    audio.loop = true;\n}\n\nfunction updateCountDown() {\n    const currentTime = new Date();\n    diff = newYearTime - currentTime;\n    const d = Math.floor(diff \/ 1000 \/ 60 \/ 60 \/ 24);\n    const h = Math.floor(diff \/ 1000 \/ 60 \/ 60) % 24;\n    const m = Math.floor(diff \/ 1000 \/ 60) % 60;\n    const s = Math.floor(diff \/ 1000) % 60;\n    days.innerHTML = d;\n    hours.innerHTML = h < 10 ? "0" + h : h;\n    minutes.innerHTML = m < 10 ? "0" + m : m;\n    seconds.innerHTML = s < 10 ? "0" + s : s;\n}\nsetInterval(updateCountDown, 1000);<\/pre><\/div>\n\n\n\n
\n\n\n\n
JavaScript New Year Countdown Timer Screenshot<\/h2>\n\n\n\n
\"JavaScript<\/figure>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown timer is given below. JavaScript New Year Countdown Timer Code index.html style.css main.js JavaScript New Year Countdown Timer Screenshot<\/p>\n","protected":false},"author":1,"featured_media":3132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nBuild a New Year Countdown Timer Clock in JavaScript & HTML5<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a New Year Countdown Timer Clock in JavaScript & HTML5\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-13T13:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-13T13:01:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a New Year Countdown Timer Clock in JavaScript & HTML5","description":"In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/","og_locale":"en_US","og_type":"article","og_title":"Build a New Year Countdown Timer Clock in JavaScript & HTML5","og_description":"In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown","og_url":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-13T13:01:37+00:00","article_modified_time":"2022-09-13T13:01:39+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Build a New Year Countdown Timer Clock in JavaScript & HTML5","datePublished":"2022-09-13T13:01:37+00:00","dateModified":"2022-09-13T13:01:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/"},"wordCount":59,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/","url":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/","name":"Build a New Year Countdown Timer Clock in JavaScript & HTML5","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg","datePublished":"2022-09-13T13:01:37+00:00","dateModified":"2022-09-13T13:01:39+00:00","description":"In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/new_year_countdown_timer_javascript.jpg","width":880,"height":495,"caption":"JavaScript New Year Countdown Timer"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/build-a-new-year-countdown-timer-clock-in-javascript-html5\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a New Year Countdown Timer Clock in JavaScript & HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3128"}],"version-history":[{"count":3,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3128\/revisions"}],"predecessor-version":[{"id":3133,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3128\/revisions\/3133"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3132"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}