This repository contains a series of interactive web exercises for teaching promises and asynchronous JavaScript programming concepts. It's designed for university students learning modern JavaScript techniques.
The workshop consists of 5 progressive exercises:
- Promise Basics: Creating and consuming promises
- Promise Chaining: Working with sequential asynchronous operations
- Promise Methods: Using Promise.all, Promise.race, Promise.allSettled, and Promise.any
- Async/Await: Modern syntax for handling promises
- Real-world API Fetching: Practical application with error handling
The project is organized to enable students to code directly in VS Code rather than in the browser:
/exercises/- HTML files containing exercise instructions and testing interfaces/js/- JavaScript files where students implement their solutionsexercise1.jsthroughexercise5.js- Skeleton files with TODOs for students to completeexercise1-ui.jsthroughexercise5-ui.js- UI interaction logic (students don't need to modify)solution1.jsthroughsolution5.js- Complete solutions for reference
/css/- Styling for the exercise interfaces
To use these exercises in your teaching:
- Clone this repository
- Open the project folder in a code editor (VS Code recommended)
- Open
index.htmlin a web browser - Students should modify the JavaScript files in the
/js/folder - Test implementations using the exercise interface in the browser
Each exercise follows a consistent pattern:
- Task Description: Explains the problem to solve in the HTML interface
- Code Templates: Skeleton JavaScript files with TODO comments for students to complete
- Helper Functions: Pre-implemented utility functions that students will use
- Test Buttons: Allow students to test their solutions immediately
- Output Areas: Display the results of their code execution
- Introduction: Start with a brief lecture on the specific async concept
- Demonstration: Show a simple example of the concept in action
- Guided Practice: Work through the first task together
- Individual Practice: Let students work on remaining tasks individually or in pairs
- Discussion: Review solutions and discuss alternative approaches
The repository includes complete solutions in separate JavaScript files:
js/solution1.jsjs/solution2.jsjs/solution3.jsjs/solution4.jsjs/solution5.js
Students work directly in the exercise JS files (exercise1.js through exercise5.js), which contain function signatures, TODO comments, and helper functions.
After completing these exercises, students should be able to:
- Create and consume JavaScript promises
- Chain promises for sequential operations
- Use built-in Promise methods for parallel operations
- Apply async/await syntax for cleaner asynchronous code
- Handle errors properly in asynchronous code
- Interact with real APIs using promises and async/await
- Progressive Learning: Concepts build on each other through the five exercises
- Interactive Testing: Immediate feedback on code implementation
- Visual Results: See the effects of asynchronous code execution in real-time
- Error Handling: Learn proper techniques for handling asynchronous errors
- Real-world Applications: Apply concepts to practical API interaction scenarios
- Code Editor Focus: Students write code in VS Code rather than in browser editors
- Complete Solutions: Reference implementations for all exercises
Feel free to modify the exercises to fit your curriculum or to update them with new examples. The code is structured to make it easy to add new tasks or modify existing ones.
These exercises require a modern browser with support for:
- Promises
- Fetch API
- Async/await syntax
This material is provided for educational purposes. Feel free to use and adapt it for your teaching needs.
Created for university students learning asynchronous JavaScript programming.