Project Folder Structure

DjangoTodos/
├── demo/ # Django project root
│ ├── demo/ # Project configuration
│ │ ├── init.py
│ │ ├── asgi.py
│ │ ├── settings.py # Project settings
│ │ ├── urls.py # Main URL configuration
│ │ └── wsgi.py
│ ├── myapp/ # Main application
│ │ ├── migrations/ # Database migrations
│ │ │ └── init.py
│ │ ├── static/ # Static files
│ │ │ └── css/
│ │ │ └── style.css │
│ ├── templates/ # HTML templates
│ │ │ ├── base.html # Base template
│ │ │ ├── home.html # Home page
│ │ │ └── todos.html # Todo list page
│ │ ├── init.py
│ │ ├── admin.py # Admin configuration
│ │ ├── apps.py # App configuration
│ │ ├── models.py # Database models
│ │ ├── tests.py # Unit tests
│ │ ├── urls.py # App URL configuration
│ │ └── views.py # View functions
│ ├── manage.py # Django management script
│ └── requirements.txt # Project dependencies
├── .gitignore # Git ignore file
├── LICENSE # License file
└── README.md # Project documentation

# Building a Todo App with Django and AJAX: A Step-by-Step Guide

Hey devs! Today, I'm excited to share a fun project I built - a dynamic Todo application using Django and AJAX. Let's dive into how it works and how you can build one too!

## What We're Building

A sleek Todo app with:
-  Real-time task addition
-  Toggle task completion
-  Instant task deletion
-  Smooth animations
-  Beautiful Bootstrap styling

##  Project Structure

1. The Model

# Key Components

python
# models.py
class TodoItem(models.Model):
    title = models.CharField(max_length=100)
    completed = models.BooleanField(default=False) 

2. The Views

# views.py
@csrf_exempt
def add_task(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        todo = TodoItem.objects.create(title=data['title'])
        return JsonResponse({'success': True, 'id': todo.id})

3. AJAX Magic

// todos.html
function toggleComplete(id) {
    fetch(`/toggle-complete/${id}/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        }
    })
    .then(response => response.json())
    .then(data => {
        // Update UI dynamically
    });
}

Getting Started
Clone the repo:
Set up virtual environment:
Install dependencies:
Run migrations:
Start the server:
How It Works
Adding Tasks:

User enters task text
AJAX sends POST request
Django creates new TodoItem
UI updates instantly
Toggling Completion:

Click checkbox
AJAX updates server
Task style changes dynamically
Deleting Tasks:

Click delete button
AJAX removes from database
Task fades out smoothly
Cool Features
Real-time updates without page refresh
Smooth animations
Responsive design
Clean, intuitive UI
Suggested Improvements
Authentication:

User accounts
Personal todo lists
Categories:

Group tasks
Color coding
Due Dates:

Task deadlines
Calendar integration
Priority Levels:

Task importance
Sorting options
Debugging Tips
Check browser console for AJAX errors
Django debug toolbar for backend issues
print() statements in views for tracking
Contributing
Feel free to:

Fork the repo
Create feature branches
Submit pull requests
Report issues
Resources
Django Documentation
Fetch API Guide
Bootstrap Docs
Links
GitHub Repository
Live Demo
Issues/Bugs
Wrap Up
Building this Todo app was a fun way to learn Django and AJAX integration. The real-time updates make it feel smooth and modern. Give it a try and let me know what you think!

django #javascript #webdev #tutorial

Happy coding!

Author Of article : idev-design Read full article