APIs open up endless possibilities for creative web development! In this assignment, you'll choose an external API and build a browser extension that solves a real problem or provides valuable functionality to users.
Select an API from this curated list of free public APIs. Consider these categories:
Popular options for beginners:
- Entertainment: Dog CEO API for random dog pictures
- Weather: OpenWeatherMap for current weather data
- Quotes: Quotable API for inspirational quotes
- News: NewsAPI for current headlines
- Fun Facts: Numbers API for interesting number facts
Before coding, answer these planning questions:
- What problem does your extension solve?
- Who is your target user?
- What data will you store in local storage?
- How will you handle API failures or rate limits?
Your extension should include:
Required Features:
- Form inputs for any required API parameters
- API integration with proper error handling
- Local storage for user preferences or API keys
- Clean, responsive user interface
- Loading states and user feedback
Code Requirements:
- Use modern JavaScript (ES6+) features
- Implement async/await for API calls
- Include proper error handling with try/catch blocks
- Add meaningful comments explaining your code
- Follow consistent code formatting
- Test your extension with various inputs
- Handle edge cases (no internet, invalid API responses)
- Ensure your extension works after browser restart
- Add user-friendly error messages
Take your extension to the next level:
- Add multiple API endpoints for richer functionality
- Implement data caching to reduce API calls
- Create keyboard shortcuts for common actions
- Add data export/import features
- Implement user customization options
- Working browser extension that successfully integrates with your chosen API
- README file explaining:
- Which API you chose and why
- How to install and use your extension
- Any API keys or setup required
- Screenshots of your extension in action
- Clean, commented code following modern JavaScript practices
| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Beginning (60-69%) |
|---|---|---|---|---|
| API Integration | Flawless API integration with comprehensive error handling and edge case management | Successful API integration with basic error handling | API works but has limited error handling | API integration has significant issues |
| Code Quality | Clean, well-commented modern JavaScript following best practices | Good code structure with adequate comments | Code works but needs better organization | Poor code quality with minimal comments |
| User Experience | Polished interface with excellent loading states and user feedback | Good interface with basic user feedback | Basic interface that functions adequately | Poor user experience with confusing interface |
| Local Storage | Sophisticated use of local storage with data validation and management | Proper implementation of local storage for key features | Basic local storage implementation | Minimal or incorrect use of local storage |
| Documentation | Comprehensive README with setup instructions and screenshots | Good documentation covering most requirements | Basic documentation missing some details | Poor or missing documentation |
- Start simple: Choose an API that doesn't require complex authentication
- Read the docs: Thoroughly understand your chosen API's endpoints and responses
- Plan your UI: Sketch your extension's interface before coding
- Test frequently: Build incrementally and test each feature as you add it
- Handle errors: Always assume API calls might fail and plan accordingly
Have fun building something useful and creative! 🚀