Last Updated : 23 Jul, 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 AppPrerequisites:
Open your terminal and run:
File Structure Add App to Installed Appsdjango-admin startproject core
cd core
python manage.py startapp home
In core/settings.py, add "home" to the INSTALLED_APPS list:
Create the Event ModelINSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"home",
]
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.
Run the server with the help of following command:
python manage.py runserver
Output:
Event Countdown TimerRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4