Event Countdown Timer using Django

Last Updated : 20 May, 2025

We will build an event countdown timer using Django. By storing an event’s date and time in a model and using JavaScript for live updates, we’ll create a dynamic timer that counts down to the event. Step-by-step, you’ll learn to set up the project, build the backend and frontend, and deploy the app locally.

Set Up the Django Project and App

Prerequisites:

Django Introduction and Installation
Creating a Project

Open your terminal and run:

django-admin startproject core
cd core
python manage.py startapp home

File Structure

projectDirectory

Add App to Installed Apps

In core/settings.py, add "home" to the INSTALLED_APPS list:

INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]

Create the Event Model

In home/models.py, define the Event model:

Python

from django.db import models

class Event(models.Model):
    name = models.CharField(max_length=255)
    event_date = models.DateTimeField()

    def __str__(self):
        return self.name

Register Model in Admin

In home/admin.py, register the model:

Python

from django.contrib import admin
from .models import Event

admin.site.register(Event)

Create the View for Countdown Timer

In home/views.py, add the countdown timer view:

Python

from django.shortcuts import render
from django.utils import timezone
from .models import Event

def countdown_timer(request):
    event = Event.objects.first()  # Get the first event
    if event:
        time_remaining = event.event_date - timezone.now()
        hours = time_remaining.seconds // 3600
        minutes = (time_remaining.seconds % 3600) // 60
        seconds = time_remaining.seconds % 60
        data = {
            'name': event.name,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        }
    else:
        data = {
            'name': "No Event",
            'hours': 0,
            'minutes': 0,
            'seconds': 0
        }
    return render(request, 'myapp.html', {'data': data})

Configure URLs

a) In core/urls.py:

Python

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls'))

]

b) Create home/urls.py:

Python

from django.urls import path
from . import views
 
urlpatterns = [
    path('', views.countdown_timer, name='countdown_timer'),
]

Create Template for Countdown Timer

Create the directory structure home/templates/ and add the file myapp.html with this content:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Countdown Timer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
        }
        
        h1 {
            color: #333;
        }
        
        #timer {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin: 20px auto;
            max-width: 300px;
        }
        
        #countdown {
            font-size: 24px;
            font-weight: bold;
            color: #e44d26;
        }
        
        #event {
            font-size: 34px;
            font-weight: bold;
            color: #221d1c;
        }
    </style>
</head>
<body>
    <h1>Event Countdown Timer</h1>
    <div id="timer">
        <h3 id="event">{{ data.name }}</h3>
        <h2>Time Remaining:</h2>
        <div id="countdown">
            {{ data.hours|stringformat:"02d" }} : {{ data.minutes|stringformat:"02d" }} : {{ data.seconds|stringformat:"02d" }}
        </div>
    </div>
 
    <script>
        // Function to update the countdown timer
        function updateTimer() {
            var hours = parseInt(document.getElementById('countdown').textContent.split(':')[0]);
            var minutes = parseInt(document.getElementById('countdown').textContent.split(':')[1]);
            var seconds = parseInt(document.getElementById('countdown').textContent.split(':')[2]);
 
            if (seconds > 0) {
                seconds--;
            } else {
                if (minutes > 0) {
                    minutes--;
                    seconds = 59;
                } else {
                    if (hours > 0) {
                        hours--;
                        minutes = 59;
                        seconds = 59;
                    } else {
                        // Timer has reached zero, you can handle this case as needed
                    }
                }
            }
 
            // Update the timer display
            document.getElementById('countdown').textContent =
                (hours < 10 ? '0' : '') + hours + ' : ' +
                (minutes < 10 ? '0' : '') + minutes + ' : ' +
                (seconds < 10 ? '0' : '') + seconds;
        }
 
        // Update the timer every second
        setInterval(updateTimer, 1000);
    </script>
</body>
</html>

Apply Migrations and Create Superuser

Run these commands in terminal:

python manage.py makemigrations
python manage.py migrate

Before running the development server, create a superuser and add an event in the Django admin panel:

python manage.py createsuperuser

After creating super user, go admin pannel and add event.

Screenshot-from-2023-10-02-18-07-06

Run the server with the help of following command:

python manage.py runserver

Output:

Event Countdown Timer using Django

amitgupm1wy

Improve

Article Tags :

Practice Tags :

python

Event Countdown Timer using Django

Set Up the Django Project and App

File Structure

Add App to Installed Apps

Create the Event Model

Register Model in Admin

Create the View for Countdown Timer

Configure URLs

a) In core/urls.py:

b) Create home/urls.py:

Create Template for Countdown Timer

Apply Migrations and Create Superuser

Similar Reads

Thank You!

What kind of Experience do you want to share?