msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'softchris-patch-33'
${ noResults }
Web-Dev-For-Beginners/translations/pcm/5-browser-extension/2-forms-browsers-local-storage/assignment.md

5.2 KiB
Raw Permalink Blame History

Adopt an API

Overview

APIs open up endless possibilities for creative web development! For dis assignment, you go pick one external API and build one browser extension wey go solve real problem or give users beta functionality.

Instructions

Step 1: Choose Your API

Choose one API from dis curated list of free public APIs. Think about these categories:

Popular options for beginners:

Step 2: Plan Your Extension

Before you start to code, answer dis planning questions:

  • Wetin your extension go solve?
  • Who be your target user?
  • Wetin you go store for local storage?
  • How you go take handle API failures or rate limits?

Step 3: Build Your Extension

Your extension suppose get:

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

Step 4: Test and Polish

  • Test your extension with different inputs
  • Handle edge cases (no internet, invalid API responses)
  • Make sure your extension still dey work after browser restart
  • Add user-friendly error messages

Bonus Challenges

Take your extension go 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

Submission Requirements

  1. Working browser extension wey successfully integrate with your chosen API
  2. README file wey explain:
    • Which API you choose and why
    • How to install and use your extension
    • Any API keys or setup wey dey required
    • Screenshots of your extension in action
  3. Clean, commented code wey dey follow modern JavaScript practices

Rubric

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 get small error handling API integration get serious problems
Code Quality Clean, well-commented modern JavaScript wey follow best practices Good code structure with enough comments Code dey work but need beta 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 wey fit work 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 Small or incorrect use of local storage
Documentation Comprehensive README with setup instructions and screenshots Good documentation covering most requirements Basic documentation wey miss some details Poor or missing documentation

Getting Started Tips

  1. Start simple: Choose API wey no need complex authentication
  2. Read the docs: Understand well well your chosen API endpoints and responses
  3. Plan your UI: Sketch your extension interface before coding
  4. Test frequently: Build small small and test each feature as you add am
  5. Handle errors: Always assume API calls fit fail so plan well

Resources

Make you enjoy build beta and creative tin! 🚀

Disclaimer: Dis document don translate wit AI translation service wey dem dey call Co-op Translator. Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or no too correct. Di original document wey e dey for im own language na di correct one. If na serious matter, e good make human professional translate am. We no go take responsibility if person no understand or understand am wrong because of dis translation.