Time to put your skills into practice! This projects course guides you through building complete JavaScript applications, from simple tools to complex web apps.
🎯 Project-Based Learning
Why build projects? Real learning happens when you create something useful. Each project teaches multiple concepts and gives you portfolio-worthy work.
Build a fully functional todo list application that lets users add, complete, and delete tasks. This project combines DOM manipulation, events, and data persistence.
✨ Features to Build:
Add new todo items
Mark todos as complete/incomplete
Delete todos
Save todos to localStorage
Filter todos (all/active/completed)
Clear all completed todos
🏗️ Project Setup
📋 Step-by-Step Build Process:
Create HTML structure - Form for adding todos, list for displaying them
Add CSS styling - Make it look professional
Implement add functionality - Handle form submission
Add complete/delete buttons - Create interactive elements
Implement localStorage - Save data between sessions
// DOM elements
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
const filterButtons = document.querySelectorAll('.filter-btn');
const clearCompletedBtn = document.getElementById('clear-completed');
// Load todos from localStorage
let todos = JSON.parse(localStorage.getItem('todos')) || [];
// Save todos to localStorage
function saveTodos() {
localStorage.setItem('todos', JSON.stringify(todos));
}
// Render todos
function renderTodos(filter = 'all') {
todoList.innerHTML = '';
let filteredTodos = todos;
if (filter === 'active') {
filteredTodos = todos.filter(todo => !todo.completed);
} else if (filter === 'completed') {
filteredTodos = todos.filter(todo => todo.completed);
}
filteredTodos.forEach((todo, index) => {
const li = document.createElement('li');
li.className = 'todo-item' + (todo.completed ? ' completed' : '');
li.innerHTML = `
${todo.text}
`;
todoList.appendChild(li);
});
}
// Add new todo
todoForm.addEventListener('submit', (e) => {
e.preventDefault();
const text = todoInput.value.trim();
if (text) {
todos.push({ text, completed: false });
saveTodos();
renderTodos();
todoInput.value = '';
}
});
// Handle todo actions (complete/delete)
todoList.addEventListener('click', (e) => {
const index = e.target.dataset.index;
if (e.target.type === 'checkbox') {
todos[index].completed = e.target.checked;
saveTodos();
renderTodos();
} else if (e.target.classList.contains('delete-btn')) {
todos.splice(index, 1);
saveTodos();
renderTodos();
}
});
// Filter todos
filterButtons.forEach(button => {
button.addEventListener('click', () => {
filterButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
renderTodos(button.dataset.filter);
});
});
// Clear completed todos
clearCompletedBtn.addEventListener('click', () => {
todos = todos.filter(todo => !todo.completed);
saveTodos();
renderTodos();
});
// Initial render
renderTodos();
🚀 Todo List Challenge Extensions:
Add due dates to todos
Add categories/tags
Implement drag-and-drop reordering
Add search functionality
Create multiple todo lists
🌤️ Project 2: Weather Dashboard
Build an app that fetches and displays weather data
🎯 Project Overview
Create a beautiful weather dashboard that shows current weather and forecasts. Learn about APIs, async JavaScript, and data visualization.
✨ Features to Build:
Search for cities
Display current weather
Show 5-day forecast
Weather icons and animations
Save favorite cities
Geolocation support
🌐 Working with APIs
Think of APIs like a restaurant menu.
You don't need to know how the food is prepared - you just order from the menu and get your meal. APIs provide data and services without you needing to know the implementation details.