Create Countdown Timer in Django - Simple Guide

Faraz

By Faraz -

Learn how to create a countdown timer in Django with this easy guide. Follow step-by-step instructions to build a stylish and functional countdown app.

Join us on Telegram
create-countdown-timer-in-django-simple-guide.webp
Read Alsohow to create a responsive comment box using html and css.jpgHow to Create a Responsive Comment Box Using HTML and CSS

Creating a countdown timer in Django can be a fun and rewarding project. This tutorial will guide you through the steps needed to build a stylish and functional countdown timer from scratch. Whether you're a beginner or an experienced developer, this simple guide will help you add a countdown timer to your Django project with ease.

Prerequisites

Before diving into the code, make sure you have a basic understanding of Django and some familiarity with Python. Here’s what you need:

  • Python installed on your computer
  • Basic knowledge of Django framework
  • A code editor (VS Code, PyCharm, etc.)

Setting Up Your Django Project

Installing Django

Before starting, ensure you have Python installed. You can install Django using pip:

pip install django

Creating a new Django project

Create a new Django project using the following command:

django-admin startproject countdown_project

Setting up the project structure

Navigate into your project directory:

cd countdown_project

Create a Django App

Create a new app within your project:

python manage.py startapp countdown

Adding the app to the project

Add countdown to the INSTALLED_APPS list in countdown_project/settings.py:

INSTALLED_APPS = [
    'countdown',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

Creating Countdown Timer App

Creating a View for Countdown Timer

Create a view to render the countdown. In countdown/views.py, add the following code:

from django.shortcuts import render
from datetime import datetime, timedelta

def countdown(request):
    # Set the target date and time
    target_date = datetime(2024, 7, 30, 0, 0, 0)  # Example target date
    now = datetime.now()
    time_remaining = target_date - now

    context = {
        'days': f"{time_remaining.days:02}",
        'hours': f"{time_remaining.seconds // 3600:02}",
        'minutes': f"{(time_remaining.seconds % 3600) // 60:02}",
        'seconds': f"{time_remaining.seconds % 60:02}",
    }

    return render(request, 'countdown.html', context)

Creating Templates

Create a template to render the countdown timer. Create a file named countdown.html in countdown/templates/:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown Timer</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
            color: #61dafb;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
        }
        .countdown-container {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        .countdown {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        .countdown div {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 5px;
            min-width: 80px;
        }
        .countdown div span {
            font-size: 2.5em;
            margin-bottom: 5px;
            transition: all 0.5s ease;
        }
        .countdown div small {
            font-size: 0.75em;
            color: #bbbbbb;
        }
    </style>
</head>
<body>
    <div class="countdown-container">
        <h1>Countdown Timer</h1>
        <div class="countdown">
            <div>
                <span id="days">{{ days }}</span>
                <small>Days</small>
            </div>
            <div>
                <span id="hours">{{ hours }}</span>
                <small>Hours</small>
            </div>
            <div>
                <span id="minutes">{{ minutes }}</span>
                <small>Minutes</small>
            </div>
            <div>
                <span id="seconds">{{ seconds }}</span>
                <small>Seconds</small>
            </div>
        </div>
    </div>
    <script>
        function updateCountdown() {
            fetch(window.location.pathname)
                .then(response => response.text())
                .then(html => {
                    document.body.innerHTML = html;
                });
        }

        setInterval(updateCountdown, 1000);

    </script>
</body>
</html>

Set Up URL Routing

Add a URL pattern for your view. In countdown/urls.py (create this file if it doesn't exist), add:

from django.urls import path
from .views import countdown

urlpatterns = [
    path('', countdown, name='countdown'),
]

Include the app's URLs in your project's URL configuration. Open countdown_project/urls.py and include the counter app URLs:

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

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

Run Your Server

Apply migrations and run your server:

python manage.py migrate
python manage.py runserver

Visit http://127.0.0.1:8000/ in your web browser to see your countdown app in action.

Full Countdown Timer Project Structure

countdown_project/
│
├── countdown/
│   ├── migrations/
│   ├── templates/
│   │       └── countdown.html
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
│
├── countdown_project/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
├── manage.py
└── db.sqlite3

Conclusion

By following this guide, you've successfully created a countdown timer in Django. This project not only helps you understand the basics of Django but also adds a useful feature to your web applications. Keep experimenting and adding more features to enhance your skills and make your projects more dynamic.

Read Alsocreate-a-financial-calculator-using-html-css-and-javascript.webpCreate a Financial Calculator using HTML, CSS, and JavaScript

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a countdown timer in django, step-by-step guide to build a countdown timer in django, creating a countdown app using django, simple django countdown timer tutorial, build a countdown timer with django, countdown timer in python using django, django countdown timer, countdown timer, django tutorial, timer app, countdown app
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺