Responsive Countdown Page with Awesome Countdown Timer in HTML, CSS & JavaScript

on

 


Certainly! Here's a description of a responsive countdown timer implemented using HTML, CSS, and JavaScript:

The responsive countdown timer is a dynamic web component that displays a countdown to a specific date and time. It is designed to adjust its layout and appearance based on different screen sizes and devices, ensuring optimal user experience across various platforms.

HTML is used to structure the countdown timer page. It typically consists of a container element to hold the timer and any additional content. Inside the container, there may be headings, labels, or other elements to provide context and information about the countdown.

CSS is utilized to style the countdown timer and make it visually appealing. It allows customization of colors, fonts, sizes, and positioning. CSS media queries can be employed to create a responsive design, ensuring the timer adapts gracefully to different screen sizes and orientations.

JavaScript is responsible for the functionality of the countdown timer. It calculates the remaining time by comparing the current date and time with the target date and time. Using various JavaScript methods and calculations, such as setInterval, getTime, and mathematical operations, it determines the days, hours, minutes, and seconds remaining.

The JavaScript code updates the countdown display every second, dynamically altering the content of the timer element. As the time ticks down, the values of days, hours, minutes, and seconds are recalculated and reflected in real-time on the page. When the countdown reaches zero, a custom message can be displayed to indicate that the countdown has expired.

Together, HTML, CSS, and JavaScript work in harmony to create a visually appealing, responsive countdown timer. This timer can be embedded into websites or applications to build excitement for upcoming events, product launches, promotions, or any situation that requires a countdown to a specific date and time.



HTML CODE


<section class="header" id="header">
    <nav class="navbar" id="navbar">
        <ion-icon name="logo-apple"></ion-icon>
        <button>Book Your Tickets</button>
    </nav>
    <div class="container">
        <h1>Mountain Madness</h1>
        <span>start in </span>
        <div class="links">
            <ul>
                <li><span id="days"></span>Days</li>
                <li><span id="hours"></span>Hours</li>
                <li><span id="minutes"></span>Minutes</li>
                <li><span id="seconds"></span>Seconds</li>
            </ul>
        </div>
    </div>
    <nav class="down-navbar">
        <div class="icon">
            <ion-icon name="play"></ion-icon>
            <span>Watch promo video</span>
            <ion-icon name="share-social"></ion-icon>
            <span>Share the madness</span>
        </div>
        <div class="madia-icon">
            <ion-icon name="logo-facebook"></ion-icon>
            <ion-icon name="logo-twitter"></ion-icon>
            <ion-icon name="logo-instagram"></ion-icon>
        </div>
    </nav>
</section>
<script>
    (function () {
        const second = 1000,
            minute = second * 60,
            hour = minute * 60,
            day = hour * 24;

        //I'm adding this section so I don't have to keep updating this pen every year :-)
        //remove this if you don't need it
        let today = new Date(),
            dd = String(today.getDate()).padStart(2, "0"),
            mm = String(today.getMonth() + 1).padStart(2, "0"),
            yyyy = today.getFullYear(),
            nextYear = yyyy - 1,
            dayMonth = "07/20/",
            birthday = dayMonth + yyyy;

        today = mm + "/" + dd + "/" + yyyy;
        if (today > birthday) {
            birthday = dayMonth + nextYear;
        }
        //end

        const countDown = new Date(birthday).getTime(),
            x = setInterval(function () {

                const now = new Date().getTime(),
                    distance = countDown - now;

                document.getElementById("days").innerText = Math.floor(distance / (day)),
                  document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
                  document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
                  document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

            }, 0)
    }());
</script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

CSS CODE


@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&
family=Gloock&family=Herr+Von+Muellerhoff&family=Montserrat:wght@100;200;300;400&family=
Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&
family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,
700;1,900&family=Tilt+Neon&display=swap');
/*font-family: 'Montserrat', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Tilt Neon', cursive; */
            :root {
                --border: 3px solid #eee;
                --smaller: .75;
            }

            * {
                font-family: 'Roboto', sans-serif;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                outline: none;
                border: none;
                text-decoration: none;
                transition: .3s linear;
            }

            html {
                font-size: 62.5%;
                overflow-x: hidden;
                scroll-padding-top: 9rem;
                scroll-behavior: smooth;
            }

            html::-webkit-scrollbar {
                width: .8rem;
            }

            html::-webkit-scrollbar-track {
                background: transparent;
            }

            html::-webkit-scrollbar-thumb {
                background: var(--main-color);
                border-radius: 4rem;
            }

            .header {
                width: 100%;
                height: 100vh;
                background-image: url(img-2.jpg);
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
            }

            .navbar {
                width: 100%;
                padding: 20px 5%;
                display: flex;
                align-items: center;
                justify-content: space-between;

            }

            .navbar ion-icon {
                font-size: 30px;
                color: #eee;
                border: var(--border);
                padding: 5px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .navbar button {
                padding: 10px 20px;
                border: var(--border);
                border-radius: 50px;
                background: transparent;
                color: #eee;
                font-family: 'Montserrat', sans-serif;
                font-family: 600;
            }

            .navbar button:hover {
                cursor: pointer;
                background: #eee;
                color: black;
                font-weight: 900;
            }

            .container {
                color: #eee;
                margin: 0 auto;
                text-align: center;
                margin-top: 10px;
                backdrop-filter: blur(2px);
                padding: 100px;
                width: 1100px;
            }

            .container h1 {
                font-weight: normal;
                letter-spacing: .125rem;
                font-family: 'Dancing Script', cursive;
                font-size: 50px;
            }

            .container span {
                font-size: 15px;
                color: #eee;
                font-family: 'Montserrat', sans-serif;
            }

            .links ul li {
                display: inline-block;
                font-size: 4rem;
                list-style-type: none;
                padding: 1em;
                font-family: 'Montserrat', sans-serif;
                font-weight: 300;
            }

            .links ul li span {
                font-family: 'Montserrat', sans-serif;
                display: block;
                font-size: 4.5rem;
            }

            .down-navbar {
                width: 100%;
                padding: 20px 5%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: absolute;
                bottom: 0;
                /* background: red; */
            }

            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #eee;
            }

            .icon span {
                font-size: 15px;
                font-family: 'Montserrat', sans-serif;
            }

            .down-navbar ion-icon {
                font-size: 20px;
                color: #eee;
                border: var(--border);
                padding: 5px;
                border-radius: 50%;
                margin-right: 10px;
                margin-left: 10px;
                cursor: pointer;
            }

            .icon span:hover {
                text-decoration: underline;
                cursor: pointer;
            }

Comments

Post a Comment