localizeflow[bot]
1 month ago
parent
4967802566
commit
05bab63d1e
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
|
||||
"translation_date": "2026-01-08T20:45:40+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/python/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കോഡ് 실행ിക്കുക
|
||||
|
||||
## ക്രമീകരിക്കുക
|
||||
|
||||
വര്ച്ച്വല് പരിതസ്ഥിതി സൃഷ്ടിക്കുക
|
||||
|
||||
```sh
|
||||
python -m venv venv
|
||||
source ./venv/bin/activate
|
||||
```
|
||||
|
||||
## ആശ്രിതങ്ങള് ഇന്സ്റ്റാള് ചെയ്യുക
|
||||
|
||||
```sh
|
||||
pip install openai fastapi uvicorn python-dotenv
|
||||
```
|
||||
|
||||
## API 실행ിക്കുക
|
||||
|
||||
```sh
|
||||
# രീതി 1: നേരിട്ട് പ്രവർത്തനങ്ങൾ
|
||||
python api.py
|
||||
|
||||
# രീതി 2: uvicorn ഉപയോഗിച്ച്
|
||||
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
||||
```
|
||||
|
||||
## API പരീക്ഷിക്കുക
|
||||
|
||||
ഇന്ററാക്ടീവായ API ഡോക്യുമെന്റേഷന് സഞ്ചരിക്കുക: `http://localhost:5000/docs`
|
||||
|
||||
## ഫ്രണ്ട്എന്ഡ് 실행ിക്കുക
|
||||
|
||||
ഫ്രണ്ട്എന്ഡ് ഫോള്ഡറിലുള്ളത് ഉറപ്പാക്കുക
|
||||
|
||||
*app.js* ഫയല് കണ്ടെത്തുക, `BASE_URL` നിങ്ങളുടെ ബാക്ക്എന്ഡ് URL ആയി മാറ്റുക
|
||||
|
||||
ഇത് 실행ിക്കുക
|
||||
|
||||
```
|
||||
npx http-server -p 8000
|
||||
```
|
||||
|
||||
ചാറ്റില് ഒരു സന്ദേശം ടൈപ്പ് ചെയ്ത് നോക്കൂ, നിങ്ങൾക്ക് ഒരു പ്രതികരണം കാണാം (നിങ്ങൾ ഇത് Codespace-ൽ 실행ിക്കുന്നയാൾ ആണെങ്കിൽ അല്ലെങ്കിൽ അപസ്സസ് ടോക്കൺ ക്രമീകരിച്ചിട്ടുണ്ടെങ്കിൽ).
|
||||
|
||||
## അപസ്സസ് ടോക്കൺ ക്രമീകരിക്കുക (നിങ്ങൾ ഇത് Codespace-ൽ 실행ിക്കുകയില്ലെങ്കിൽ)
|
||||
|
||||
[Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens) കാണുക
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂചനം**:
|
||||
ഈ രേഖ AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. നാം ശരിയായ പരിഭാഷയ്ക്ക് ശ്രമിക്കുന്നുവെങ്കിലും, ഓട്ടോമാറ്റിക് പരിഭാഷകളിൽ പിഴവുകൾ അല്ലെങ്കിൽ അപൂർവതകൾ ഉണ്ടാകാവുന്നതാണ്. മാതൃഭാഷയിലുള്ള യഥാർത്ഥ രേഖയെ ഔദ്യോഗിക ഉറവിടമായി കരുതണം. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷയുടെ ഉപയോഗത്തിൽ നിന്നുള്ള യാതൊരു തെറ്റ്മോ അർത്ഥം തെറ്റിച്ചോ സംഭവിക്കുന്ന ഒരു പിഴവിനും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,23 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
|
||||
"translation_date": "2026-01-08T20:39:25+00:00",
|
||||
"source_file": "9-chat-project/solution/frontend/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# കോഡ് 실행 කරන්න
|
||||
|
||||
```sh
|
||||
npx http-server -p 3000
|
||||
```
|
||||
|
||||
`app.js`-ൽ `BASE_URL` കണ്ടെത്തി അത് ബാക്ക്എൻഡ് URL-ന് അനുയോജ്യമായി മാറ്റുക.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസ്വീകാരം**:
|
||||
ഈ ഡോക്യുമെന്റ് AI പരിഭാഷാ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷപ്പെടുത്തപ്പെട്ടതാണ്. നമുക്ക് കൃത്യതയ്ക്കായി ശ്രമിച്ചുകയറവൻമാത്രവുമല്ല, സ്വയം പ്രവർത്തിക്കുന്ന പരിഭാഷകളിൽ പിശകുകളും തെറ്റുകളും ഉണ്ടാകാമെന്നാണ് കരുതേണ്ടത്. ഉയർന്ന പ്രാധാന്യമുള്ള വിവരങ്ങൾക്ക് മേൽ സ്വദേശഭാഷയിലുള്ള ഒറിജിനൽ ഡോക്യുമെന്റ് അടിസ്ഥാനഗതമായ കണക്കെടുക്കേണ്ടതാണ്. അത്യന്താപേക്ഷിതമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശിപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗിക്കുന്നത് മൂലം ഉണ്ടാകാവുന്ന തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ, പരസ്പരാർത്ഥം വഴമുടക്കങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളാകുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,417 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2026-01-08T10:26:00+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Project Overview
|
||||
|
||||
ഇത് വെബ് വികസനത്തിന്റെ അടിസ്ഥാനങ്ങളെ തുടക്കക്കാരെ പഠിപ്പിക്കുന്നതിനുള്ള ഒരു വിദ്യാഭ്യാസ പാഠ്യപദ്ധതി റെപ്പോസിറ്ററിയാണ്. മൈക്രോസോഫ്റ്റ് ക്ലൗഡ് അഡ്വക്കേറ്റുകൾ വികസിപ്പിച്ചെടുത്ത 12 ആഴ്ചകളിലെ സമഗ്ര കോഴ്സ് ആണ് ഈ പാഠ്യപദ്ധതി, അതിൽ ജാവാസ്ക്രിപ്റ്റ്, CSS, HTML തുടങ്ങിയ വിഷയങ്ങളെക്കുറിച്ചുള്ള 24 പ്രായോഗിക പാഠങ്ങൾ ഉൾക്കൊള്ളുന്നു.
|
||||
|
||||
### Key Components
|
||||
|
||||
- **വിദ്യാഭ്യാസ ഉള്ളടക്കം**: പദ്ധതിപരമായി ക്രമീകരിച്ച 24 ഘടനാപരമായ പാഠങ്ങൾ
|
||||
- **പ്രായോഗിക പ്രോജക്ടുകൾ**: Terrarium, ടൈപ്പിങ്ങ് ഗെയിം, ബ്രൗസർ എക്സ്ടൻഷൻ, സ്പേസ് ഗെയിം, ബാങ്കിംഗ് ആപ്പ്, കോഡ് എഡിറ്റർ, AI ചാറ്റ് അസിസ്റ്റന്റ്
|
||||
- **ഇന്ററാക്ടീവ് ക്വിസുകൾ**: ഓരോത്തിലും 3 ചോദ്യങ്ങളുള്ള 48 ക്വിസുകൾ (പാഠം മുമ്പും ശേഷവും)
|
||||
- **ബഹുഭാഷാ പിന്തുണ**: GitHub Actions ഉപയോഗിച്ച് 50+ ഭാഷകളിലേക്ക് സ്വಯമാറ്റം
|
||||
- **ടെക്നോളജികൾ**: HTML, CSS, ജാവാസ്ക്രിപ്റ്റ്, Vue.js 3, Vite, Node.js, Express, Python (AI പ്രോജക്ടുകൾക്ക്)
|
||||
|
||||
### Architecture
|
||||
|
||||
- പാഠം അധിഷ്ഠിത ഘടനയോടെ വിദ്യാഭ്യാസ റെപ്പോസിറ്ററി
|
||||
- ഓരോ പാഠ ഫോളഡറിൽ README, കോഡ് ഉദാഹരണങ്ങൾ, പരിഹാരങ്ങൾ അടങ്ങിയിരിക്കുന്നു
|
||||
- സ്വതന്ത്ര പ്രോജക്ടുകൾ വേർതിരിച്ച ഫോളഡറുകളിൽ (quiz-app, വ്യത്യസ്ത പാഠ പ്രോജക്ടുകൾ)
|
||||
- GitHub Actions ഉപയോഗിച്ചുള്ള വിവർത്തന സംവിധാനം (co-op-translator)
|
||||
- ഡോക്യൂമെന്റേഷൻ Docsify വഴി സർവ് ചെയ്യുന്നു കൂടാതെ PDF രൂപത്തിൽ ലഭ്യമാണ്
|
||||
|
||||
## Setup Commands
|
||||
|
||||
ഈ റെപ്പോസിറ്ററി പ്രധാനമായും വിദ്യാഭ്യാസ ഉള്ളടക്കം ഉപയോഗിക്കാൻ ആണ്. പ്രത്യേക പ്രോജക്ടുകൾ ഉപയോഗിക്കാൻ:
|
||||
|
||||
### Main Repository Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Quiz App Setup (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # ഡെവലപ്പ്മെന്റ് സർവർ തുടങ്ങിയ്ക്കുക
|
||||
npm run build # പ്രൊഡക്ഷനായി നിർമ്മിക്കുക
|
||||
npm run lint # ESLint ഓടിക്കൂ
|
||||
```
|
||||
|
||||
### Bank Project API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # എപിഐ സര്വര് ആരംഭിക്കുക
|
||||
npm run lint # ഇഎസ്എലിന്റ് ഓടിക്കുക
|
||||
npm run format # പ്രിസ്റ്റിയറോടെ ഫോര്മാറ്റ് ചെയ്യുക
|
||||
```
|
||||
|
||||
### Browser Extension Projects
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# ബ്രൗസര്-സവിശേഷമായ എക്സ്ടന്ഷന് ലോഡിംഗ് നിർദ്ദേശങ്ങൾ പിന്തുടരുക
|
||||
```
|
||||
|
||||
### Space Game Projects
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# ബ്രൗസറിൽ index.html തുറക്കുക അല്ലെങ്കിൽ ലൈവ് സർവർ ഉപയോഗിക്കുക
|
||||
```
|
||||
|
||||
### Chat Project (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# GITHUB_TOKEN പരിസ്ഥിതി സ്വഭാവിക ഘടകമായി സജ്ജമാക്കുക
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### For Content Contributors
|
||||
|
||||
1. നിങ്ങളുടെ GitHub അക്കൗണ്ടിൽ റെപ്പോസിറ്ററി **ഫോർക്ക് ചെയ്യുക**
|
||||
2. നിങ്ങളുടെ ഫോർക്ക് ലൊക്കലായി **ക്ലോൺ ചെയ്യുക**
|
||||
3. നിങ്ങളുടെ മാറ്റങ്ങൾക്കായി **പുതിയ ബ്രാഞ്ച് സൃഷ്ടിക്കുക**
|
||||
4. പാഠ ഉള്ളടക്കം അല്ലെങ്കിൽ കോഡ് ഉദാഹരണങ്ങളിൽ മാറ്റങ്ങൾ വരുത്തുക
|
||||
5. ബന്ധപ്പെട്ട പ്രോജക്ട് ഡയറക്ടറികളിൽ കോഡ് മാറ്റങ്ങൾ പരിശോധന നടത്തുക
|
||||
6. കൺട്രിബ്യൂഷൻ മാർഗനിർദേശങ്ങൾ പാലിച്ച് പുൾ റിക്വസ്റ്റുകൾ സമർപ്പിക്കുക
|
||||
|
||||
### For Learners
|
||||
|
||||
1. റെപ്പോസിറ്ററി ഫോർക്ക് ചെയ്യുകയോ ക്ലോൺ ചെയ്യുകയോ ചെയ്യുക
|
||||
2. പാഠ ഡയറക്ടറികളിലേക്ക് ക്രമാശ്രിതമായി പോകുക
|
||||
3. ഓരോ പാഠത്തിനും README ഫയലുകൾ വായിക്കുക
|
||||
4. https://ff-quizzes.netlify.app/web/ ൽ പാഠത്തിനു മുമ്പുള്ള ക്വിസുകൾ പൂർത്തിയാക്കുക
|
||||
5. പാഠ ഫോളഡറുകളിൽ കോഡ് ഉദാഹരണങ്ങൽ പാസാക്കുക
|
||||
6. അസൈൻമെന്റുകളും കൂടുതൽ ചൈലഞ്ചുകളും പൂർത്തിയാക്കുക
|
||||
7. പാഠത്തിനു ശേഷമുള്ള ക്വിസുകൾ എടുക്കുക
|
||||
|
||||
### Live Development
|
||||
|
||||
- **ഡോക്യൂമെന്റേഷൻ**: റൂട്ടിൽ `docsify serve` ഓടിക്കുക (പോർട്ട് 3000)
|
||||
- **Quiz App**: quiz-app ഡയറക്ടറിയിൽ `npm run dev` ഓടിക്കുക
|
||||
- **പ്രോജക്ടുകൾ**: HTML പ്രോജക്ടുകൾക്ക് VS Code Live Server എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുക
|
||||
- **API Projects**:អതിരേഷമുള്ള API ഡയറക്ടറികളിൽ `npm start` ഓടിക്കുക
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Quiz App Testing
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # കോഡ് സ്റ്റൈൽ പ്രശ്നങ്ങൾ പരിശോധിക്കുക
|
||||
npm run build # ബിൽഡ് വിജയിക്കുന്നത് സ്ഥിരീകരിക്കുക
|
||||
```
|
||||
|
||||
### Bank API Testing
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # കോഡ് സ്റ്റൈൽ പ്രശ്നങ്ങൾ പരിശോധിക്കുക
|
||||
node server.js # പിഴവുകൾ ഇല്ലാതെ സെർവർ തുടങ്ങുന്നത് സ്ഥിരീകരിക്കുക
|
||||
```
|
||||
|
||||
### General Testing Approach
|
||||
|
||||
- ഇത് സമഗ്രമായ സ്വയംപരീക്ഷണ പരീക്ഷണങ്ങളില്ലാത്തൊരു വിദ്യാഭ്യാസ റെപ്പോസിറ്ററിയാണ്
|
||||
- മാനുവൽ ടെസ്റ്റിംഗിന്റെ പ്രധാന ലക്ഷ്യം:
|
||||
- കോഡ് ഉദാഹരണങ്ങൾ പിശക് രഹിതമായ പ്രവർത്തനം
|
||||
- ഡോക്യുമെന്റേഷൻ ലിങ്കുകൾ ശരിയായ പ്രവർത്തനം
|
||||
- പ്രോജക്ട് ബിൽഡുകൾ പൂര്ണ്ണത
|
||||
- ഉദാഹരണങ്ങൾ മികച്ച അനുഭവരീതികൾ പാലിക്കുന്നു
|
||||
|
||||
### Pre-submission Checks
|
||||
|
||||
- package.json അടങ്ങിയ ഡയറക്ടറികളിൽ `npm run lint` ഓടിക്കുക
|
||||
- മാർക്ക്ഡൗൺ ലിങ്കുകൾ സാധുവാണെന്ന് പരിശോധിക്കുക
|
||||
- ബ്രൗസറിലോ Node.js-ലോ കോഡ് ഉദാഹരണങ്ങൾ പരീക്ഷിക്കുക
|
||||
- വിവർത്തനങ്ങളുടെ ഘടന കൃത്യമായി നിലനിൽക്കുന്നു എന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### JavaScript
|
||||
|
||||
- ആധുനിക ES6+ ലിപി ഉപയോഗിക്കുക
|
||||
- പ്രോജക്ടുകളിൽ ലഭ്യമായ സാധാരണ ESLint കോൺഫിഗറേഷനുകൾ പാലിക്കുക
|
||||
- വിദ്യാർത്ഥികൾക്ക് മനസ്സിലാക്കാൻ സാധിക്കുന്ന രീതിയിൽ നാമങ്ങൾ ഉപയോഗിക്കുക
|
||||
- ആശയങ്ങൾ വിശദീകരിക്കുന്ന കുറിപ്പുകൾ ചേർക്കുക
|
||||
- Prettier ഉപയോഗിച്ച് സജ്ജമാക്കിയ സ്ഥലങ്ങളിൽ ഫോർമാറ്റ് ചെയ്യുക
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- സേമാന്റിക് HTML5 ഘടകങ്ങൾ
|
||||
- പ്രതികരണാത്മക ഡിസൈൻ സിദ്ധാന്തങ്ങൾ
|
||||
- സ്പష్టం ക്ലാസ് നാമകരണ പാട്
|
||||
- വിദ്യാർത്ഥികൾക്ക് സഹായകമായ CSS സാങ്കേതികത വിശദീകരിക്കുന്ന കുറിപ്പുകൾ
|
||||
|
||||
### Python
|
||||
|
||||
- PEP 8 ശൈലി മാർഗനിർദേശങ്ങൾ
|
||||
- വ്യക്തവും പഠനാർത്ഥകവുമായ കോഡ് ഉദാഹരണങ്ങൾ
|
||||
- പഠനത്തിന് സഹായകരമായ ടൈപ്പ് നിർദ്ദേശങ്ങൾ
|
||||
|
||||
### Markdown Documentation
|
||||
|
||||
- വ്യക്തമായ തലശ്രീനി ക്രമീകരണം
|
||||
- ഭാഷ നിർദേശങ്ങളോടുകൂടിയ കോഡ് ബ്ലോക്കുകൾ
|
||||
- അധിക വിഭവങ്ങളുടെ ലിങ്കുകൾ
|
||||
- `images/` ഡയറക്ടറികളിൽ സ്ക്രീൻഷോട്ടുകളും ചിത്രങ്ങളും
|
||||
- ആക്സസിബിലിറ്റിക്ക് ചിത്രം മാറ്റിനോട്ടുകൾ
|
||||
|
||||
### File Organization
|
||||
|
||||
- പാഠങ്ങൾ ക്രമീകരിച്ച സംഖ്യകൾ (1-getting-started-lessons, 2-js-basics, മുതലായവ)
|
||||
- ഓരോ പ്രോജക്ടിനും `solution/` കൂടാതെ പലപ്പോഴും `start/` അല്ലെങ്കിൽ `your-work/` ഡയറക്ടറികൾ
|
||||
- പാഠം പ്രത്യേക `images/` ഫോൾഡറുകളിൽ ചിത്രങ്ങൾ സൂക്ഷിക്കുന്നു
|
||||
- വിവർത്തനങ്ങൾ `translations/{language-code}/` ഘടനയിൽ
|
||||
|
||||
## Build and Deployment
|
||||
|
||||
### Quiz App Deployment (Azure Static Web Apps)
|
||||
|
||||
quiz-app Azure Static Web Apps ലോചനത്തിന് ക്രമീകരിച്ചിരിക്കുന്നു:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # dist/ ഫോളדער് സൃഷ്ടിക്കുന്നു
|
||||
# പ്രധാന ബ്രാഞ്ചിലേക്ക് പുഷ് ചെയ്യുമ്പോൾ GitHub Actions വർക്ഫ്ലോ ഉപയോഗിച്ച് വിന്യസിക്കുന്നു
|
||||
```
|
||||
|
||||
Azure Static Web Apps ക്രമീകരണം:
|
||||
- **ആപ്പ് സ്ഥലം**: `/quiz-app`
|
||||
- **ഔട്ട്പുട്ട് സ്ഥലം**: `dist`
|
||||
- **വർക്ഫ്ലോ**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Documentation PDF Generation
|
||||
|
||||
```bash
|
||||
npm install # docsify-to-pdf ഇൻസ്റ്റാൾ ചെയ്യുക
|
||||
npm run convert # ഡോക്സിൽ നിന്ന് PDF സൃഷ്ടിക്കുക
|
||||
```
|
||||
|
||||
### Docsify Documentation
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # ഡോക്സിഫൈ ആഗോളതലത്തിൽ ഇൻസ്റ്റാൾ ചെയ്യുക
|
||||
docsify serve # localhost:3000-ൽ സർവ് ചെയ്യുക
|
||||
```
|
||||
|
||||
### Project-specific Builds
|
||||
|
||||
ഓരോ പ്രോജക്ട് ഡയറക്ടറിയിലും വ്യത്യസ്ത ബിൽഡ് പ്രക്രിയകൾ ഉണ്ടായി കിടക്കാം:
|
||||
- Vue പ്രോജക്ടുകൾ: `npm run build` പ്രൊഡക്ഷൻ ബണ്ടлів സൃഷ്ടിക്കുന്നു
|
||||
- സ്റ്റാറ്റിക് പ്രോജക്ടുകൾ: ബില്ഡ് സ്റ്റെപ്പ് ഇല്ല, ഫയലുകൾ നേരിട്ട് സർവ് ചെയ്യുക
|
||||
|
||||
## Pull Request Guidelines
|
||||
|
||||
### Title Format
|
||||
|
||||
മാറ്റത്തിന്റെ മേഖലയെ വ്യക്തമായി സൂചിപ്പിക്കുന്ന തലക്കെട്ടുകൾ ഉപയോഗിക്കുക:
|
||||
- `[Quiz-app] Add new quiz for lesson X`
|
||||
- `[Lesson-3] Fix typo in terrarium project`
|
||||
- `[Translation] Add Spanish translation for lesson 5`
|
||||
- `[Docs] Update setup instructions`
|
||||
|
||||
### Required Checks
|
||||
|
||||
പി ആർ സമർപ്പിക്കുന്നതിന് മുമ്പ്:
|
||||
|
||||
1. **കോഡ് ഗുണമേന്മ**:
|
||||
- ബാധകമായ പ്രോജക്ട് ഡയറക്ടറികളിൽ `npm run lint` ഓടിക്കുക
|
||||
- എല്ലാ ലിന്റ് പിശകുകളും മുന്നറിയിപ്പുകളും പരിഹരിക്കുക
|
||||
|
||||
2. **ബിൽഡ് പരിശോധന**:
|
||||
- ബാധകമുള്ള പക്ഷം `npm run build` ഓടിക്കുക
|
||||
- ബിൽഡ് പിശകുകൾ ഇല്ലെന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
3. **ലിങ്ക് പരിശോധന**:
|
||||
- എല്ലാ മാർക്ക്ഡൗൺ ലിങ്കുകളും പരിശോധിക്കുക
|
||||
- ഇമേജ് റഫറൻസുകൾ ശരിയാണെന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
4. **ഉള്ളടക്കം അവലോകനം**:
|
||||
- വൃത്തിപരിശോധനയും വ്യാകരണമികവ് പരിശോധിക്കൽ
|
||||
- കോഡ് ഉദാഹരണങ്ങൾ ശരിയായും വിദ്യാഭ്യാസപരവുമായുണ്ടെന്ന് ഉറപ്പാക്കുക
|
||||
- വിവർത്തനങ്ങൾ യഥാ അർത്ഥത്തെ നിലനിർത്തുന്നുണ്ടെന്ന് പരിശോധിക്കുക
|
||||
|
||||
### Contribution Requirements
|
||||
|
||||
- Microsoft CLA യുമായി അംഗീകരിക്കുക (ആദ്യ PR-ൽ ഓട്ടോമാറ്റിക് പരിശോധന)
|
||||
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) പാലിക്കുക
|
||||
- വിശദമായ മാർഗനിർദേശങ്ങൾക്ക് [CONTRIBUTING.md](./CONTRIBUTING.md) നോക്കുക
|
||||
- ആവശ്യമായ പക്ഷം പുൾ റിക്ക്വസ്റ്റ് വിവരണത്തിൽ ഇഷ്യൂ നമ്പറുകൾ ഉൾപ്പെടുത്തുക
|
||||
|
||||
### Review Process
|
||||
|
||||
- PR കൾ മെയിന്റെയ്നർമാർക്കും സമൂഹത്തിനും റിവ്യൂ ചെയ്യപ്പെടും
|
||||
- വിദ്യാഭ്യാസ വ്യക്തത മുൻഗണനയാണ്
|
||||
- കോഡ് ഉദാഹരണങ്ങൾ നിലവിലുള്ള മികച്ച രീതികൾ പാലിക്കണം
|
||||
- വിവർത്തനങ്ങൾ കൃത്യതയോടെ സംസ്ക്കാരപരമായ അനുയോജ്യതയോടെ പരിശോധിക്കും
|
||||
|
||||
## Translation System
|
||||
|
||||
### Automated Translation
|
||||
|
||||
- GitHub Actions ഉപയോഗിച്ച് co-op-translator വർക്ഫ്ലോ ഉപയോഗിക്കുന്നു
|
||||
- 50+ ഭാഷകളിലേക്ക് ഓട്ടോമാറ്റിക് വിവർത്തനം നൽകുന്നു
|
||||
- പ്രധാനം ഡയറക്ടറികളിലുള്ള സ്രോത് ഫയലുകൾ
|
||||
- വിവർത്തന ഫയലുകൾ `translations/{language-code}/` ഡയറക്ടറിയിലാണ്
|
||||
|
||||
### Adding Manual Translation Improvements
|
||||
|
||||
1. `translations/{language-code}/`യിൽ സ്ഥിതിചെയ്യുന്ന ഫയൽ കണ്ടെത്തുക
|
||||
2. ഘടന നിലനിർത്തികൊണ്ട് പരിഷ്ക്കാരങ്ങൾ ചെയ്യുക
|
||||
3. കോഡ് ഉദാഹരണങ്ങൾ പ്രവർത്തനക്ഷമമാണെന്ന് ഉറപ്പാക്കുക
|
||||
4. ഏതെങ്കിലും പ്രാദേശിക ക്വിസ് ഉള്ളടക്കം പരീക്ഷിക്കുക
|
||||
|
||||
### Translation Metadata
|
||||
|
||||
വിവർത്തന ഫയലുകളിൽ മെറ്റാഡേറ്റ ഹedersറുകൾ ഉൾപ്പെടുന്നു:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Debugging and Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**Quiz app fails to start**:
|
||||
- Node.js പതിപ്പ് പരിശോധിക്കുക (v14+ ശുപാർശ)
|
||||
- `node_modules`യും `package-lock.json`യും ഇല്ലാതാക്കി വീണ്ടും `npm install` ഓടിക്കുക
|
||||
- പോർട്ട് കോൺഫ്ലിക്റ്റുകൾ പരിശോധിക്കുക (ഡീഫോൾട്ട്: Vite വിഷയം 5173)
|
||||
|
||||
**API server won't start**:
|
||||
- Node.js പതിപ്പ് കുറഞ്ഞത് node >=10 ആണെന്ന് ഉറപ്പാക്കുക
|
||||
- പോർട്ട് ഉപയോഗത്തിലാണ് എന്ന് പരിശോധിക്കുക
|
||||
- എല്ലാം ഡെപൻഡൻസികളും `npm install` വഴി ഇൻസ്റ്റാൾ ചെയ്തുണ്ടെന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
**Browser extension won't load**:
|
||||
- manifest.json ശരിയായ ഫോർമാറ്റിൽ ആണെന്ന് പരിശോധിക്കുക
|
||||
- ബ്രൗസർ കോൺസോൾ പിശകുകൾ കാണുക
|
||||
- ബ്രൗസറിനനുസരിച്ച് എക്സ്ടൻഷൻ ഇൻസ്റ്റലേഷൻ മാർഗനിർദേശങ്ങൾ പാലിക്കുക
|
||||
|
||||
**Python chat project issues**:
|
||||
- OpenAI പാക്കേജ് ഇൻസ്റ്റാൾ ചെയ്തിട്ടുണ്ടോ പരിശോധിക്കുക: `pip install openai`
|
||||
- GITHUB_TOKEN എൻവയോണ്മെന്റ് വേരിയബിൾ സജ്ജമാണെന്ന് ഉറപ്പാക്കുക
|
||||
- GitHub മോഡൽസ് ആക്സസ് അനുമതികൾ പരിശോധിക്കുക
|
||||
|
||||
**Docsify not serving docs**:
|
||||
- docsify-cli ഗ്ലോബലായി ഇൻസ്റ്റാൾ ചെയ്യുക: `npm install -g docsify-cli`
|
||||
- റെപ്പോസിറ്ററി റൂട്ടിൽ നിന്നു ഓടിക്കുക
|
||||
- `docs/_sidebar.md` നിലവിലുണ്ടെന്ന് ഉറപ്പാക്കുക
|
||||
|
||||
### Development Environment Tips
|
||||
|
||||
- HTML പ്രോജക്ടുകൾക്കുള്ള VS Code Live Server എക്സ്റ്റെൻഷൻ ഉപയോഗിക്കുക
|
||||
- ഏകാസംബന്ധിതമായ ഫോർമാറ്റ്ക്കായി ESLint, Prettier എക്സ്റ്റൻഷനുകൾ ഇൻസ്റ്റാൾ ചെയ്യുക
|
||||
- JavaScript ഡീബഗ് ചെയ്യാൻ ബ്രൗസർ ഡെവ്ടൂൾസ് ഉപയോഗിക്കുക
|
||||
- Vue പ്രോജക്ടുകൾക്കായി Vue DevTools ബ്രൗസർ എക്സ്ടൻഷൻ ഇൻസ്റ്റാൾ ചെയ്യുക
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
- 50+ ഭാഷകളിലുള്ള വിവർത്തിത ഫയലുകളുടെ എണ്ണം വലിയതാണ്, ഫുൾ ക്ലോണുകൾ വലിയതാണ്
|
||||
- ഉള്ളടക്കത്തിൽ മാത്രം പ്രവർത്തിക്കുന്നവർക്ക് ഷാലോ ക്ലോൺ ഉപയോഗിക്കുക: `git clone --depth 1`
|
||||
- ഇംഗ്ലീഷ് ഉള്ളടക്കത്തിൽ നടത്തിയപ്പോൾ വിവർത്തനങ്ങൾ തിരയൽ പുറത്താകുന്നതായി ഒഴിവാക്കുക
|
||||
- ആദ്യ ഓടിയിൽ ബിൽഡ് പ്രക്രിയകൾ (npm install, Vite build) നിത്യം സാധാരണയായി ക്ഷീണാകും
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Environment Variables
|
||||
|
||||
- API കീകൾ രെപ്പോസിറ്ററിയിൽ ഒരിക്കലും കമ്മിറ്റ് ചെയ്യരുത്
|
||||
- `.env` ഫയലുകൾ ഉപയോഗിക്കുക (ഇതെല്ലാം `.gitignore`-ലുണ്ട്)
|
||||
- ആവശ്യമായ എൻവയോൺമെന്റ് വേരിയബിളുകൾ പ്രോജക്ട് READMEs-ൽ രേഖപ്പെടുത്തുക
|
||||
|
||||
### Python Projects
|
||||
|
||||
- വെർച്ച്വൽ എൻവയോൺമെന്റ് ഉപയോഗിക്കുക: `python -m venv venv`
|
||||
- ഡെപൻഡൻസികൾ അപ്ഡേറ്റ് ചെയ്ത് വയ്ക്കുക
|
||||
- GitHub ടോക്കണുകൾക്ക് കുറഞ്ഞ ആവശ്യമായ അനുമതികൾ മാത്രം നൽകുക
|
||||
|
||||
### GitHub Models Access
|
||||
|
||||
- GitHub മോഡലുകളിലേക്കുള്ള വ്യക്തിഗത ആക്സസ് ടോക്കണുകൾ ആവശ്യമാണ് (PAT)
|
||||
- ടോക്കണുകൾ എൻവയോൺമെന്റ് വേരിയബിളുകളായി സൂക്ഷിക്കുക
|
||||
- ടോക്കണുകൾ അല്ലെങ്കിൽ ക്രെഡൻഷ്യലുകൾ ഒരിക്കലും കമ്മിറ്റ് ചെയ്യരുത്
|
||||
|
||||
## Additional Notes
|
||||
|
||||
### Target Audience
|
||||
|
||||
- വെബ് വികസനത്തിൽ പൊതുവായി തുടങ്ങുന്നവർ
|
||||
- വിദ്യാർത്ഥികളും സവാൽ പഠനക്കാരും
|
||||
- ക്ലാസറूमിൽ പാഠ്യപദ്ധതി ഉപയോഗിക്കുന്ന അധ്യാപകർ
|
||||
- പ്രവേശന യോഗ്യതയും നേതൃത്വപരവും ഉള്ള ഉള്ളടക്കം
|
||||
|
||||
### Educational Philosophy
|
||||
|
||||
- പദ്ധതിപരമായ പഠന സമീപനം
|
||||
- സ്ഥിരം അറിവ് പരിശോധിക്കൽ (ക്വിസുകൾ)
|
||||
- പ്രായോഗിക കോഡിംഗ് അഭ്യാസങ്ങൾ
|
||||
- യാഥാർത്ഥ്യ ലോക ഉദാത്തങ്ങൾ
|
||||
- ഫ്രെയിംവർക്കുകളുടെ മുമ്പ് അടിസ്ഥാന സിദ്ധാന്തങ്ങൾ
|
||||
|
||||
### Repository Maintenance
|
||||
|
||||
- സജീവമായ പഠനക്കാരുടെയും പങ്കാളികളുടെയും സമൂഹം
|
||||
- ഡെപെൻഡൻസികളും ഉള്ളടക്കവും নিয়മിതമായി നവീകരിക്കുന്നു
|
||||
- മെയിന്റെയ്നർമാരും ചര്ച്ചകളും ശ്രദ്ധിക്കുന്നു
|
||||
- GitHub Actions മുഖേന വിവർത്തന അപ്ഡേറ്റുകൾ സ്വയംനടത്തുന്നു
|
||||
|
||||
### Related Resources
|
||||
|
||||
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) പഠനാർത്ഥികൾക്ക് ശുപാർശ ചെയ്യുന്നു
|
||||
- അധിക കോഴ്സുകൾ: Generative AI, Data Science, ML, IoT പാഠ്യങ്ങള്
|
||||
|
||||
### Working with Specific Projects
|
||||
|
||||
തനതു പ്രോജക്ടുകൾക്കുള്ള വിശദമായ നിർദ്ദേശങ്ങൾക്കായി വായിക്കുക:
|
||||
- `quiz-app/README.md` - Vue 3 ക്യൂvis് ആപ്പ്
|
||||
- `7-bank-project/README.md` - ബാൻക് ആപ്പ് ഓത്തന്റിക്കേഷൻ സെറ്റ് ചെയ്യപ്പെട്ടത്
|
||||
- `5-browser-extension/README.md` - ബ്രൗസർ എക്സ്റ്റെൻഷൻ വികസനം
|
||||
- `6-space-game/README.md` - കാൻവാസ് അടിസ്ഥാനമായ ഗെയിം വികസനം
|
||||
- `9-chat-project/README.md` - AI ചാറ്റ് അസിസ്റ്റന്റ് പ്രോജക്ട്
|
||||
|
||||
### Monorepo Structure
|
||||
|
||||
പരമ്പരാഗത മോനോറിപ്പോ അല്ലെങ്കിലും, ഈ റെപ്പോസിറ്ററി പല സ്വതന്ത്ര പ്രോജക്ടുകൾ ഉൾക്കൊള്ളുന്നു:
|
||||
- ഓരോ പാഠവും സ്വതന്ത്രമാണ്
|
||||
- പ്രോജക്ടുകൾ പരസ്പരം ഡെപൻഡൻസികൾ പങ്കിടുന്നില്ല
|
||||
- മറ്റുള്ളവരെ ബാധിക്കാതെ വ്യക്തിഗത പ്രോജക്ടുകളിൽ പ്രവർത്തിക്കുക
|
||||
- മുഴുവൻ പാഠ്യപദ്ധതി അനുഭവത്തിനായി മുഴുവൻ റെപ്പോ ക്ലോൺ ചെയ്യുക
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാനിർദ്ദേശം**:
|
||||
ഈ രേഖ AI വിവർത്തനം സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ പരമാവധി ശരിക്കും ശ്രമിക്കുന്നുവെങ്കിലും, സ്വയംക്രമിത വിവർത്തനങ്ങളിൽ പിഴവുകളോ അസാധ്യതകളോ ഉണ്ടാകാൻ സാധ്യതയുള്ളതാണ്. അതിനാൽ, ദയവായി ശ്രദ്ധിക്കേണ്ടത്, ഈ രേഖയുടെ മുമ്ബ് ഉള്ള ഭാഷയിലുള്ള യുഗ്മം പ്രാമാണിക സ്രോതസ്സായി കണക്കാക്കണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശിപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തെത്തുടർന്ന് ഉണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും അർത്ഥവിമർശങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b0a9b4cccd918195f58224d5793da1a6",
|
||||
"translation_date": "2026-01-08T10:34:33+00:00",
|
||||
"source_file": "CODE_OF_CONDUCT.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# മൈക്രോസ്ഫ്റ്റ് ഓപ്പൺ സോഴ്സ് പെരുമാറ്റ നയം
|
||||
|
||||
ഈ പ്രോജക്ട് [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) സ്വീകരിച്ചിരിക്കുന്നു.
|
||||
|
||||
രിസോഴ്സുകൾ:
|
||||
|
||||
- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon)
|
||||
- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon)
|
||||
- ചോദിക്കാനും ആശങ്കകളുള്ളപ്പോൾ [opencode@microsoft.com](mailto:opencode@microsoft.com) എന്ന വിലാസത്തിൽ ബന്ധപ്പെടുക
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**കുറിപ്പ്**:
|
||||
ഈ പ്രമാണം AI വിവർത്തന സേവനമായ [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. ഞങ്ങൾ നിശ്ചിതത്വത്തിനായി ശ്രമിച്ചെങ്കിലും, സോഫ്റ്റ്വെയർ വിവർത്തനങ്ങളിൽ തെറ്റുകളോ അകിതാത്മകതകളോ ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. ഔദ്യോഗിക ഭാഷയിലെ മൂല പ്രമാണം പ്രാമാണികമായ ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക്, വിദഗ്ധ മനുഷ്യ വിവർത്തനം നിർബന്ധം ആണ്. ഈ വിവർത്തനത്തിൽ നിന്നുണ്ടാകുന്ന തെറ്റു ബോധ്യങ്ങൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "777400e9f0336c7ee2f9a1200a88478f",
|
||||
"translation_date": "2026-01-08T10:14:33+00:00",
|
||||
"source_file": "CONTRIBUTING.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# സംഭാവനകൾ
|
||||
|
||||
ഈ പ്രോജക്ട് സംഭാവനകളും നിർദ്ദേശങ്ങളും സ്വാഗതം ചെയ്യും. ഏറ്റവും അധികം സംഭാവനകൾ നിങ്ങൾക്ക്
|
||||
കൺട്രിബ്യുട്ടർ ലൈസൻസ് അക്രമം (CLA) യിൽ സമ്മതമാകും എന്നത് ആവശ്യമാണ്, നിങ്ങൾക്ക് അവകാശമുണ്ടെന്ന്
|
||||
ഉണ്ടെന്നും, വാസ്തവത്തിൽ ബഹുമതികൾ നൽകുന്നുവെന്ന് അറിയിക്കുന്ന CLA യിൽ. കൂടുതലായി വിവരങ്ങൾക്കായി സന്ദർശിക്കുക
|
||||
[https://cla.microsoft.com](https://cla.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
നിങ്ങൾ ഒരു പുൾ റിക്വസ്റ്റ് സമർപ്പിക്കുമ്പോൾ, CLA-ബോട്ട് ഓട്ടോമാറ്റിക്കായി നിങ്ങൾക്കു CLA നൽകേണ്ടതുണ്ടോ എന്ന്
|
||||
നിശ്ചയിക്കുകയും, PR യെ അനുയോജ്യമായി അലങ്കരിക്കുകയും ചെയ്യും (ഉദാ: ലേബൽ, കാമന്റ്). ബോട്ടിന്റെ
|
||||
निर्देशങ്ങൾ പിന്തുടരുക. നമ്മുടെ CLA ഉപയോഗിക്കുന്ന എല്ലാ റിപ്പോസിറ്ററികളിലും നിങ്ങൾക്ക് ഇത് ഒരു തവണ മാത്രം ചെയ്യേണ്ടതാകും. ദയവായി, എന്തിനാണ് നിങ്ങൾ ആ മാറ്റം ചെയ്തതെന്ന് ഞങ്ങൾക്ക് അറിയിക്കാനും চেষ্টা ചെയ്യുക, അതിലൂടെ നിങ്ങളുടെ അഭ്യർത്ഥനയെ കുറിച്ച് നാം മെച്ചത്തിൽ മനസിലാക്കാം.
|
||||
|
||||
ഈ പ്രോജക്ട് [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/?WT.mc_id=academic-77807-sagibbon) നെ ആപേക്ഷിച്ചു.
|
||||
കൂടുതൽ വിവരങ്ങൾക്ക്, [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/?WT.mc_id=academic-77807-sagibbon) നോക്കുക
|
||||
അല്ലെങ്കിൽ [opencode@microsoft.com](mailto:opencode@microsoft.com) എന്ന വിലാസത്തിൽ അധിക сұрақങ്ങൾക്കോ അഭിപ്രായങ്ങളിലോ ബന്ധപ്പെടുക.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**സ്ഥിരീകരണം**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തിരിക്കുന്നു. നമുക്ക് കൃത്യതക്ക് ശ്രമിച്ചെങ്കിലും, ഓട്ടോമേറ്റഡ് വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ ദോഷങ്ങൾ ഉണ്ടാകാമെന്ന് ദയവായി മനസിലാക്കുക. അതിന്റെ സ്വതന്ത്ര ഭാഷയിലുള്ള യഥാർത്ഥ രേഖ അധികൃതമായ ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. അതിജീവക വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനക്കേടുകൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,137 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "5cf5e1ed51455fefed4895fcc4d6ba2a",
|
||||
"translation_date": "2026-01-08T10:47:28+00:00",
|
||||
"source_file": "Git-Basics/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
## വെബ്-ഡെവ് തുടങ്ങിയവർക്ക് ഉപകാരപ്രദമായ GIT അടിസ്ഥാനങ്ങൾ👶
|
||||
|
||||
|
||||
## `Git` എന്താണ്?
|
||||
1. Git ഒരു വിതരണവത്കരിച്ച പതിപ്പു നിയന്ത്രണ സിസ്റ്റമാണ്.
|
||||
2. പൂർണ്ണ കോഡ്ബേസ്, ചരിത്രം ഓരോ ഡെവലപ്പറുടെയും കമ്പ്യൂട്ടറിൽ തന്നെ ലഭ്യമാണ്,
|
||||
ഇത് ബ്രാഞ്ചിംഗ്, മേഴ്ജിംഗ് എളുപ്പമാക്കുന്നു.
|
||||
3. കമ്പ്യൂട്ടർ ഫയലുകളിലെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യാൻ പതിപ്പു നിയന്ത്രണ സിസ്റ്റമായി (VCS) ഉപയോഗിക്കുന്നു.
|
||||
|
||||
* വിതരണവത്കരിച്ച പതിപ്പു നിയന്ത്രണം
|
||||
* ബഹുഡെവലപ്പർമാരുടെ ഇടയിൽ ജോലി ഏകോപിപ്പിക്കുന്നു
|
||||
* ആരാണ് എന്ത് മാറ്റം ചെയ്തതും എപ്പോഴാണ് ചെയ്തത് എന്നിവ അറിയാം
|
||||
* വേണമെങ്കിൽ തിരിച്ചു revert ചെയ്യാം
|
||||
* ലോക്കൽ & റിമോട്ട് റീപ്പോസ്
|
||||
|
||||
## GIT യുടെ ആശയങ്ങൾ
|
||||
* കോഡ് ചരിത്രം ട്രാക്ക് ചെയ്യുന്നു
|
||||
* നിങ്ങളുടെ ഫയലുകളുടെ "സ്നാപ്ഷോട്ടുകൾ" എടുക്കുന്നു
|
||||
* "കമ്മിറ്റ്" ചെയ്ത് നിങ്ങൾക്ക് സ്നാപ്ഷോട്ട് എടുക്കാന് സമയമെടുത്താൽ
|
||||
* ഏതൊരൊക്കെ സ്നാപ്ഷോട്ട് വേണമെങ്കിലും സന്ദർശിക്കാം
|
||||
* കമ്മിറ്റ് ചെയ്യാനുള്ള മുമ്പ് ഫയലുകൾ സ്റ്റേജിംഗ് ചെയ്യാം
|
||||
|
||||
### Git & GitHub ന്റെ വ്യത്യാസം
|
||||
|
||||
| Git | GitHub |
|
||||
| ------- | ----------- |
|
||||
| Git ഒരു സോഫ്റ്റ്വെയർ ആണ് | GitHub ക്ലൗഡ് സേവനമാണ് |
|
||||
| Git സിസ്റ്റത്തിൽ ലോക്കലി ഇൻസ്റ്റാൾ ചെയ്തിരിക്കുന്നത് | GitHub വെബിൽ ഹോസ്റ്റ് ചെയ്തിരിക്കുന്നു |
|
||||
| കമാൻഡ്-ലൈൻ ടൂൾ ആണ് | ഗ്രാഫിക്കൽ യൂസർ ഇന്റർഫേസ് ആണ് |
|
||||
| Git ലിനക്സിൽ പരിപാലിക്കപ്പെടുന്നു | GitHub മൈക്രോസോഫ്റ്റ് പരിപാലിക്കുന്നു |
|
||||
| പതിപ്പു നിയന്ത്രണത്തിലും കോഡ് ഷെയറിംഗിലും കേന്ദ്രീകരിച്ചിരിക്കുന്നു | കേന്ദ്രീകൃത സോഴ്സ് കോഡ് ഹോസ്റ്റിങ്ങിൽ കേന്ദ്രീകരിച്ചിരിക്കുന്നു |
|
||||
| Git ഓപ്പൺ-സോഴ്സ് ലൈസൻസുള്ളതാണ് | GitHub സൗജന്യവും പണം നൽകേണ്ട തരം ഉള്ലതാണ് |
|
||||
| Git 2005-ൽ റിലീസ് ചെയ്തു | GitHub 2008-ൽ ഇറക്കി |
|
||||
|
||||
## GIT ഇൻസ്റ്റലേഷൻ
|
||||
* Linux(Debian)
|
||||
`$sudo apt-get install git`
|
||||
* Linux(Fedora)
|
||||
`$sudo yum install git`
|
||||
* [ഡൗൺലോഡ്](http://git-scm.com/download/mac) മാക്കിനുള്ളത്
|
||||
* [ഡൗൺലോഡ്](http://git-scm.com/download/win) വിന്ഡോസിനുള്ളത്
|
||||
|
||||
|
||||
### ഇൻസ്റ്റലേഷൻ പ്രക്രിയയുടെ ഘട്ടങ്ങൾ:
|
||||
1. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190359823-e421b976-515a-4565-990d-2f2e4e62977a.png"/>
|
||||
2. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360530-a7bfa681-47f4-4859-9b8a-4120e0cad348.png"/>
|
||||
3. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360760-30db7768-19e0-4848-a99d-a6c955e041e2.png"/>
|
||||
4. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190360896-473e1e54-f083-4b5c-a5f0-539f70469142.png"/>
|
||||
5. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361144-bc670a2b-b776-4867-9785-7b509d416fbb.png"/>
|
||||
6. പിന്നീട് Next > Next > Next > <b>Install</b> ക്ലിക്ക് ചെയ്യുക
|
||||
7. <img width="500" height="400" src="https://user-images.githubusercontent.com/61585443/190361548-4b700d85-c7d5-4d26-90e7-e5cc3ce24311.png"/>
|
||||
|
||||
### ഇൻസ്റ്റലേഷൻ കഴിഞ്ഞ് git bash ഉപയോഗിച്ച് git കോൺഫിഗർ ചെയ്യേണ്ടത്
|
||||
1. `git config --global user.name 'YourName'`
|
||||
2. `git config --global user.email 'YourEmail'`
|
||||
___
|
||||
|
||||
|
||||
## Git കമാൻഡുകൾ
|
||||
___
|
||||
|
||||
### പ്രോജക്ടുകൾ സ്വീകരിക്കുക & സൃഷ്ടിക്കുക
|
||||
|
||||
| കമാൻഡ് | വിവരണം |
|
||||
| ------- | ----------- |
|
||||
| `git init` | ഒരു ലോക്കൽ Git റീപ്പോസിറ്ററി ആദ്യം സൃഷ്ടിക്കുക |
|
||||
| `git clone ssh://git@github.com/[username]/[repository-name].git` | ഒരു റിമോട്ട് റീപ്പോസിറ്ററി ലോക്കലിലേക്ക് കോപ്പി ചെയ്യുക |
|
||||
|
||||
### അടിസ്ഥാന സ്നാപ്ഷോട്ടിംഗ്
|
||||
|
||||
| കമാൻഡ് | വിവരണം |
|
||||
| ------- | ----------- |
|
||||
| `git status` | നിലവാര പരിശോധിക്കുക |
|
||||
| `git add [file-name.txt]` | ഒരു ഫയൽ സ്റ്റേജിംഗ് ഏരിയയിൽ ചേർക്കുക |
|
||||
| `git add -A` | എല്ലാ പുതിയ മാറ്റം വന്ന ഫയലുകളും സ്റ്റേജിംഗിലേക്ക് ചേർക്കുക |
|
||||
| `git commit -m "[commit message]"` | മാറ്റങ്ങൾ കമ്മിറ്റ് ചെയ്യുക |
|
||||
| `git rm -r [file-name.txt]` | ഫയലോ ഫോൾഡരോ ഒഴിവാക്കുക |
|
||||
| `git push` | റിമോട്ട് റീപ്പോവിലേക്ക് എടുക്കുക |
|
||||
| `git pull` | റിമോട്ട് റീപ്പോവിൽ നിന്നുള്ള ഏറ്റവും പുതിയ മാറ്റങ്ങൾ സ്വീകരിക്കുക |
|
||||
|
||||
### ബ്രാഞ്ചിംഗ് & മേഴ്ജിംഗ്
|
||||
|
||||
| കമാൻഡ് | വിവരണം |
|
||||
| ------- | ----------- |
|
||||
| `git branch` | ബ്രാഞ്ചുകൾ പട്ടികപ്പെടുത്തുക (ഇപ്പോൾ ഉള്ള ബ്രാഞ്ചിന് അടിയന്തരചിഹ്നം) |
|
||||
| `git branch -a` | എല്ലാ ബ്രാഞ്ചുകളും പട്ടികപ്പെടുത്തുക (ലോകൽ & റിമോട്ട്) |
|
||||
| `git branch [branch name]` | പുതിയ ഒരു ബ്രാഞ്ച് സൃഷ്ടിക്കുക |
|
||||
| `git branch -D [branch name]` | ഒരു ബ്രാഞ്ച് ഇല്ലാക്കുക |
|
||||
| `git push origin --delete [branch name]` | റിമോട്ട് ബ്രാഞ്ച് നീക്കം ചെയ്യുക |
|
||||
| `git checkout -b [branch name]` | ഒരു പുതിയ ബ്രാഞ്ച് സൃഷ്ടിച്ച് അതിലേക്ക് മാറുക |
|
||||
| `git checkout -b [branch name] origin/[branch name]` | റിമോട്ട് ബ്രാഞ്ച് ക്ലോൺ ചെയ്ത് അതിലേക്ക് മാറുക |
|
||||
| `git branch -m [old branch name] [new branch name]` | ഒരു ബ്രാഞ്ചിന് പുതിയ പേര് നൽകുക |
|
||||
| `git checkout [branch name]` | ഒരു ബ്രാഞ്ചിലേക്ക് മാറുക |
|
||||
| `git checkout -` | അവസാനമായി മാറിയ ബ്രാഞ്ചിലേക്ക് മാറുക |
|
||||
| `git checkout -- [file-name.txt]` | ഫയലിലെ മാറ്റങ്ങൾ ഒഴിവാക്കുക |
|
||||
| `git merge [branch name]` | ഒരു ബ്രാഞ്ച് ചാലക ബ്രാഞ്ചിലേക്ക് മേഴ്ജ് ചെയ്യുക |
|
||||
| `git merge [source branch] [target branch]` | ഒരു ബ്രാഞ്ച് ലക്ഷ്യമിട്ട ബ്രാഞ്ചിലേക്ക് മർജ്ജ് ചെയ്യുക |
|
||||
| `git stash` | പ്രവർത്തനസമയത്തെ മാറ്റങ്ങൾ സ്റ്റാഷ് ചെയ്യുക |
|
||||
| `git stash clear` | എല്ലാ സ്റ്റാഷിലെ എൻട്രികളും നീക്കം ചെയ്യുക |
|
||||
|
||||
### പ്രോജക്ടുകൾ പങ്കുവെക്കൽ & അപ്ഡേറ്റ് ചെയ്യൽ
|
||||
|
||||
| കമാൻഡ് | വിവരണം |
|
||||
| ------- | ----------- |
|
||||
| `git push origin [branch name]` | ഒരു ബ്രാഞ്ച് റിമോട്ട് റീപ്പോയിലേക്ക് പുഷ് ചെയ്യുക |
|
||||
| `git push -u origin [branch name]` | റിമോട്ട് റീപ്പോയിലേക്ക് മാറ്റങ്ങൾ പുഷ് ചെയ്യുക (ബ്രാഞ്ച് ഓർമപ്പെടുത്തുക) |
|
||||
| `git push` | റിമോട്ട് റീപ്പോയിലേക്ക് മാറ്റങ്ങൾ പുഷ് ചെയ്യുക (ഓർമിച്ച ബ്രാഞ്ച്) |
|
||||
| `git push origin --delete [branch name]` | റിമോട്ട് ബ്രാഞ്ച് ഇല്ലാക്കുക |
|
||||
| `git pull` | ലോക്കൽ റീപ്പോ പുതിയ കമ്മിറ്റിലേക്ക് അപ്ഡേറ്റ് ചെയ്യുക |
|
||||
| `git pull origin [branch name]` | റിമോട്ട് റീപ്പോയിൽ നിന്നുള്ള മാറ്റങ്ങൾ വലിക്കുക |
|
||||
| `git remote add origin ssh://git@github.com/[username]/[repository-name].git` | ഒരു റിമോട്ട് റീപ്പോ ചേർക്കുക |
|
||||
| `git remote set-url origin ssh://git@github.com/[username]/[repository-name].git` | റീപ്പോയുടെ ഓറിജിൻ ബ്രാഞ്ച് SSH ആയി ക്രമീകരിക്കുക |
|
||||
|
||||
### പരിശോധന & താരതമ്യം
|
||||
|
||||
| കമാൻഡ് | വിവരണം |
|
||||
| ------- | ----------- |
|
||||
| `git log` | മാറ്റങ്ങൾ കാണുക |
|
||||
| `git log --summary` | മാറ്റങ്ങൾ (വിശദമായി) കാണുക |
|
||||
| `git log --oneline` | മാറ്റങ്ങൾ (സംഗ്രഹത്തിൽ) കാണുക |
|
||||
| `git diff [source branch] [target branch]` | മർജ്ജിന് മുൻപ് മാറ്റങ്ങൾ മുൻകൂർ കാണുക |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാരഹിത കുറിപ്പ്**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന AI പരിഭാഷാ സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിനായി ശ്രമിച്ചേക്കിലും, സ്വയംചാലിതമായ വിവർത്തനങ്ങളിൽ പിഴവുകൾ അല്ലെങ്കിൽ തട്ടിപ്പുകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. മൊഴിയിൽ നിന്നുള്ള യഥാർത്ഥ രേഖ കാര്യനിർണായക മേധാവി ഉറവിടമായി കണക്കാക്കപ്പെടുകയാണെന്ന് ദയവായി കാണുക. അത്യന്താപേക്ഷിത വിവരങ്ങൾക്കായി ഒരു പ്രൊഫഷണൽ മാനവ പരിഭാഷ ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കും ഓർമ്മക്കുറിവുകൾക്കും біз ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "4ecc3bf2e27983d4c780be6f26ee6228",
|
||||
"translation_date": "2026-01-08T10:35:29+00:00",
|
||||
"source_file": "SECURITY.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
## സുരക്ഷ
|
||||
|
||||
മൈക്രോസോഫ്റ്റ് നമ്മുടെ സോഫ്റ്റ്വെയർ ഉൽപ്പന്നങ്ങളും സേവനങ്ങളും സുരക്ഷിതമാക്കുന്നതിൽ ഗൗരവമായി സമീപിക്കുന്നു, അതിൽ നമ്മുടെ GitHub സംഘടനകളിലൂടെ നിയന്ത്രിക്കുന്ന എല്ലാ സോഴ്സ് കോഡ് റെപ്പോസിറ്ററികളും ഉൾപ്പെടുന്നു, അതായത് [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin) എന്നിവയും [നമ്മുടെ GitHub സംഘടനകളും](https://opensource.microsoft.com/?WT.mc_id=academic-77807-sagibbon).
|
||||
|
||||
നിങ്ങൾ കണ്ടെത്തിയത് മൈക്രോസോഫ്റ്റ് ഉൾപ്പെട്ട രെപ്പോസിറ്ററികളിൽ [മൈക്രോസോഫ്റ്റിന്റെ സുരക്ഷാ ദുർബ്ബലതയുടെ നിർവചനത്തിന്](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)/?WT.mc_id=academic-77807-sagibbon) അനുയോജ്യമായ ഒരു സുരക്ഷാ ദുർബ്ബലതയാണ് എന്ന് നിങ്ങൾ വിശ്വസിക്കുന്നുവെങ്കിൽ, താഴെവിവരിച്ച പ്രകാരം ഞങ്ങളോടു റിപ്പോർട്ട് ചെയ്യുക.
|
||||
|
||||
## സുരക്ഷാ പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്യൽ
|
||||
|
||||
**ദയവായി സുരക്ഷാ ദുർബ്ബലതകൾ പൊതു GitHub പ്രശ്നങ്ങളിലൂടെ റിപ്പോർട്ട് ചെയ്യരുത്.**
|
||||
|
||||
പകരം, ദയവായി മൈക്രോസോഫ്റ്റ് സെക്യൂരിറ്റി റെസ്പോൺസ് സെന്റർ (MSRC) യിൽ [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report/?WT.mc_id=academic-77807-sagibbon) പൊലീസ് റിപ്പോർട്ട് ചെയ്യുക.
|
||||
|
||||
ലോഗിൻ ചെയ്യാതെ സമർപ്പിക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, [secure@microsoft.com](mailto:secure@microsoft.com) എന്ന ഇമെയിൽ വിലാസത്തിന് ഇമെയിൽ അയയ്ക്കുക. സാധിക്കുന്നു എങ്കിൽ, ഞങ്ങളുടെ PGP കീ ഉപയോഗിച്ച് നിങ്ങളുടെ സന്ദേശം എൻക്രിപ്റ്റ് ചെയ്യുക; അത് [Microsoft Security Response Center PGP Key പേജിൽ](https://www.microsoft.com/msrc/pgp-key-msrc/?WT.mc_id=academic-77807-sagibbon) നിന്ന് ഡൗൺലോഡ് ചെയ്യുക.
|
||||
|
||||
നിങ്ങൾക്ക് 24 മണിക്കൂറിനുള്ളിൽ ഒരു പ്രതികരണം ലഭിക്കുമെന്ന് അനുകൂലിക്കുന്നു. ഏത് കാരണത്താലാകട്ടെ അത് ലഭിക്കുന്നില്ലെങ്കിൽ, നിങ്ങളുടെ ആദ്യ സന്ദേശം ഞങ്ങൾ സ്വീകരിച്ചതായ ഉറപ്പാക്കാൻ ഇമെയിലിലൂടെ ഫോളോ അപ് ചെയ്യുക. കൂടുതൽ വിവരങ്ങൾക്കായി [microsoft.com/msrc](https://www.microsoft.com/msrc/?WT.mc_id=academic-77807-sagibbon) സന്ദർശിക്കുക.
|
||||
|
||||
താഴെപ്പെട്ട ആവശ്യമായ വിവരങ്ങൾ (സാധ്യമായത്ര നൽകുക) ഉൾപ്പെടുത്തുക, ഇത് സാധ്യതയുള്ള പ്രശ്നം എങ്ങനെ സംഭവിക്കുന്നു എന്നതു മെച്ചമായി മനസിലാക്കാൻ സഹായിക്കും:
|
||||
|
||||
* പ്രശ്ന തരം (ഉദാഹരണം: ബഫർ ഓവർഫ്ലോ, SQL ഇൻജക്ഷൻ, ക്രോസ്-സൈറ്റ് സ്ക്രിപ്റ്റിംഗ്, തുടങ്ങിയവ)
|
||||
* പ്രശ്നം പ്രകടമാകുന്നതുമായി ബന്ധപ്പെട്ട സോഴ്സ് ഫയലുകളുടെ പൂര്ണ്ണ പാതകൾ
|
||||
* ബാധിക്കപ്പെട്ട സോഴ്സ് കോഡ് സ്ഥലം (ടാഗ്/ബ്രാഞ്ച്/കമ്മിറ്റ് അല്ലെങ്കിൽ നേരിട്ട് url)
|
||||
* പ്രശ്നത്തിൽ പുനരുറപ്പിക്കല് നടത്താൻ ആവശ്യമായ പ്രത്യേക കോൺഫിഗറേഷൻ
|
||||
* പ്രശ്നം പുനരുറപ്പിക്കൽ നടത്തുന്ന ഘട്ടഘട്ട നിർദ്ദേശങ്ങൾ
|
||||
* പ്രൂഫ്-ഓഫ്-കോൻസെപ്റ്റ് അല്ലെങ്കിൽ എക്സ്പ്ലോയിറ്റ് കോഡ് (സാധ്യമായെങ്കിൽ)
|
||||
* പ്രശ്നത്തിന്റെ സ്വാധീനം, പിടികൂടുന്നവൻ ഇത് എങ്ങനെ ഉപയോഗപ്പെടുത്താമെന്ന് ഉൾപ്പെടെ
|
||||
|
||||
ഈ വിവരങ്ങൾ നിങ്ങളുടെ റിപ്പോർട്ട് വേഗത്തിൽ നമുക്ക് പരിശോധിക്കാൻ സഹായിക്കും.
|
||||
|
||||
ബഗ് ബൗണ്ടിക്ക് വേണ്ടി റിപ്പോർട്ട് ചെയ്യുന്നുവെങ്കിൽ, കൂടുതൽ സമ്പൂർണമായ റിപ്പോർട്ടുകൾ കൂടുതൽ വലിയ ബൗണ്ടിയുടെ അവാർഡ് നൽകുന്നതിന് സഹായിക്കും. ഞങ്ങളുടെ [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty/?WT.mc_id=academic-77807-sagibbon) പേജ് മുഖാന്തിരം പ്രവർത്തനപ്രദമായ പ്രോഗ്രാമുകൾക്ക് കൂടുതൽ വിവരങ്ങൾ ലഭിക്കും.
|
||||
|
||||
## മുൻഗണന ലഭ്യമായ ഭാഷകൾ
|
||||
|
||||
എല്ലാ ആശയവിനിമയങ്ങളും ഇംഗ്ലീഷിൽ നടക്കുന്നതാണ് ഞങ്ങളുടെ പേര്.
|
||||
|
||||
## നയം
|
||||
|
||||
മൈക്രോസോഫ്റ്റ് [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd/?WT.mc_id=academic-77807-sagibbon) എന്ന സിദ്ധാന്തം പാലിക്കുന്നു.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരിഹാരം**:
|
||||
ഈ രേഖ AI ഭാഷാന്തര സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് ഭാഷാന്തരമാക്കിയതാണ്. ഞങ്ങൾ യഥാർത്ഥതയ്ക്കായി പരിശ്രമിച്ചെങ്കിലും, സ്വയംചാലിത ഭാഷാന്തരത്തിൽ പിശകുകളും അസാധുവായതും ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. മാതൃഭാഷയിലുള്ള അർഥസൂചനയാണ് പ്രാമാണികമായ ഉറവിടം. നിർണായക വിവരങ്ങൾക്കായി പ്രൊഫഷണൽ മാനവ ഭാഷാന്തരം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ ഭാഷാന്തരം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും വ്യാഖ്യാനക്കുറവുകൾക്കും ഞങ്ങൾ ഉത്തരവാദിത്വം വഹിച്ചു നൽകുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c9d207ff77b4bb46e46dc2b607a8ec1a",
|
||||
"translation_date": "2026-01-08T10:13:29+00:00",
|
||||
"source_file": "SUPPORT.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# പിന്തുണ
|
||||
|
||||
## പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്ത് സഹായം എങ്ങനെ ലഭിക്കാമെന്നും
|
||||
|
||||
ഈ പ്രोजക്ട് ബഗുകളും ഫീച്ചർ അഭ്യർത്ഥനകളും ട്രാക്ക് ചെയ്യാൻ GitHub Issues ഉപയോഗിക്കുന്നു. പുനരാവൃത്തി ഒഴിവാക്കാൻ പുതിയ പ്രശ്നങ്ങൾ റിപ്പോർട്ട് ചെയ്യുന്നതിനു മുമ്പ് നിലവിലെ പ്രശ്നങ്ങൾ തിരയുക. പുതിയ പ്രശ്നങ്ങൾക്കായി നിങ്ങളുടെ ബഗ് അല്ലെങ്കിൽ ഫീച്ചർ അഭ്യർത്ഥന ഒരു പുതിയ Issue ആയി ഫയൽ ചെയ്യുക.
|
||||
|
||||
ഈ പ്രോജക്ട് ഉപയോഗിക്കുന്നതിന് സഹായവും ചോദ്യങ്ങൾക്കുമായി, [നമ്മുടെ സംഭാവന മാർഗ്ഗനിർദ്ദേശങ്ങൾ](CONTRIBUTING.md) കാണുക.
|
||||
|
||||
## മൈക്രോസോഫ്റ്റ് പിന്തുണ നയം
|
||||
|
||||
ഈ പ്രോജക്റ്റിന് പിന്തുണ മുകളിൽ വ്യക്തമാക്കിയ വിഭവങ്ങളിലേക്ക് മാത്രമാണ് പരിധിയിടുന്നത്.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**വിചാരണാ കണക്കെടുപ്പ്**:
|
||||
ഈ ഡോക്യുമെന്റ് എഐ വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നമുക്ക് ശരിയായ വിവർത്തനം നൽകാനാണ് ശ്രമമെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിഴവുകള് അല്ലെങ്കിൽ അസാധുവായ വിവരങ്ങൾ ഉണ്ടാകാനിടയുണ്ട് എന്ന് മനസിലാക്കിയിരിക്കണം. യഥാർത്ഥ ഡോക്യുമെന്റ് അതിന്റെ മാതൃഭാഷയിൽ ഏർപ്പെടുത്തിയിരിക്കുന്നത് പ്രാധാന്യമുള്ള ഉറവിടമായി കണക്കാക്കപ്പെടുക ഇതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം നിർദ്ദേശിക്കുന്നു. ഈ വിവർത്തനത്തിന്റെ ഉപയോഗത്തിൽ നിന്നുള്ള herhangi തെറ്റായ അവബോധം അല്ലെങ്കിൽ വ്യാഖ്യാനത്തിനുള്ള ഉത്തരവാദിത്തം ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,23 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ea9f0804bd62f46d9808e953ec7fc459",
|
||||
"translation_date": "2026-01-08T10:19:47+00:00",
|
||||
"source_file": "_404.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# പുരോഗമനത്തിലുള്ള പ്രവർത്തി
|
||||
|
||||
ഞങ്ങൾ ഈ പേജിൽ പ്രവർത്തിക്കുന്നു. ദയവായി പിന്നീട് തിരിച്ച് സന്ദർശിക്കുക.
|
||||
|
||||
നിങ്ങളുടെ ഏതെങ്കിലും സംശയങ്ങൾ ഉണ്ടെങ്കിൽ, ഒരു [issue](https://github.com/microsoft/Web-Dev-For-Beginners/issues/new/choose) തുറക്കുക.
|
||||
|
||||
**[Back home](../../../../../../..)**
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**ഉദ്യോഗസ്ഥ പ്രഖ്യാപനം**:
|
||||
ഈ രേഖ [Co-op Translator](https://github.com/Azure/co-op-translator) എന്ന എഐ വിവർത്തന സേവനം ഉപയോഗിച്ച് വിവർത്തനം ചെയ്യപ്പെട്ടതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിച്ചെങ്കിലും, സ്വയംഭരണ വിവർത്തനങ്ങളിൽ പിഴവുകളും അശുദ്ധികളുമുണ്ടാകാം എന്ന点 ദയവായി ശ്രദ്ധിക്കുക. ഒരു രേഖയുടെ പ്രാമാണിക വാശിയാകുന്നത് ആ ഭാഷയിലെ ആദ്യ രേഖ തന്നെയാണ്. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിലൂടെ ഉണ്ടാകുന്ന തെറ്റിദ്ധാരണകൾക്കും അർത്ഥവ്യത്യാസങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "655c91b5979de46f1d70d97f0c5f1d14",
|
||||
"translation_date": "2026-01-08T11:38:09+00:00",
|
||||
"source_file": "docs/_sidebar.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
- വെളിപ്പെടുത്തല്
|
||||
- [1](../1-getting-started-lessons/1-intro-to-programming-languages/README.md)
|
||||
- [2](../1-getting-started-lessons/2-github-basics/README.md)
|
||||
- [3](../1-getting-started-lessons/3-accessibility/README.md)
|
||||
|
||||
- JS അടിസ്ഥാനങ്ങള്
|
||||
- [4](../2-js-basics/1-data-types/README.md)
|
||||
- [5](../2-js-basics/2-functions-methods/README.md)
|
||||
- [6](../2-js-basics/3-making-decisions/README.md)
|
||||
- [7](../2-js-basics/4-arrays-loops/README.md)
|
||||
|
||||
- HTML, CSS, JS
|
||||
- [8](../3-terrarium/1-intro-to-html/README.md)
|
||||
- [9](../3-terrarium/2-intro-to-css/README.md)
|
||||
- [10](../3-terrarium/3-intro-to-DOM-and-closures/README.md)
|
||||
|
||||
- టైപ്പിംഗ് ഗെയിം
|
||||
- [11](../4-typing-game/typing-game/README.md)
|
||||
|
||||
- ബ്രൗസര് എക്സ്റ്റെന്ഷന്
|
||||
- [12](../5-browser-extension/1-about-browsers/README.md)
|
||||
- [13](../5-browser-extension/2-forms-browsers-local-storage/README.md)
|
||||
- [14](../5-browser-extension/3-background-tasks-and-performance/README.md)
|
||||
|
||||
- സ്പേസ് ഗെയിം
|
||||
- [15](../6-space-game/1-introduction/README.md)
|
||||
- [16](../6-space-game/2-drawing-to-canvas/README.md)
|
||||
- [17](../6-space-game/3-moving-elements-around/README.md)
|
||||
- [18](../6-space-game/4-collision-detection/README.md)
|
||||
- [19](../6-space-game/5-keeping-score/README.md)
|
||||
- [20](../6-space-game/6-end-condition/README.md)
|
||||
|
||||
- ബാങ്ക് പ്രോജക്ട്
|
||||
- [21](../7-bank-project/1-template-route/README.md)
|
||||
- [22](../7-bank-project/2-forms/README.md)
|
||||
- [23](../7-bank-project/3-data/README.md)
|
||||
- [24](../7-bank-project/4-state-management/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**പരാമർശം**:
|
||||
ഈ ഡോക്യുമെന്റ് എഐ വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതക്ക് പരിശ്രമിക്കുന്നുവെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തപ്പുകൾ ഉണ്ടാകാവുന്നതാണ്. പ്രാഥമികമായ അസൽ ഡോക്യുമെന്റ് അതിന്റെ മാതൃഭാഷയിൽ പ്രാമാണിക സ്രോതസ്സ് ആയി പരിഗണിക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യവിവർത്തനം ശിപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചുള്ള ഏതെങ്കിലും തെറ്റു മനസ്സിലാക്കലുകൾക്കോ വ്യാഖ്യാനക്കേടുകൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,80 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "71009af209f81cc01a1f2d324200375f",
|
||||
"translation_date": "2026-01-08T10:11:39+00:00",
|
||||
"source_file": "for-teachers.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
### അധ്യാപകര്ക്ക്
|
||||
|
||||
ഈ പാഠ്യക്രമം നിങ്ങളുടെ ക്ലാസ്സുകളില് ഉപയോഗിക്കുന്നതിന് സ്വാഗതം. ഇത് GitHub Classroom-നും മുഖ്യ LMS പ്ലാറ്റ്ഫോറങ്ങളില് കൂടി ദ്രുതഗതിയിലും എളുപ്പത്തിൽ പ്രവര്ത്തിക്കുന്നു, കൂടാതെ ഇത് നിങ്ങളുടെ വിദ്യാര്ത്ഥികളോടൊപ്പം സ്വതന്ത്ര റിപ്പോസിറ്ററിയായി ഉപയോഗിക്കാം.
|
||||
|
||||
### GitHub Classroom-ന്റെൊപ്പം ഉപയോഗിക്കുക
|
||||
|
||||
പ്രതിവ6371, ക്ലാസ്കര്ക്രമം, അഭ്യാസങ്ങള് പൊതുസഞ്ചിതമായിരിക്കുന്നു ആദ64-യുള്ളവര്ക്കും വേണ്ടിയാണ് GitHub Classroom ഉപയോഗിക്കുന്നത്.
|
||||
|
||||
- ഈ റിപ്പൊ നിങ്ങളുടെ ഓര്ഗനൈസേഷനിലേക്കു ഫോര്ക്ക് ചെയ്യുക.
|
||||
- ഓരോ പാഠത്തിനും പ്രത്യേക റിപ്പൊ സൃഷ്ടിക്കുക, അതിലൂടെ GitHub Classroom ഓരോ അഭ്യാസവും സ്വതന്ത്രമായി ചേര്ക്കാന് കഴിയുന്നു.
|
||||
- ഓപ്ഷന് A: വായ്പ്പു റിപ്പൊകള് (ഓരോ പാഠത്തിനും ഒരൊറ്റ), അവയില് പാഠഫോള്ഡര് ഉള്ളടക്കം പകർത്തുക.
|
||||
- ഓപ്ഷന് B: ചരിത്രം സംരക്ഷിക്കുന്ന രീതിയില് (ഉദാഹരണത്തിന് ഒരു ഫോള്ഡര് പുതിയ റിപ്പൊയിലേക്കു വിഭജിക്കുക) ചെയ്തുകൊണ്ടു സൃഷ്ടിക്കുക.
|
||||
- GitHub Classroom-ല് ഓരോ പാഠത്തിന് ഒരു അഭ്യാസം സൃഷ്ടിച്ച് അനുയോജ്യമായ പാഠ റിപ്പൊയിലേക്ക് സൂചിപ്പിക്കുക.
|
||||
- ശുപാര്ശ ചെയ്യുന്ന ക്രമീകരണങ്ങള്:
|
||||
- റിപ്പൊവിസിബിലിറ്റി: വിദ്യാര്ത്ഥി പ്രവര്ത്തനത്തിനായി സ്വകാര്യമായി വെക്കുക.
|
||||
- പാഠം റിപ്പൊയുടെ ഡിഫോൾട്ട് ബ്രാഞ്ചില് നിന്ന് തുടങ്ങിയ കോഡ് ഉപയോഗിക്കുക.
|
||||
- ക്വിസുകളും സമര്പ്പണങ്ങളും വേണ്ടി ഇഷൂയുടെയും പുള്ള് റിക്ക്വസ്റ്റ് ടെംപ്ലേറ്റുകള് ചേര്ക്കുക.
|
||||
- നിങ്ങളുടെ പാഠങ്ങളില് ഓട്ടോഗ്രേഡിംഗ്, ടെസ്റ്റുകൾ ഉൾപ്പെട്ടിട്ടുണ്ടെങ്കില് അവ ക്രമീകരിക്കുക.
|
||||
- സഹായകമായ സന്ധര്ഭങ്ങള്:
|
||||
- റിപ്പൊ പേരുകള് lesson-01-intro, lesson-02-html തുടങ്ങിയവ പോലെ.
|
||||
- ലേബലുകള്: quiz, assignment, needs-review, late, resubmission.
|
||||
- ഓരോ കോഹോര്ട്ടിന് ടാഗുകള്/റിലീസുകള് (ഉദാ. v2025-term1).
|
||||
|
||||
ടിപ്പ്: വിന്ഡോസ് Git konflikts ഒഴിവാക്കാന്, സെങ്ക്ലഡായ ഫോള്ഡറുകള് (OneDrive/Google Drive പോലുള്ള) ഉള്ളില് റിപ്പോസിടറികള് സൂക്ഷിക്കുന്നത് ഒഴിവാക്കുക.
|
||||
|
||||
### Moodle, Canvas, അല്ലെങ്കില് Blackboard-നൊപ്പം ഉപയോഗിക്കുക
|
||||
|
||||
ഈ പാഠ്യക്രമം സാധാരണ LMS പ്രവൃത്തിക്കും അനുയോജ്യമായ ഇറക്കുമതി പാക്കേജുകൾ ഉൾപ്പെടുന്നു.
|
||||
|
||||
- Moodle: പാഠ്യക്രമം മുഴുവനും ലോഡ് ചെയ്യാൻ Moodle അപ്ലോഡ് ഫയല് [Moodle upload file](../../../../../../../teaching-files/webdev-moodle.mbz) ഉപയോഗിക്കുക.
|
||||
- Common Cartridge: വ്യാപകമായ LMS യുമായി പൊരുത്തപ്പെടാന് Common Cartridge ഫയല് [Common Cartridge file](../../../../../../../teaching-files/webdev-common-cartridge.imscc) ഉപയോഗിക്കുക.
|
||||
- കുറിപ്പുകൾ:
|
||||
- Moodle Cloudയ്ക്ക് Common Cartridge പിന്തുണ കുറവാണ്. മുകളില് പറയുന്ന Moodle ഫയല് ഉപയോഗിക്കുക, അത് Canvas-ലും അപ്ലോഡ് ചെയ്യാം.
|
||||
- ഇറക്കുമതി ചെയ്ത ശേഷം, നിങ്ങളുടെ ടേം ഷെഡ്യൂളിന് അനുയോജ്യമായി മോഡ്യൂളുകളും, തീയ്യതികളും, ക്വിസുകളുടെ ക്രമീകരണങ്ങളും പരിശോധിക്കുക.
|
||||
|
||||
|
||||
> Moodle ക്ലാസ്സില് പാഠ്യക്രമം
|
||||
|
||||
|
||||
> Canvas-ൽ പാഠ്യക്രമം
|
||||
|
||||
### ക്ലാസ്സ്റൂം ഇല്ലാതെ ഈ റിപ്പോ നേരിട്ട് ഉപയോഗിക്കുക
|
||||
|
||||
GitHub Classroom ഉപയോഗിക്കാതെ നേരിട്ട് ഈ റിപ്പോയില് നിന്നു കോഴ്സ് പ്രവര്ത്തിപ്പിക്കാം.
|
||||
|
||||
- സിങ്ക്റോണസ്/ഓണ്ലൈനായി (Zoom/Teams):
|
||||
- ചോദ്യത്തിന്റെ ഉത്തരം സессണുകള് നടത്തുക; ക്വിസുകൾക്ക് ബ്രേക്ക് ഔട്ട് റൂമുകൾ ഉപയോഗിക്കുക.
|
||||
- ക്വിസുകള്ക്കായി സമയപരിധി പ്രഖ്യാപിക്കുക; വിദ്യാര്ത്ഥികള് ഉത്തരങ്ങള് GitHub Issues ആയി സമര്പ്പിക്കും.
|
||||
- കൂട്ടായി ചെയ്യുന്ന അഭ്യാസങ്ങള്ക്കായി, വിദ്യാര്ത്ഥികള് പൊതുവായ പാഠം റിപ്പോസിറ്ററികളില് പ്രവര്ത്തിച്ച് പുള്ള് റിക്ക്വസ്റ്റുകള് തുറക്കും.
|
||||
- പ്രൈവറ്റ്/അസിങ്ക്റോണസ് ഫോർമാറ്റുകള്:
|
||||
- ഓരോ പാഠവും കടന്നുവാങ്ങി നിങ്ങളുടെ സ്വത്തമായ **സ്വകാര്യ** റിപ്പോസിറ്ററികളാക്കി, നിങ്ങളെ സഹപ്രവര്ത്തകനായി ചേര്ക്കുക.
|
||||
- ക്ലാസ്പഠന റിപ്പო അല്ലെങ്കില് സ്വന്തം സ്വകാര്യ ഫോര്ക്കുകളില് Issues (ക്വിസുകള്)നും Pull Requests (അഭ്യാസങ്ങള്)നും വഴി സമര്പ്പിക്കുക.
|
||||
|
||||
### മികച്ച പ്രാക്ടിസുകള്
|
||||
|
||||
- Git/GitHub അടിസ്ഥാനങ്ങള്, Issues, PRs എന്നിവയെ കുറിച്ച് ഒരു ഓറിയന്റേഷന് പാഠം നല്കുക.
|
||||
- Issues-ല് ബഹു-ചുവട് ചോദ്യങ്ങള്ക്ക്/അഭ്യാസങ്ങള്ക്ക് ചെക്ലിസ്റ്റ് ഉപയോഗിക്കുക.
|
||||
- CONTRIBUTING.md, CODE_OF_CONDUCT.md അടക്കം ക്ലാസ്റൂം നയങ്ങള് നിശ്ചയിക്കുക.
|
||||
- ആക്സസിബിലിറ്റിയുടെ കുറിപ്പുകളും (alt പാഠം, ക്യാപ്ഷനുകൾ) പ്രിന്റ് ചെയ്യാവുന്ന PDF-കളും ചേര്ക്കുക.
|
||||
- പാഠ്യവിഷയങ്ങള് വര്ഷത്തിലോ സെമസ്റ്ററിലോ ഒപ്പം വേഴ്ഷന് ചെയ്യുക, പ്രസിദ്ധീകരണത്തിനു ശേഷം പാഠം റിപ്പോസിറ്ററികള് പൂട്ടുക.
|
||||
|
||||
### പ്രതികരണങ്ങളും പിന്തുണയും
|
||||
|
||||
ഈ പാഠ്യക്രമം നിങ്ങളും നിങ്ങളുടെ വിദ്യാര്ത്ഥികളും ഉപയോഗിക്കാനായി ആഗ്രഹിക്കുന്നു. പിഴവുകള്, ആവശ്യങ്ങള്, മെച്ചപ്പെടുത്തലുകള്ക്കായി ഈ റിപ്പോഷിറ്ററിയില് പുതിയ ഒരു Issue തുറക്കുക, അല്ലെങ്കില് Teacher Corner-ല് ചര്ച്ച ആരംഭിക്കുക.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**തൊഴിലാളി**:
|
||||
ഈ രേഖ AI തർജ്ജമാ സേവനം [കോ-ഓപ് ട്രാൻസ്ലേറ്റർ](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് തർജ്ജമ ചെയ്തു. നാം നിർവേദനക്ഷമതയ്ക്കായി ശ്രമിച്ചിട്ടും, സ്വയംഭരണ തർജ്ജമകൾ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റായ വിവരങ്ങൾ ഉൾപ്പെടുത്താവുന്നത് ശ്രദ്ധിക്കുക. എല്ലാ പ്രധാന വിവരങ്ങൾക്കും സ്വദേശഭാഷയിൽ ഉള്ള മൗലിക രേഖയെ വിശ്വസനീയമായ ഉറവിടമായി കാണണം. നിർണായക വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ തർജ്ജമ ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ തർജ്ജമ ഉപയോഗിച്ച് ഉണ്ടാകുന്ന സംശയങ്ങൾക്കും തെറ്റായ വിവർത്തനങ്ങൾക്കും ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,67 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "0494be70ad7fadd13a8c3d549c23e355",
|
||||
"translation_date": "2026-01-08T11:41:28+00:00",
|
||||
"source_file": "lesson-template/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# [പാഠ വിഷയം]
|
||||
|
||||
|
||||
|
||||
## [പാഠത്തിന് മുമ്പുള്ള ക്വിസ്](../../../lesson-template/quiz-url)
|
||||
|
||||
[നാം പഠിക്കാനുള്ളത് വിവരിക്കുക]
|
||||
|
||||
### പരിചയം
|
||||
|
||||
എന്തെന്താം വിഷയങ്ങൾ ഉൾപ്പെടുമെന്ന് വിവരിക്കുക
|
||||
|
||||
> കുറിപ്പുകൾ
|
||||
|
||||
### മുൻഷരതുകൾ
|
||||
|
||||
ഈ പാഠത്തിനു മുമ്പായി ഏതെല്ലാം നടപടി ക്രമങ്ങൾ പൂർത്തിയാക്കണമായിരിക്കും?
|
||||
|
||||
### തയ്യാറെടുപ്പ്
|
||||
|
||||
ഈ പാഠം ആരംഭിക്കാൻ വേണ്ട തയ്യാറെടുപ്പ് നടപടികൾ
|
||||
|
||||
---
|
||||
|
||||
[തടങ്ങളായി ഉള്ളടക്കം പരിശോധിക്കുക]
|
||||
|
||||
## [വിഷയം 1]
|
||||
|
||||
### താസ്ക്:
|
||||
|
||||
പങ്കിടപ്പെട്ട കോഡോടുകൂടി പ്രോജക്ട് നിർമ്മിക്കാൻ നിങ്ങളുടെ കോഡ്ബെയ്സ് ക്രമം ക്രമമായി മെച്ചപ്പെടുത്താൻ ഒത്തു ചേരുക:
|
||||
|
||||
```html
|
||||
code blocks
|
||||
```
|
||||
|
||||
✅ അറിവ് പരിശോധന - തുറന്ന ചോദ്യംകൾ ഉപയോഗിച്ച് വിദ്യാർത്ഥികളുടെ അറിവ് വ്യാപിപ്പിക്കാൻ ഈ അവസരം ഉപയോഗിക്കൂ
|
||||
|
||||
## [വിഷയം 2]
|
||||
|
||||
## [വിഷയം 3]
|
||||
|
||||
🚀 വെല്ലുവിളി: ക്ലാസിൽ സഹകരിച്ച് പ്രോജക്ട് മെച്ചപ്പെടുത്താൻ വിദ്യാർത്ഥികൾക്ക് വെല്ലുവിളി ചേർക്കുക
|
||||
|
||||
ഓപ്ഷണൽ: പൂർത്തിയായ പാഠത്തിന്റെ UI-യുടെ സ്ക്രീൻഷോട്ട് ആവശ്യമായെങ്കിൽ ചേർക്കുക
|
||||
|
||||
## [പഠനത്തിന് ശേഷമുള്ള ക്വിസ്](../../../lesson-template/quiz-url)
|
||||
|
||||
## അവലോകനം & സ്വയം പഠനം
|
||||
|
||||
**അസൈൻമെന്റ് സമർപ്പണ നിശ്ചിത തിയ്യതി [MM/YY]**: [അസൈൻമെന്റ് പേര്](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസാധുവാക്കൽ**:
|
||||
ഈ രേഖ AI പരിഭാഷ സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് പരിഭാഷ ചെയ്തതാണ്. ഞങ്ങൾ കൃത്യതയ്ക്ക് ശ്രമിച്ചാലും, യന്ത്രപരിഭാഷയിൽ പിഴവുകൾ അല്ലെങ്കിൽ അകുറ്റ സമയങ്ങൾ ഉണ്ടാകാമെന്ന് ശ്രദ്ധിക്കുക. യഥാർത്ഥ രേഖ അവരുടെ സ്വദേശഭാഷയിൽ ഉള്ളത് അവധാരിത ഉറവിടമായി കണക്കാക്കേണ്ടതാണ്. സുപ്രധാന വിവരങ്ങൾക്ക് പ്രൊഫഷണൽ മനുഷ്യ പരിഭാഷ ശുപാർശ ചെയ്യുന്നു. ഈ പരിഭാഷ ഉപയോഗത്തിൽ ഉണ്ടായ misunderstandings അല്ലെങ്കിൽ തെറ്റിദ്ധാരണകൾക്കെതിരെ ഞങ്ങൾ ഉത്തരവാദിത്തം ഏറ്റെടുക്കില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,25 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b5f62ec256c7e43e771f0d3b4e1a9130",
|
||||
"translation_date": "2026-01-08T11:42:25+00:00",
|
||||
"source_file": "lesson-template/assignment.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
# [അസൈന്മെന്റ് പേര്]
|
||||
|
||||
## നിർദ്ദേശങ്ങൾ
|
||||
|
||||
## റൂബ്രിക്ക്
|
||||
|
||||
| മാനദണ്ഡം | ഉദാത്തമായത് | ശരിയായി | മെച്ചപ്പെടുത്തേണ്ടത് |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| | | | |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**തൽക്കാലിക സഹിതം**:
|
||||
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിച്ചുള്ളതെങ്കിലും, യന്ത്രം നിർവഹിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ അശുദ്ധികൾ ഉണ്ടാകാവുന്നതാണ്. മൂല രേഖ അതിന്റെ കൊടുത്ത ഭാഷയിൽ തന്നേ വിശ്വസനീയമായ ഉറവിടമായി കണക്കാക്കണം. നിർണ്ണായക വിവരങ്ങൾക്ക്, വിദഗ്ധ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യുന്നു. ഈ വിവർത്തനത്തെ അടിസ്ഥാനമാക്കി ഉണ്ടായ任何 தவറുകളും അർത്ഥ വ്യത്യാസങ്ങൾക്കുമുള്ള ഉത്തരവാദിത്തം ഞങ്ങൾ ഏറ്റെടുക്കുന്നില്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,52 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ff47271e53637b2ba6ba72ad2b70f6d7",
|
||||
"translation_date": "2026-01-08T11:29:11+00:00",
|
||||
"source_file": "memory-game/README.md",
|
||||
"language_code": "ml"
|
||||
}
|
||||
-->
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
ആദ്യം, ഡെവലപ്പ്മെന്റ് സെർവർ പ്രവർത്തിപ്പിക്കുക:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# അല്ലെങ്കിൽ
|
||||
yarn dev
|
||||
# അല്ലെങ്കിൽ
|
||||
pnpm dev
|
||||
# അല്ലെങ്കിൽ
|
||||
bun dev
|
||||
```
|
||||
|
||||
ഫലമായി കാണാൻ നിങ്ങളുടെ ബ്രൗസറിൽ [http://localhost:3000](http://localhost:3000) തുറക്കുക.
|
||||
|
||||
`app/page.js` ഫയൽ മാറ്റം വരുത്തി പേജ് എഡിറ്റിംഗ് ആരംഭിക്കാം. ഫയൽ എഡിറ്റ് ചെയ്യുമ്പോളുതന്നെ പേജ് സ്വയമേവ അപ്ഡേറ്റ് ചെയ്യും.
|
||||
|
||||
ഈ പ്രോജക്റ്റ് [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) ഉപയോഗിച്ച് ഓട്ടോമാറ്റിക്കായാണ് ലോഡ് ചെയ്യപ്പെടുന്നതും ഒപ്റ്റിമൈസ് ചെയ്തെടുത്തിരിക്കുന്നതും [Geist](https://vercel.com/font), Vercel പ്രതിഷ്ഠിച്ച പുതിയ ഫോണ്ട് കുടുംബം.
|
||||
|
||||
## Learn More
|
||||
|
||||
Next.js എക്കുറിച്ച് കൂടുതൽ അറിയാൻ താഴെ കൊടുത്തിരിക്കുന്ന സ്രോതസ്സുകൾ നോക്കുക:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - Next.js ഫീച്ചറുകളെയും API-യേയും കുറിച്ച് അറിയുക.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - ഇന്ററാക്ടീവ് Next.js പരിശീലനം.
|
||||
|
||||
നിങ്ങൾക്ക് [Next.js GitHub റീപോസിറ്ററി](https://github.com/vercel/next.js) സന്ദർശിക്കാം — നിങ്ങളുടെ ഫീഡ്ബാക്കും സംഭാവനകളും സ്വാഗതം ചെയ്യുന്നു!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
നിങ്ങളുടെ Next.js ആപ്പ് ഡെപ്ലോയ് ചെയ്യാനുള്ള ഏറ്റവും എളുപ്പമാർഗം Next.js സൃഷ്ടിച്ച [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) ഉപയോഗിച്ചാണ്.
|
||||
|
||||
കൂടുതൽ വിവരങ്ങൾക്ക് നമ്മുടെ [Next.js deployment документация](https://nextjs.org/docs/app/building-your-application/deploying) പരിശോധിക്കുക.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**അസൂയാപേരിപ്പ്**:
|
||||
ഈ ഡോക്യുമെന്റ് AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം ശരിയായ വിവർത്തനത്തിന് ശ്രമിച്ചെങ്കിലും, സ്വയംകൃതമായി നടത്തിയ വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തത്വഭ്രഷ്ടതകൾ ഉണ്ടാകാനുള്ള സാധ്യതയുണ്ട്. അതിനാൽ, യഥാർത്ഥ ഡോക്യുമെന്റ് അതിന്റെ মাতൃഭാഷയിലുള്ള പ്രാമാണിക സ്രോതസ്സായി കണക്കാക്കേണ്ടതാണ്. പ്രധാനപ്പെട്ട വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മാനവ വിവർത്തനം നിർദ്ദേശിക്കപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിച്ചതിൽ നിന്നുണ്ടാകുന്ന അവ മനസ്സിലാക്കൽ തർക്കങ്ങൾക്കോ തെറ്റിദ്ധാരണകൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,78 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
||||
"translation_date": "2026-01-08T20:21:20+00:00",
|
||||
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Assignment: Exploring Modern Web Development Tools
|
||||
|
||||
## Instructions
|
||||
|
||||
The web development ecosystem include plenti special tools wey dey help developers build, test, and maintain applications well well. Your work na to research and sabi tools wey go complete the ones wey this lesson cover.
|
||||
|
||||
**Your Mission:** Choose **three tools** wey **this lesson no talk about** (no choose code editors, browsers, or command line tools wey dem don list before). Make you focus on tools wey solve particular gbege for modern web development workflow.
|
||||
|
||||
**For each tool, give:**
|
||||
|
||||
1. **Tool name and category** (ex: "Figma - Design Tool" or "Jest - Testing Framework")
|
||||
2. **Purpose and benefits** - Explain for 2-3 sentences why web developer go use this tool and which kind gbege e dey solve
|
||||
3. **Official documentation link** - Put link to the tool official docs or website (no na just tutorial sites)
|
||||
4. **Real-world context** - Talk one way wey this tool dey fit inside professional development workflow
|
||||
|
||||
## Suggested Tool Categories
|
||||
|
||||
Try explore tools from these categories:
|
||||
|
||||
| Category | Examples | What They Do |
|
||||
|----------|----------|--------------|
|
||||
| **Build Tools** | Vite, Webpack, Parcel, esbuild | Dem bundle and optimize code for production with fast development servers |
|
||||
| **Testing Frameworks** | Vitest, Jest, Cypress, Playwright | Dem make sure code correct and catch bugs before deployment |
|
||||
| **Design Tools** | Figma, Adobe XD, Penpot | Dem dey create mockups, prototypes, and design systems together |
|
||||
| **Deployment Platforms** | Netlify, Vercel, Cloudflare Pages | Dem host and distribute websites with automatic CI/CD |
|
||||
| **Version Control** | GitHub, GitLab, Bitbucket | Dem manage code changes, collaboration, and project workflows |
|
||||
| **CSS Frameworks** | Tailwind CSS, Bootstrap, Bulma | Dem quicken styling with pre-built component libraries |
|
||||
| **Package Managers** | npm, pnpm, Yarn | Dem install and manage code libraries and dependencies |
|
||||
| **Accessibility Tools** | axe-core, Lighthouse, Pa11y | Dem test for inclusive design and WCAG compliance |
|
||||
| **API Development** | Postman, Insomnia, Thunder Client | Dem dey test and document APIs while development dey happen |
|
||||
|
||||
## Format Requirements
|
||||
|
||||
**For each tool:**
|
||||
```
|
||||
### [Tool Name] - [Category]
|
||||
|
||||
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
||||
|
||||
**Documentation:** [Official website/documentation link]
|
||||
|
||||
**Workflow Integration:** [1 sentence about how it fits into development process]
|
||||
```
|
||||
|
||||
## Quality Guidelines
|
||||
|
||||
- **Choose current tools**: Pick tools wey dem still dey maintain and plenty people sabi for 2025
|
||||
- **Focus on value**: Talk the exact benefits, no be just wetin the tool dey do
|
||||
- **Professional context**: Think about tools wey development teams dey use, no be only individual hobbyists
|
||||
- **Diverse selection**: Choose tools from different categories to show wide ecosystem
|
||||
- **Modern relevance**: Pick tools wey align with current web development trends and best practices
|
||||
|
||||
## Rubric
|
||||
|
||||
| Excellent | Good | Needs Improvement |
|
||||
|-----------|------|-------------------|
|
||||
| **Clear explain why developers dey use each tool and which problems e dey solve** | **Explained wetin the tool do but miss some context about e value** | **Only list tools no explain wetin dem dey do or benefits** |
|
||||
| **Give official documentation links for all tools** | **Mostly give official links but 1-2 tutorial sites dey too** | **Mainly give tutorial sites no official docs** |
|
||||
| **Pick current, professionally-used tools from wide categories** | **Pick good tools but category variety no too much** | **Choose old tools or only one category** |
|
||||
| **Show understanding of how tools dey fit into development workflows** | **Show small understanding for professional context** | **Only focus on tool features no workflow context** |
|
||||
|
||||
> 💡 **Research Tip**: Try find tools wey dey job postings for web developers, check popular developer surveys, or look through dependencies wey successful open-source projects use for GitHub!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Even though we try to make am correct, make you sabi say automated translation fit get mistake or no too clear. Di original document wey e dey for im own language na di correct one. For important mata, make person wey sabi human translation do am. We no go responsible if anybody no understand well or if e mean different thing because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,261 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
||||
"translation_date": "2026-01-08T19:49:09+00:00",
|
||||
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Comprehensive Website Accessibility Audit
|
||||
|
||||
## Instructions
|
||||
|
||||
For dis assignment, you go carry out professional level accessibility audit for real website, apply the principles and techniques wey you don learn. Dis hands-on experience go deepen your understanding of accessibility barriers and solutions.
|
||||
|
||||
Choose website wey get accessibility issues—dis one go give you more learning chance than to analyze website wey don perfect already. Good options na old websites, complex web applications, or sites wey get plenty multimedia content.
|
||||
|
||||
### Phase 1: Strategic manual evaluation
|
||||
|
||||
Before you start to use automated tools, do thorough manual assessment first. Dis human-centered way dey show issues wey tools fit miss and e go help you understand how real users dey experience am.
|
||||
|
||||
**🔍 Important evaluation criteria:**
|
||||
|
||||
**Navigation and Structure:**
|
||||
- You fit navigate whole site use keyboard only (Tab, Shift+Tab, Enter, Space, Arrow keys)?
|
||||
- Focus indicators dey clear for all interactive elements?
|
||||
- Heading structure (H1-H6) dey create logical content outline?
|
||||
- E get skip links to jump go main content?
|
||||
|
||||
**Visual Accessibility:**
|
||||
- Color contrast everywhere for site dey enough (minimum 4.5:1 for normal text)?
|
||||
- Site dey use only color to show important information?
|
||||
- All images get correct alternative text?
|
||||
- Layout still dey functional when you zoom to 200%?
|
||||
|
||||
**Content and Communication:**
|
||||
- E get "click here" or unclear link texts?
|
||||
- You fit understand content and how e work without visual aid?
|
||||
- Form fields properly labeled and grouped?
|
||||
- Error messages clear and helpful?
|
||||
|
||||
**Interactive Elements:**
|
||||
- All buttons and form controls dey work with keyboard alone?
|
||||
- Dynamic content changes dey announce to screen readers?
|
||||
- Modal dialogs and complex widgets dey follow proper accessibility patterns?
|
||||
|
||||
📝 **Write down your findings** with example them, screenshots, and page URLs. Mention both issues and good things.
|
||||
|
||||
### Phase 2: Comprehensive automated testing
|
||||
|
||||
Now, check and expand your manual findings with top-level accessibility testing tools. Each tool get different strength, so use multiple tools to cover everything.
|
||||
|
||||
**🛠️ Testing tools wey you go need:**
|
||||
|
||||
1. **Lighthouse Accessibility Audit** (inside Chrome/Edge DevTools)
|
||||
- Run audit for multiple pages
|
||||
- Focus on certain metrics and tips
|
||||
- Note your accessibility score and issues
|
||||
|
||||
2. **axe DevTools** (browser extension - industry standard)
|
||||
- More detailed issue detection than Lighthouse
|
||||
- Give specific code examples for fixes
|
||||
- Test against WCAG 2.1 standards
|
||||
|
||||
3. **WAVE Web Accessibility Evaluator** (browser extension)
|
||||
- Visual display of accessibility features
|
||||
- Highlights errors and positive features
|
||||
- Good for understanding page structure
|
||||
|
||||
4. **Color Contrast Analyzers**
|
||||
- WebAIM Contrast Checker for specific color pairs
|
||||
- Browser extensions for whole page analysis
|
||||
- Test against WCAG AA and AAA standards
|
||||
|
||||
**🎧 Real assistive technology testing:**
|
||||
- **Screen reader testing**: Use NVDA (Windows), VoiceOver (Mac), or TalkBack (Android)
|
||||
- **Keyboard-only navigation**: Unplug mouse, navigate whole site with keyboard only
|
||||
- **Zoom testing**: Test for 200% and 400% zoom levels
|
||||
- **Voice control testing**: If available, try voice navigation tools
|
||||
|
||||
**📊 Organize your results** by creating big spreadsheet with:
|
||||
- Issue description and place
|
||||
- Severity level (Critical/High/Medium/Low)
|
||||
- WCAG criteria wey get problem
|
||||
- Tool wey find issue
|
||||
- Screenshots and proofs
|
||||
|
||||
### Phase 3: Comprehensive findings documentation
|
||||
|
||||
Make professional accessibility audit report wey show say you understand technical issues and how e affect people.
|
||||
|
||||
**📋 Report sections wey you need:**
|
||||
|
||||
1. **Executive Summary** (1 page)
|
||||
- Website URL and short description
|
||||
- Overall accessibility level
|
||||
- Top 3 most important issues
|
||||
- Estimated effect for users wey get disabilities
|
||||
|
||||
2. **Methodology** (½ page)
|
||||
- Testing approach and tools wey you use
|
||||
- Pages checked and device/browser used
|
||||
- Standards checked against (WCAG 2.1 AA)
|
||||
|
||||
3. **Detailed Findings** (2-3 pages)
|
||||
- Issues grouped by WCAG principle (Perceivable, Operable, Understandable, Robust)
|
||||
- Add screenshots and specific examples
|
||||
- Note positive accessibility features you find
|
||||
- Cross-check with automated tool results
|
||||
|
||||
4. **User Impact Assessment** (1 page)
|
||||
- How your issues affect users with different disabilities
|
||||
- Scenarios wey talk about real user experience
|
||||
- Business impact (legal risk, SEO, user growth)
|
||||
|
||||
**📸 Evidence collection:**
|
||||
- Screenshots of violations
|
||||
- Screen recordings of problem user flows
|
||||
- Tool reports (save as PDFs)
|
||||
- Code examples of issues
|
||||
|
||||
### Phase 4: Professional remediation plan
|
||||
|
||||
Make strategic, prioritized plan to fix accessibility problems. Dis one go show say you sabi think like professional web developer wey dey solve real business wahala.
|
||||
|
||||
**🎯 Create detailed improvement recommendations (minimum 10 issues):**
|
||||
|
||||
**For each issue, provide:**
|
||||
|
||||
- **Issue Description**: Clear talk wetin wrong and why e be problem
|
||||
- **WCAG Reference**: Specific criteria wey you break (e.g., "2.4.4 Link Purpose (In Context) - Level A")
|
||||
- **User Impact**: How e affect people with different disabilities
|
||||
- **Solution**: Specific code change, design change, or process fix
|
||||
- **Priority Level**: Critical (blocks basic use) / High (big barrier) / Medium (usability problem) / Low (improvement)
|
||||
- **Implementation Effort**: Time or complexity estimate (Quick win / Moderate effort / Major refactor)
|
||||
- **Testing Verification**: How to check say the fix dey work
|
||||
|
||||
**Example improvement entry:**
|
||||
|
||||
```
|
||||
Issue: Generic "Read more" link text appears 8 times on homepage
|
||||
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
||||
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
||||
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
||||
Priority: High (major navigation barrier)
|
||||
Effort: Low (30 minutes to update content)
|
||||
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
||||
```
|
||||
|
||||
**📈 Strategic implementation phases:**
|
||||
|
||||
- **Phase 1 (0-2 weeks)**: Critical issues wey block basic function
|
||||
- **Phase 2 (1-2 months)**: High priority improvements for better user experience
|
||||
- **Phase 3 (3-6 months)**: Medium priority enhancements and process improvements
|
||||
- **Phase 4 (Ongoing)**: Continuous monitoring and enhancement
|
||||
|
||||
## Evaluation Rubric
|
||||
|
||||
Your accessibility audit go get rating for both technical correctness and professional presentation:
|
||||
|
||||
| Criteria | Excellent (90-100%) | Good (80-89%) | Satisfactory (70-79%) | Needs Improvement (<70%) |
|
||||
|----------|-------------------|---------------|---------------------|------------------------|
|
||||
| **Manual Testing Depth** | Deep evaluation covering all POUR principles with detailed notes and user examples | Good coverage for most accessibility areas with clear findings and some user impact | Basic evaluation covering important areas with enough notes | Limited testing with shallow notes and little user impact thought |
|
||||
| **Tool Utilization & Analysis** | Uses all required tools well, cross-checks findings, includes proof, analyzes tool limits | Uses most tools well with good notes, some cross-checking, and enough proof | Uses required tools with basic notes and some proof | Small tool use, poor notes, or missing proof |
|
||||
| **Issue Identification & Categorization** | Finds 15+ specific issues for all WCAG principles, correctly categorizes by severity, shows deep understanding | Finds 10-14 issues across most WCAG principles, good categorization, solid understanding | Finds 7-9 issues with enough WCAG coverage and basic category work | Finds less than 7 issues with limited scope or poor categorization |
|
||||
| **Solution Quality & Feasibility** | 10+ detailed and actionable solutions with exact WCAG references, real implementation timelines, and verification | 8-9 well-made solutions with mostly exact references and good implementation plans | 6-7 basic solutions with some detail and mostly real plans | Less than 6 solutions or missing detail, unrealistic plans |
|
||||
| **Professional Communication** | Report well organized, clear, includes executive summary, uses proper technical language, business style | Good organization with good writing, includes most required sections, proper tone | Okay organization with acceptable writing, basic required sections | Bad organization, unclear writing, or missing main sections |
|
||||
| **Real-World Application** | Shows understanding of business impact, legal stuff, user variety, real implementation challenges | Shows good understanding of practical use with some business context | Basic understanding of real-world use | Little connection to practical use |
|
||||
|
||||
## Advanced Challenge Options
|
||||
|
||||
**🚀 For students wey want extra challenge:**
|
||||
|
||||
- **Comparative Analysis**: Audit 2-3 competing websites and compare their accessibility levels
|
||||
- **Mobile Accessibility Focus**: Deep check mobile-specific accessibility issues using Android TalkBack or iOS VoiceOver
|
||||
- **International Perspective**: Research and apply accessibility standards from different countries (EN 301 549, Section 508, ADA)
|
||||
- **Accessibility Statement Review**: Check website existing accessibility statement (if any) against your findings
|
||||
|
||||
## Deliverables
|
||||
|
||||
Submit professional accessibility audit report wey show your top-level analysis and practical plan:
|
||||
|
||||
**📄 Final Report Requirements:**
|
||||
|
||||
1. **Executive Summary** (1 page)
|
||||
- Website overview and accessibility level assessment
|
||||
- Key findings summary with business impact
|
||||
- Recommended priority actions
|
||||
|
||||
2. **Methodology and Scope** (1 page)
|
||||
- Testing approach, tools used, and evaluation criteria
|
||||
- Pages/sections evaluated and any limits
|
||||
- Standards compliance framework (WCAG 2.1 AA)
|
||||
|
||||
3. **Detailed Findings Report** (3-4 pages)
|
||||
- Manual testing notes with user examples
|
||||
- Automated tool results with cross-checking
|
||||
- Issues grouped by WCAG principles with proof
|
||||
- Positive accessibility features found
|
||||
|
||||
4. **Strategic Remediation Plan** (3-4 pages)
|
||||
- Prioritized improvement recommendations (minimum 10)
|
||||
- Implementation timeline with effort estimates
|
||||
- Success metrics and verification ways
|
||||
- Long term accessibility maintenance plan
|
||||
|
||||
5. **Supporting Evidence** (Appendices)
|
||||
- Screenshots of accessibility breaks and testing tools
|
||||
- Code examples showing issues and fixes
|
||||
- Tool reports and audit summaries
|
||||
- Screen reader testing notes or recordings
|
||||
|
||||
**📊 Format Requirements:**
|
||||
- **Document format**: PDF (professional look)
|
||||
- **Word count**: 2,500-3,500 words (no counting appendices or screenshots)
|
||||
- **Visual elements**: Add screenshots, diagrams, and examples everywhere
|
||||
- **Citations**: Show WCAG guidelines and accessibility resources properly
|
||||
|
||||
**💡 Pro Tips for Excellence:**
|
||||
- Use professional report formatting with consistent headings and style
|
||||
- Add table of contents for easy navigation
|
||||
- Balance technical correctness with clear, business-appropriate language
|
||||
- Show understanding of both technical work and user impact
|
||||
|
||||
## Learning Outcomes
|
||||
|
||||
After finishing dis comprehensive accessibility audit, you go gain important professional skills:
|
||||
|
||||
**🎯 Technical Competencies:**
|
||||
- **Accessibility Testing Mastery**: Pro skill with manual and automated testing methods wey industry uses
|
||||
- **WCAG Application**: Real experience applying Web Content Accessibility Guidelines for real situations
|
||||
- **Assistive Technology Understanding**: Hands-on with screen readers and keyboard navigation
|
||||
- **Problem-Solution Mapping**: Fit identify accessibility barriers and develop specific, actionable fix plans
|
||||
|
||||
**💼 Professional Skills:**
|
||||
- **Technical Communication**: Experience writing professional accessibility reports for different stakeholders
|
||||
- **Strategic Planning**: Fit prioritize accessibility improvements based on user impact and implementation ease
|
||||
- **Quality Assurance**: Understand accessibility testing as part of development lifecycle
|
||||
- **Risk Assessment**: Appreciation of legal, business, and ethical sides of accessibility compliance
|
||||
|
||||
**🌍 Inclusive Design Mindset:**
|
||||
- **User Empathy**: Deep understanding of different user needs and assistive technology interaction
|
||||
- **Universal Design Principles**: Know say accessible design benefits all users, no be only people wey get disabilities
|
||||
- **Continuous Improvement**: Framework for ongoing accessibility check and enhancement
|
||||
- **Advocacy Skills**: Confidence to promote accessibility best practice for future projects and team
|
||||
|
||||
**🚀 Career Preparation:**
|
||||
Dis assignment na like real-world accessibility consulting project, e go give you portfolio-worthy experience wey show:
|
||||
- Systematic problem-solving approach
|
||||
- Attention to both technical details and business impact
|
||||
- Clear communication of complex technical things
|
||||
- Understanding of legal and ethical responsibilities for web development
|
||||
|
||||
Once you finish am, you go ready to sabi contribute wella to accessibility work inside any web development role and champion inclusive design practice for your career.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make everything correct, abeg sabi say automated translations fit get error or wahala. Di original document for im own language na di correct one wey you suppose trust. If na important matter, e better make human expert translate am. We no go take responsibility if person no understand or if person use dis translation wrong.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,33 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "770d9f83dddc841c19f210dee5fe0712",
|
||||
"translation_date": "2026-01-08T11:39:49+00:00",
|
||||
"source_file": "1-getting-started-lessons/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# How to Start with Web Development
|
||||
|
||||
For dis section of di curriculum, we go introduce you to non project-based tins wey important to become professional developer.
|
||||
|
||||
### Topics
|
||||
|
||||
1. [Introduction to Programming Languages and Tools of the Trade](1-intro-to-programming-languages/README.md)
|
||||
2. [Introduction to GitHub](2-github-basics/README.md)
|
||||
3. [Basics of Accessibility](3-accessibility/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
Introduction to Programming Languages and Tools of the Trade na wetin [Jasmine Greenaway](https://twitter.com/paladique) write with ♥️
|
||||
|
||||
Introduction to GitHub na wetin [Floor Drees](https://twitter.com/floordrees) write with ♥️
|
||||
|
||||
Basics of Accessibility na wetin [Christopher Harrison](https://twitter.com/geektrainer) write with ♥️
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis documento don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translation fit get small mistake or wahala. Di original document wey dey im own language na im be di correct one to trust. For important mata, better make person wey sabi dey translate am humanly. We no go responsible if pesin no understand well or if mistake show for dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,103 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "6fd645e97c48cd5eb5a3d290815ec8b5",
|
||||
"translation_date": "2026-01-08T12:42:45+00:00",
|
||||
"source_file": "2-js-basics/1-data-types/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Data Types Practice: E-commerce Shopping Cart
|
||||
|
||||
## Instructions
|
||||
|
||||
Imagine say you dey build modern e-commerce shopping cart system. Dis assignment go help you understand how different JavaScript data types dey work together to create real-world applications.
|
||||
|
||||
### Your Task
|
||||
|
||||
Create complete analysis of how you go take use JavaScript data types inside shopping cart application. For each of di seven primitive data types and objects, you need to:
|
||||
|
||||
1. **Identify** di data type and wetin e dey do
|
||||
2. **Explain** why dis data type na di best choice for specific shopping cart features
|
||||
3. **Provide** realistic code examples wey show di data type for action
|
||||
4. **Describe** how dis data type dey interact wit oda parts of di shopping cart
|
||||
|
||||
### Required Data Types to Cover
|
||||
|
||||
**Primitive Data Types:**
|
||||
- **String**: Product names, descriptions, user information
|
||||
- **Number**: Prices, quantities, tax calculations
|
||||
- **Boolean**: Item availability, user preferences, cart status
|
||||
- **Null**: Intentionally empty values (like missing discount codes)
|
||||
- **Undefined**: Uninitialized values or missing data
|
||||
- **Symbol**: Unique identifiers (advanced use)
|
||||
- **BigInt**: Large financial calculations (advanced use)
|
||||
|
||||
**Reference Types:**
|
||||
- **Object**: Product details, user profiles, cart contents
|
||||
- **Array**: List of products, order history, categories
|
||||
|
||||
### Example Format for Each Data Type
|
||||
|
||||
For each data type, structure your response like dis:
|
||||
|
||||
```markdown
|
||||
## [Data Type Name]
|
||||
|
||||
**Purpose in Shopping Cart:** [Explain what this data type does]
|
||||
|
||||
**Why This Type:** [Explain why this is the best choice]
|
||||
|
||||
**Code Example:**
|
||||
```javascript
|
||||
// Your realistic code example here
|
||||
```
|
||||
|
||||
**Real-world Usage:** [Describe how this go work for practice]
|
||||
|
||||
**Interactions:** [Explain how dis data type dey work wit oda ones]
|
||||
```
|
||||
|
||||
### Bonus Challenges
|
||||
|
||||
1. **Type Coercion**: Show an example where JavaScript automatically converts between data types in your shopping cart (e.g., string "5" + number 10)
|
||||
|
||||
2. **Data Validation**: Demonstrate how you would check if user input is the correct data type before processing
|
||||
|
||||
3. **Performance Considerations**: Explain when you might choose one data type over another for performance reasons
|
||||
|
||||
### Submission Guidelines
|
||||
|
||||
- Create a markdown document with clear headings for each data type
|
||||
- Include working JavaScript code examples
|
||||
- Use realistic e-commerce scenarios in your examples
|
||||
- Explain your reasoning clearly for beginners to understand
|
||||
- Test your code examples to ensure they work correctly
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary (90-100%) | Proficient (80-89%) | Developing (70-79%) | Needs Improvement (Below 70%) |
|
||||
|----------|---------------------|---------------------|---------------------|------------------------------|
|
||||
| **Data Type Coverage** | All 7 primitive types and objects/arrays covered with detailed explanations | 6-7 data types covered with good explanations | 4-5 data types covered with basic explanations | Fewer than 4 data types or minimal explanations |
|
||||
| **Code Examples** | All examples are realistic, working, and well-commented | Most examples work and are relevant to e-commerce | Some examples work but may be generic | Code examples are incomplete or non-functional |
|
||||
| **Real-world Application** | Clearly connects each data type to practical shopping cart features | Good connection to e-commerce scenarios | Some connection to shopping cart context | Limited real-world application demonstrated |
|
||||
| **Technical Accuracy** | All technical information is correct and demonstrates deep understanding | Most technical information is accurate | Generally accurate with minor errors | Contains significant technical errors |
|
||||
| **Communication** | Explanations are clear, beginner-friendly, and well-organized | Good explanations that are mostly clear | Explanations are understandable but may lack clarity | Explanations are unclear or poorly organized |
|
||||
| **Bonus Elements** | Includes multiple bonus challenges with excellent execution | Includes one or more bonus challenges well done | Attempts bonus challenges with mixed success | No bonus challenges attempted |
|
||||
|
||||
### Learning Objectives
|
||||
|
||||
By completing this assignment, you will:
|
||||
- ✅ **Understand** the seven JavaScript primitive data types and their uses
|
||||
- ✅ **Apply** data types to real-world programming scenarios
|
||||
- ✅ **Analyze** when to choose specific data types for different purposes
|
||||
- ✅ **Create** working code examples that demonstrate data type usage
|
||||
- ✅ **Explain** technical concepts in beginner-friendly language
|
||||
- ✅ **Connect** fundamental programming concepts to practical applications
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate by AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make everything correct, abeg sabi say automated translation fit get some mistakes or wahala. The original document wey dem write for im correct language na im be the real correct one. If na serious matter, e good make person wey sabi human translator do am. We no go gree if any misunderstanding or wahala show because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "8328f58f4593b4671656ff8f4b2edbd9",
|
||||
"translation_date": "2026-01-08T12:28:48+00:00",
|
||||
"source_file": "2-js-basics/2-functions-methods/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Fun wit Functions
|
||||
|
||||
## Instructions
|
||||
|
||||
For dis assignment, you go practice to create different kain functions to hala the concepts wey you don learn about JavaScript functions, parameters, default values, and return statements.
|
||||
|
||||
Create one JavaScript file wey dem dey call `functions-practice.js` and implement the following functions:
|
||||
|
||||
### Part 1: Basic Functions
|
||||
1. **Create function wey dem go call `sayHello`** wey no go carry any parameters and e go just log "Hello!" for console.
|
||||
|
||||
2. **Create function wey dem go call `introduceYourself`** wey go carry one `name` parameter and e go log message like "Hi, my name na [name]" for console.
|
||||
|
||||
### Part 2: Functions with Default Parameters
|
||||
3. **Create function wey dem go call `greetPerson`** wey go carry two parameters: `name` (wey suppose dey) and `greeting` (optional, default na "Hello"). The function suppose log message like "[greeting], [name]!" for console.
|
||||
|
||||
### Part 3: Functions wey Dey Return Values
|
||||
4. **Create function wey dem go call `addNumbers`** wey go carry two parameters (`num1` and `num2`) and e go return their sum.
|
||||
|
||||
5. **Create function wey dem go call `createFullName`** wey go carry `firstName` and `lastName` parameters and e go return the full name as one single string.
|
||||
|
||||
### Part 4: Mix Am All Together
|
||||
6. **Create function wey dem go call `calculateTip`** wey go carry two parameters: `billAmount` (wey suppose dey) and `tipPercentage` (optional, default na 15). The function suppose calculate and return the tip amount.
|
||||
|
||||
### Part 5: Test Your Functions
|
||||
Add function calls to test each one of your functions and show the results using `console.log()`.
|
||||
|
||||
**Example test calls:**
|
||||
```javascript
|
||||
// Test your function dem here
|
||||
sayHello();
|
||||
introduceYourself("Sarah");
|
||||
greetPerson("Alex");
|
||||
greetPerson("Maria", "Hi");
|
||||
|
||||
const sum = addNumbers(5, 3);
|
||||
console.log(`The sum is: ${sum}`);
|
||||
|
||||
const fullName = createFullName("John", "Doe");
|
||||
console.log(`Full name: ${fullName}`);
|
||||
|
||||
const tip = calculateTip(50);
|
||||
console.log(`Tip for $50 bill: $${tip}`);
|
||||
```
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **Function Creation** | All 6 functions dem dey correctly implement with correct syntax and naming conventions | 4-5 functions dem dey correctly implement with small syntax issues | 3 or less functions implement or big syntax wahala |
|
||||
| **Parameters & Default Values** | Correctly use the parameters wey dem suppose use, optional parameters, and default values as dem talk | Parameters dey okay but e fit get problem with default values | Parameters no correct or missing |
|
||||
| **Return Values** | Functions wey suppose return values, dem dey return am correct, and functions wey no suppose return, dem just dey perform action | Majority return values dey okay but small issues dey | Big problem for return statements |
|
||||
| **Code Quality** | Clean, well-organized code with better variable names and proper indentation | Code work but fit better or better organize | Code hard to read or e poor |
|
||||
| **Testing** | All functions dem test well with correct calls and results show well | Majority functions dem test well | Testing no complete or e wrong |
|
||||
|
||||
## Bonus Challenges (Optional)
|
||||
|
||||
If you want take challenge yourself more:
|
||||
|
||||
1. **Create arrow function version** for one of your functions
|
||||
2. **Create one function wey dey carry another function as parameter** (like the `setTimeout` examples wey dey inside lesson)
|
||||
3. **Add input validation** to make sure your functions fit handle bad inputs well
|
||||
|
||||
---
|
||||
|
||||
> 💡 **Tip**: Make you remember to open your browser developer console (F12) to fit see the output of your `console.log()` statements!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg sabi say automated translations fit get some mistakes or wahala. Di original document for im own language na di correct source. If na serious tins, make person wey sabi do professional human translation do am. We no responsible if mistake or misunderstanding show because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,120 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "ffe366b2d1f037b99fbadbe1dc81083d",
|
||||
"translation_date": "2026-01-08T12:54:00+00:00",
|
||||
"source_file": "2-js-basics/3-making-decisions/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Making Decisions: Student Grade Processor
|
||||
|
||||
## Learning Objectives
|
||||
|
||||
For dis assignment, you go practice di decision-making tins wey dis lesson teach by building program wey go process student grades from different grading systems. You go use `if...else` statements, comparison operators, and logical operators to know which students dem pass their courses.
|
||||
|
||||
## The Challenge
|
||||
|
||||
You dey work for school wey recently merge wit another one. Now you need process student grades from two different grading systems, then find out which students dey pass. Dis na beta chance to practice conditional logic!
|
||||
|
||||
### Understanding the Grading Systems
|
||||
|
||||
#### First Grading System (Numeric)
|
||||
- Grades dey as numbers from 1-5
|
||||
- **Passing grade**: 3 and above (3, 4, or 5)
|
||||
- **Failing grade**: Below 3 (1 or 2)
|
||||
|
||||
#### Second Grading System (Letter Grades)
|
||||
- Grades dem use letters: `A`, `A-`, `B`, `B-`, `C`, `C-`
|
||||
- **Passing grades**: `A`, `A-`, `B`, `B-`, `C`, `C-` (all grades listed na passing)
|
||||
- **Note**: Dis system no get failing grades like `D` or `F`
|
||||
|
||||
### Your Task
|
||||
|
||||
Given di following array `allStudents` wey represent all students and their grades, build new array `studentsWhoPass` wey go hold all students wey pass according to their correct grading systems.
|
||||
|
||||
```javascript
|
||||
let allStudents = [
|
||||
'A', // Letta grade - e mean say you pass
|
||||
'B-', // Letta grade - e mean say you pass
|
||||
1, // Numɛrik grade - e mean say you fail
|
||||
4, // Numɛrik grade - e mean say you pass
|
||||
5, // Numɛrik grade - e mean say you pass
|
||||
2 // Numɛrik grade - e mean say you fail
|
||||
];
|
||||
|
||||
let studentsWhoPass = [];
|
||||
```
|
||||
|
||||
### Step-by-Step Approach
|
||||
|
||||
1. **Set up loop** to check every grade inside di `allStudents` array
|
||||
2. **Check grade type** (na number or string?)
|
||||
3. **Apply correct grading system rule**:
|
||||
- If na number: check if grade >= 3
|
||||
- If na string: check if e dey among valid passing letter grades
|
||||
4. **Add passing grades** enter `studentsWhoPass` array
|
||||
|
||||
### Helpful Code Techniques
|
||||
|
||||
Use dis JavaScript concepts from di lesson:
|
||||
|
||||
- **typeof operator**: `typeof grade === 'number'` to check if e be numeric grade
|
||||
- **Comparison operators**: `>=` to check numeric grades
|
||||
- **Logical operators**: `||` to check multiple letter grade conditions
|
||||
- **if...else statements**: to handle different grading systems
|
||||
- **Array methods**: `.push()` to add passing grades to your new array
|
||||
|
||||
### Expected Output
|
||||
|
||||
When you run your program, `studentsWhoPass` go get: `['A', 'B-', 4, 5]`
|
||||
|
||||
**Why dis grades pass:**
|
||||
- `'A'` and `'B-'` na valid letter grades (all letter grades for dis system na passing)
|
||||
- `4` and `5` na numeric grades wey pass >= 3
|
||||
- `1` and `2` fail because dem numeric grades less than 3
|
||||
|
||||
## Testing Your Solution
|
||||
|
||||
Test your code with different cases:
|
||||
|
||||
```javascript
|
||||
// Test wit diferent grade kombinéshon dem
|
||||
let testGrades1 = ['A-', 3, 'C', 1, 'B'];
|
||||
let testGrades2 = [5, 'A', 2, 'C-', 4];
|
||||
|
||||
// Yur solution fọ́ shud wok wit eni kombinéshon of valid grade dem
|
||||
```
|
||||
|
||||
## Bonus Challenges
|
||||
|
||||
After you finish di basic assignment, try dis extra ones:
|
||||
|
||||
1. **Add validation**: Check for invalid grades (like negative numbers or wrong letters)
|
||||
2. **Count statistics**: Count how many students pass and how many fail
|
||||
3. **Grade conversion**: Change all grades to one numeric system (A=5, B=4, C=3, etc.)
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|
||||
|----------|---------------|----------------|----------------|---------------|
|
||||
| **Functionality** | Program correctly finds all passing grades from both systems | Program work small problem or edge case dey | Program work small small but get logical wahala | Program get serious mistakes or e no run |
|
||||
| **Code Structure** | Clean, organized code with proper if...else logic | Good structure with correct conditional statements | Acceptable structure but get some organization problems | Bad structure, hard to follow logic |
|
||||
| **Use of Concepts** | Use well comparison operators, logical operators, and conditional statements | Good use of lesson concepts but slight gap dey | Some use of lesson concepts but miss key parts | Small use of lesson concepts |
|
||||
| **Problem Solving** | Show clear understanding of di problem and smart solution | Good problem-solving approach with steady logic | Enough problem-solving but some confusion dey | Unclear approach, no show understanding |
|
||||
|
||||
## Submission Guidelines
|
||||
|
||||
1. **Test your code** good well with di examples given
|
||||
2. **Add comments** wey explain your logic, especially for di conditional statements
|
||||
3. **Verify output** match wetin dem expect: `['A', 'B-', 4, 5]`
|
||||
4. **Think about edge cases** like empty arrays or data wey no expected
|
||||
|
||||
> 💡 **Pro Tip**: Start simple! Make di basic functionality work first, then add better features. Remember, di goal na to practice decision-making logic with di tools wey you learn for dis lesson.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, make you sabi say automated translation fit get errors or mistakes. Di original document wey dey im own language na di real correct source. If na important info, e better to use professional human translation. We no go take responsibility for any misunderstanding or wrong interpretation wey fit come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,750 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "1710a50a519a6e4a1b40a5638783018d",
|
||||
"translation_date": "2026-01-08T12:58:01+00:00",
|
||||
"source_file": "2-js-basics/4-arrays-loops/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# JavaScript Basics: Arrays and Loops
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Arrays & Loops Adventure
|
||||
section Array Fundamentals
|
||||
Creating Arrays: 5: You
|
||||
Accessing Elements: 4: You
|
||||
Array Methods: 5: You
|
||||
section Loop Mastery
|
||||
For Loops: 4: You
|
||||
While Loops: 5: You
|
||||
Modern Syntax: 4: You
|
||||
section Data Processing
|
||||
Array + Loops: 5: You
|
||||
Real-world Applications: 4: You
|
||||
Performance Optimization: 5: You
|
||||
```
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/13)
|
||||
|
||||
You don ever wonder how websites dey keep track of the things wey dey for shopping cart or show your friend list? Na di Arrays and loops dey do dis kain work. Arrays be like digital container wey fit hold namba of tins inside, and loops make you fit work with all dis tins quick quick without to dey write same code anyhow.
|
||||
|
||||
Together, these two concepts na di foundation for handling info inside your programs. You go learn how to comot for to dey write every step yourself reach to write smart code wey fit process hundreds or thousands of tins swift-quick.
|
||||
|
||||
By di end of dis lesson, you go sabi how to do complex data work with just small lines of code. Make we explore these important programming ideas.
|
||||
|
||||
[](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
|
||||
|
||||
[](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
|
||||
|
||||
> 🎥 Click di pictures wey dey up top for videos about arrays and loops.
|
||||
|
||||
> You fit take dis lesson for [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Data Processing))
|
||||
Arrays
|
||||
Structure
|
||||
Square brackets syntax
|
||||
Zero-based indexing
|
||||
Dynamic sizing
|
||||
Operations
|
||||
push/pop
|
||||
shift/unshift
|
||||
indexOf/includes
|
||||
Types
|
||||
Numbers array
|
||||
Strings array
|
||||
Mixed types
|
||||
Loops
|
||||
For Loops
|
||||
Counting iterations
|
||||
Array processing
|
||||
Predictable flow
|
||||
While Loops
|
||||
Condition-based
|
||||
Unknown iterations
|
||||
User input
|
||||
Modern Syntax
|
||||
for...of
|
||||
forEach
|
||||
Functional methods
|
||||
Applications
|
||||
Data Analysis
|
||||
Statistics
|
||||
Filtering
|
||||
Transformations
|
||||
User Interfaces
|
||||
Lists
|
||||
Menus
|
||||
Galleries
|
||||
```
|
||||
## Arrays
|
||||
|
||||
Make you reason arrays like digital filing cabinet - no be say only one paper for one drawer, but you fit put plenty related tins for one organized container. For programming, arrays dey help you store plenty info inside one organized box.
|
||||
|
||||
Whether you dey build photo gallery, manage to-do list, or dey keep track of high scores for game, arrays na di foundation for organizing data. Make we see how dem dey work.
|
||||
|
||||
✅ Arrays dey everywhere! Fit reason one real-life example of array, like solar panel array?
|
||||
|
||||
### Creating Arrays
|
||||
|
||||
To create array na easy work - just use square brackets!
|
||||
|
||||
```javascript
|
||||
// Empty array - like empty shopping cart wey dey wait for items
|
||||
const myArray = [];
|
||||
```
|
||||
|
||||
**Wetin dey happen here?**
|
||||
You don just create empty container using dem square brackets `[]`. E be like empty shelf for library - e ready to hold any book wey you want put.
|
||||
|
||||
You fit also fill your array with initial values from start:
|
||||
|
||||
```javascript
|
||||
// Di flavor dem wey your ice cream shop get
|
||||
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
|
||||
// User profile info wey get mix different kain data
|
||||
const userData = ["John", 25, true, "developer"];
|
||||
|
||||
// Test score dem for your best class
|
||||
const scores = [95, 87, 92, 78, 85];
|
||||
```
|
||||
|
||||
**Cool tins to notice:**
|
||||
- You fit store text, numbers, or even true/false inside same array
|
||||
- Just separate each tin with comma - e easy!
|
||||
- Arrays dey perfect to keep related tins together
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["📦 Arrays"] --> B["Create [ ]"]
|
||||
A --> C["Keep Plenty Tin Dem"]
|
||||
A --> D["Use Index Take Find Am"]
|
||||
|
||||
B --> B1["const arr = []"]
|
||||
B --> B2["const arr = [1,2,3]"]
|
||||
|
||||
C --> C1["Numbers"]
|
||||
C --> C2["Strings"]
|
||||
C --> C3["Booleans"]
|
||||
C --> C4["Mixed Types"]
|
||||
|
||||
D --> D1["arr[0] = first"]
|
||||
D --> D2["arr[1] = second"]
|
||||
D --> D3["arr[2] = third"]
|
||||
|
||||
E["📊 Array Index"] --> E1["Index 0: First"]
|
||||
E --> E2["Index 1: Second"]
|
||||
E --> E3["Index 2: Third"]
|
||||
E --> E4["Index n-1: Last"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
```
|
||||
### Array Indexing
|
||||
|
||||
One tins wey fit surprise you for beginning be say: arrays dey number their tins start from 0, no be 1. Dis zero-based indexing na because how computer memory dey work - e don be programming rule since computer languages like C start. Each position inside array get im own address number wey dem dey call **index**.
|
||||
|
||||
| Index | Value | Description |
|
||||
|-------|-------|-------------|
|
||||
| 0 | "Chocolate" | First element |
|
||||
| 1 | "Strawberry" | Second element |
|
||||
| 2 | "Vanilla" | Third element |
|
||||
| 3 | "Pistachio" | Fourth element |
|
||||
| 4 | "Rocky Road" | Fifth element |
|
||||
|
||||
✅ E surprise you say arrays start for zero index? For some programming languages, indexes start for 1. E get interesting history about dis, wey you fit [read on Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||
|
||||
**How to Access Array Elements:**
|
||||
|
||||
```javascript
|
||||
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
|
||||
// Access each item wit bracket notation
|
||||
console.log(iceCreamFlavors[0]); // "Chocolate" - first item
|
||||
console.log(iceCreamFlavors[2]); // "Vanilla" - third item
|
||||
console.log(iceCreamFlavors[4]); // "Rocky Road" - last item
|
||||
```
|
||||
|
||||
**Wetin dey happen here:**
|
||||
- **Use** square bracket notation plus index number to access elements
|
||||
- **Return** value wey dey for that position inside array
|
||||
- **Start** counting from 0, so first element get index 0
|
||||
|
||||
**How to Modify Array Elements:**
|
||||
|
||||
```javascript
|
||||
// Change one value wey don dey
|
||||
iceCreamFlavors[4] = "Butter Pecan";
|
||||
console.log(iceCreamFlavors[4]); // "Butter Pecan"
|
||||
|
||||
// Add new thing for the end
|
||||
iceCreamFlavors[5] = "Cookie Dough";
|
||||
console.log(iceCreamFlavors[5]); // "Cookie Dough"
|
||||
```
|
||||
|
||||
**For di example wey pass:**
|
||||
- **Change** di element wey get index 4 from "Rocky Road" to "Butter Pecan"
|
||||
- **Add** new element "Cookie Dough" at index 5
|
||||
- **Extend** array automatically when you add items pass current size
|
||||
|
||||
### Array Length and Common Methods
|
||||
|
||||
Arrays get built-in properties and methods wey make work with data easy.
|
||||
|
||||
**How to Find Array Length:**
|
||||
|
||||
```javascript
|
||||
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
console.log(iceCreamFlavors.length); // 5
|
||||
|
||||
// Length go update by itself as array dey change
|
||||
iceCreamFlavors.push("Mint Chip");
|
||||
console.log(iceCreamFlavors.length); // 6
|
||||
```
|
||||
|
||||
**Key points:**
|
||||
- **Return** total number of elements inside array
|
||||
- **Update** automatically when you add or remove elements
|
||||
- **Give** dynamic count wey fit help for loops and validation
|
||||
|
||||
**Important Array Methods:**
|
||||
|
||||
```javascript
|
||||
const fruits = ["apple", "banana", "orange"];
|
||||
|
||||
// Add elements
|
||||
fruits.push("grape"); // Adds to end: ["apple", "banana", "orange", "grape"]
|
||||
fruits.unshift("strawberry"); // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]
|
||||
|
||||
// Remove elements
|
||||
const lastFruit = fruits.pop(); // Removes and returns "grape"
|
||||
const firstFruit = fruits.shift(); // Removes and returns "strawberry"
|
||||
|
||||
// Find elements
|
||||
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
|
||||
const hasApple = fruits.includes("apple"); // Returns true
|
||||
```
|
||||
|
||||
**Wetin these methods dey do:**
|
||||
- **Add** elements with `push()` (for end) and `unshift()` (for beginning)
|
||||
- **Remove** elements with `pop()` (for end) and `shift()` (for beginning)
|
||||
- **Find** elements with `indexOf()` and check if dey with `includes()`
|
||||
- **Return** useful values like removed elements or position indexes
|
||||
|
||||
✅ Try am yourself! Use your browser console to create and manipulate array wey you create.
|
||||
|
||||
### 🧠 **Array Fundamentals Check: Organize Your Data**
|
||||
|
||||
**Test your understanding of array:**
|
||||
- Why you think say arrays dey start counting from 0, no be 1?
|
||||
- Wetin happen if you try to access index wey no dey (like `arr[100]` for array wey get 5 elements)?
|
||||
- Fit give three real-world examples where arrays go useful?
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> EmptyArray: const arr = []
|
||||
EmptyArray --> WithItems: Add elements
|
||||
WithItems --> Accessing: Use indexes
|
||||
Accessing --> Modifying: Change values
|
||||
Modifying --> Processing: Use methods
|
||||
|
||||
WithItems --> WithItems: push(), unshift()
|
||||
Processing --> Processing: pop(), shift()
|
||||
|
||||
note right of Accessing
|
||||
Zero-based indexing
|
||||
arr[0] = first element
|
||||
end note
|
||||
|
||||
note right of Processing
|
||||
Built-in methods
|
||||
Dynamic operations
|
||||
end note
|
||||
```
|
||||
> **Real-world insight**: Arrays everywhere for programming! Social media feeds, shopping carts, photo galleries, playlist songs - all na arrays for back ground!
|
||||
|
||||
## Loops
|
||||
|
||||
Think of the famous punishment from Charles Dickens' novels where students had to write lines repeatedly on a slate. Imagine if you fit just tell person say "write dis sentence 100 times" and e go do am automatically. Na dis loops dey do for your code.
|
||||
|
||||
Loops be like tireless assistant wey fit repeat work without make mistake. Whether you want check all items wey dey inside shopping cart or show all pictures for album, loops fit repeat well well.
|
||||
|
||||
JavaScript get plenty kinds of loops. Make we check each one and understand when to use am.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🔄 Kain Loops"] --> B["For Loop"]
|
||||
A --> C["While Loop"]
|
||||
A --> D["For...of Loop"]
|
||||
A --> E["forEach Method"]
|
||||
|
||||
B --> B1["Di amount dem sabi"]
|
||||
B --> B2["Based on counter"]
|
||||
B --> B3["for(init; condition; increment)"]
|
||||
|
||||
C --> C1["Di amount dem no sabi"]
|
||||
C --> C2["Based on condition"]
|
||||
C --> C3["while(condition)"]
|
||||
|
||||
D --> D1["Modern ES6+"]
|
||||
D --> D2["Array ting"]
|
||||
D --> D3["for(item of array)"]
|
||||
|
||||
E --> E1["Functional style"]
|
||||
E --> E2["Array method"]
|
||||
E --> E3["array.forEach(callback)"]
|
||||
|
||||
F["⏰ Wen to Use"] --> F1["For: Counting, indexes"]
|
||||
F --> F2["While: User input, searching"]
|
||||
F --> F3["For...of: Simple iteration"]
|
||||
F --> F4["forEach: Functional programming"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
```
|
||||
### For Loop
|
||||
|
||||
The `for` loop be like to set timer - you sabi exactly how many times you want make tins happen. E dey organized and predictable, so e perfect if you dey work with arrays or you want count tins.
|
||||
|
||||
**For Loop Structure:**
|
||||
|
||||
| Component | Purpose | Example |
|
||||
|-----------|---------|----------|
|
||||
| **Initialization** | Sets starting point | `let i = 0` |
|
||||
| **Condition** | When to continue | `i < 10` |
|
||||
| **Increment** | How to update | `i++` |
|
||||
|
||||
```javascript
|
||||
// Counting from 0 to 9
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(`Count: ${i}`);
|
||||
}
|
||||
|
||||
// More practical example: processing scores
|
||||
const testScores = [85, 92, 78, 96, 88];
|
||||
for (let i = 0; i < testScores.length; i++) {
|
||||
console.log(`Student ${i + 1}: ${testScores[i]}%`);
|
||||
}
|
||||
```
|
||||
|
||||
**Step by step, wetin dey happen:**
|
||||
- **Start** counter variable `i` to 0
|
||||
- **Check** `i < 10` before every loop
|
||||
- **Run** di code block if condition true
|
||||
- **Increment** `i` by 1 after each loop with `i++`
|
||||
- **Stop** when `i` reach 10 (condition no longer true)
|
||||
|
||||
✅ Run dis code for browser console. Wetin happen if you change counter, condition, or increment? Fit make am run backwards and make countdown?
|
||||
|
||||
### 🗓️ **For Loop Mastery Check: Controlled Repetition**
|
||||
|
||||
**Test your knowledge on for loop:**
|
||||
- Wetin be the three parts of for loop and wetin each one dey do?
|
||||
- How you go loop through array backwards?
|
||||
- Wetin happen if you forget increment part (`i++`)?
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🚀 Start For Loop"] --> B["Initialize: let i = 0"]
|
||||
B --> C{"Condition: i < array.length?"}
|
||||
C -->|true| D["Run di code block"]
|
||||
D --> E["Increment: i++"]
|
||||
E --> C
|
||||
C -->|false| F["✅ Comot for loop"]
|
||||
|
||||
G["📋 Common Patterns"] --> G1["for(let i=0; i<n; i++)"]
|
||||
G --> G2["for(let i=n-1; i>=0; i--)"]
|
||||
G --> G3["for(let i=0; i<arr.length; i+=2)"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style F fill:#e8f5e8
|
||||
style G fill:#fff3e0
|
||||
```
|
||||
> **Loop wisdom**: For loops dey perfect when you know how many times you go repeat tin. Na di most common choice for array processing!
|
||||
|
||||
### While Loop
|
||||
|
||||
The `while` loop mean say "keep doing dis until..." - you no too sure how many times e go run, but you sabi when to stop. E dey perfect for tins like to dey ask user for input until dem give you the correct answer, or search data until you find wetin you dey find.
|
||||
|
||||
**While Loop Characteristics:**
|
||||
- **Keep running** as long as condition true
|
||||
- **You must** manage counter yourself
|
||||
- **Check** condition before each iteration
|
||||
- **Fit cause** infinite loop if condition no ever become false
|
||||
|
||||
```javascript
|
||||
// Basic counting example
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(`While count: ${i}`);
|
||||
i++; // No forget to add one!
|
||||
}
|
||||
|
||||
// More practical example: processing user input
|
||||
let userInput = "";
|
||||
let attempts = 0;
|
||||
const maxAttempts = 3;
|
||||
|
||||
while (userInput !== "quit" && attempts < maxAttempts) {
|
||||
userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
|
||||
attempts++;
|
||||
}
|
||||
|
||||
if (attempts >= maxAttempts) {
|
||||
console.log("Maximum attempts reached!");
|
||||
}
|
||||
```
|
||||
|
||||
**Understanding examples:**
|
||||
- **Manage** `i` counter inside loop yourself
|
||||
- **Increment** counter make e no run forever
|
||||
- **Show** practical example with user input and try limit
|
||||
- **Include** safety checks to prevent infinite loops
|
||||
|
||||
### ♾️ **While Loop Wisdom Check: Condition-Based Repetition**
|
||||
|
||||
**Test your understanding:**
|
||||
- Wetin be main danger wey dey while loops?
|
||||
- When you go choose while loop instead of for loop?
|
||||
- How you fit stop infinite loops?
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["🔄 While vs For"] --> B["While Loop"]
|
||||
A --> C["For Loop"]
|
||||
|
||||
B --> B1["No sabi how many times e go run"]
|
||||
B --> B2["Condition dey control am"]
|
||||
B --> B3["User input, di search ting"]
|
||||
B --> B4["⚠️ Wahala: e fit run no stop"]
|
||||
|
||||
C --> C1["Sabi how many times e go run"]
|
||||
C --> C2["Counter dey control am"]
|
||||
C --> C3["Array processing"]
|
||||
C --> C4["✅ Safe: e sure say e go finish"]
|
||||
|
||||
D["🛡️ Safety Tips"] --> D1["Always change di condition variable"]
|
||||
D --> D2["Make sure get way to comot for am"]
|
||||
D --> D3["Set maximum times wey e fit run"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#fff3e0
|
||||
style C fill:#e8f5e8
|
||||
style D fill:#ffebee
|
||||
```
|
||||
> **Safety first**: While loops strong but you need careful to manage condition well. Always make sure your loop condition go eventually become false!
|
||||
|
||||
### Modern Loop Alternatives
|
||||
|
||||
JavaScript get modern loop syntax wey go make your code clear and reduce mistakes.
|
||||
|
||||
**For...of Loop (ES6+):**
|
||||
|
||||
```javascript
|
||||
const colors = ["red", "green", "blue", "yellow"];
|
||||
|
||||
// Modern way - cleaner and safer
|
||||
for (const color of colors) {
|
||||
console.log(`Color: ${color}`);
|
||||
}
|
||||
|
||||
// Compare wit traditional for loop
|
||||
for (let i = 0; i < colors.length; i++) {
|
||||
console.log(`Color: ${colors[i]}`);
|
||||
}
|
||||
```
|
||||
|
||||
**Advantages of for...of:**
|
||||
- **No need** to manage index or worry about off-by-one errors
|
||||
- **Directly** access each array element
|
||||
- **Make code** easier to read and less complex
|
||||
|
||||
**forEach Method:**
|
||||
|
||||
```javascript
|
||||
const prices = [9.99, 15.50, 22.75, 8.25];
|
||||
|
||||
// Dey use forEach for functional programming style
|
||||
prices.forEach((price, index) => {
|
||||
console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
|
||||
});
|
||||
|
||||
// forEach with arrow functions for simple operations
|
||||
prices.forEach(price => console.log(`Price: $${price}`));
|
||||
```
|
||||
|
||||
**What you need know about forEach:**
|
||||
- **Run** function for each array element
|
||||
- **Pass** element value and index as arguments
|
||||
- **No fit** break early (unlike normal loops)
|
||||
- **Return** undefined (no create new array)
|
||||
|
||||
✅ Why you go choose for loop vs. while loop? 17K people for StackOverflow ask this question, and some opinions [fit interest you](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
|
||||
### 🎨 **Modern Loop Syntax Check: Gettin Used to ES6+**
|
||||
|
||||
**Check your modern JavaScript knowledge:**
|
||||
- Wetin be advantages of `for...of` over traditional for loops?
|
||||
- When you fit still prefer traditional for loops?
|
||||
- Wetin be di difference between `forEach` and `map`?
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Loop Selection Guide
|
||||
x-axis Traditional --> Modern
|
||||
y-axis Simple --> Complex
|
||||
quadrant-1 Modern Complex
|
||||
quadrant-2 Traditional Complex
|
||||
quadrant-3 Traditional Simple
|
||||
quadrant-4 Modern Simple
|
||||
|
||||
Traditional For: [0.2, 0.7]
|
||||
While Loop: [0.3, 0.6]
|
||||
For...of: [0.8, 0.3]
|
||||
forEach: [0.9, 0.4]
|
||||
Array Methods: [0.8, 0.8]
|
||||
```
|
||||
> **Modern trend**: ES6+ syntax like `for...of` and `forEach` dey become preferred way for array iteration because e clean and less error-prone!
|
||||
|
||||
## Loops and Arrays
|
||||
|
||||
If you combine arrays and loops, you get powerful way to process data. This pairing important well well for plenty programming tasks, from showing lists to calculating statistics.
|
||||
|
||||
**Traditional Array Processing:**
|
||||
|
||||
```javascript
|
||||
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
|
||||
// Classic for loop way
|
||||
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
|
||||
}
|
||||
|
||||
// Modern for...of way
|
||||
for (const flavor of iceCreamFlavors) {
|
||||
console.log(`Available flavor: ${flavor}`);
|
||||
}
|
||||
```
|
||||
|
||||
**Understand this approach:**
|
||||
- **Use** array length to control loop limit
|
||||
- **Access** elements by index in normal for loops
|
||||
- **Get** element direct in for...of loops
|
||||
- **Process** each element exactly once
|
||||
|
||||
**Example for Data Processing:**
|
||||
|
||||
```javascript
|
||||
const studentGrades = [85, 92, 78, 96, 88, 73, 89];
|
||||
let total = 0;
|
||||
let highestGrade = studentGrades[0];
|
||||
let lowestGrade = studentGrades[0];
|
||||
|
||||
// Process all di grades wit one loop only
|
||||
for (let i = 0; i < studentGrades.length; i++) {
|
||||
const grade = studentGrades[i];
|
||||
total += grade;
|
||||
|
||||
if (grade > highestGrade) {
|
||||
highestGrade = grade;
|
||||
}
|
||||
|
||||
if (grade < lowestGrade) {
|
||||
lowestGrade = grade;
|
||||
}
|
||||
}
|
||||
|
||||
const average = total / studentGrades.length;
|
||||
console.log(`Average: ${average.toFixed(1)}`);
|
||||
console.log(`Highest: ${highestGrade}`);
|
||||
console.log(`Lowest: ${lowestGrade}`);
|
||||
```
|
||||
|
||||
**How this code dey work:**
|
||||
- **Start** variables to keep sum and extreme values
|
||||
- **Loop** through each grade once efficiently
|
||||
- **Add up** total for average calculation
|
||||
- **Keep track** of highest and lowest grade while looping
|
||||
- **Calculate** final stats after loop finish
|
||||
|
||||
✅ Try to loop your own created array for browser console.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["📦 Array Data"] --> B["🔄 Loop Processing"]
|
||||
B --> C["📈 Results"]
|
||||
|
||||
A1["[85, 92, 78, 96, 88]"] --> A
|
||||
|
||||
B --> B1["Calculate total"]
|
||||
B --> B2["Find min/max"]
|
||||
B --> B3["Count conditions"]
|
||||
B --> B4["Transform data"]
|
||||
|
||||
C --> C1["Average: 87.8"]
|
||||
C --> C2["Highest: 96"]
|
||||
C --> C3["Passing: 5/5"]
|
||||
C --> C4["Letter grades"]
|
||||
|
||||
D["⚡ Processing Patterns"] --> D1["Accumulation (sum)"]
|
||||
D --> D2["Comparison (min/max)"]
|
||||
D --> D3["Filtering (conditions)"]
|
||||
D --> D4["Mapping (transformation)"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#fff3e0
|
||||
style C fill:#e8f5e8
|
||||
style D fill:#f3e5f5
|
||||
```
|
||||
---
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use Agent mode make you complete this challenge:
|
||||
|
||||
**Description:** Build one correct function wey combine arrays and loops to analyze dataset and generate good insights.
|
||||
|
||||
**Prompt:** Create function wey dey call `analyzeGrades` wey takes array of student grade objects (each get name and score properties) and returns object with stats like highest score, lowest score, average score, count of students wey pass (score >= 70), and array of student names wey score pass average. Use at least two different loop types for your solution.
|
||||
|
||||
Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Challenge
|
||||
JavaScript get plenti modern array methods we fit take replace old-style loops for some kain tasks. Make you check [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce).
|
||||
|
||||
**Your challenge:** Change the student grades example make e use at least three different array methods. You go see how the code go clean well and easy to read as you use modern JavaScript syntax.
|
||||
|
||||
## Post-Lecture Quiz
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/14)
|
||||
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Arrays for JavaScript get plenty methods wey dey attached to dem, wey sharp wella for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of dem out (like push, pop, slice and splice) on an array wey you create yourself.
|
||||
|
||||
## Assignment
|
||||
|
||||
[Loop an Array](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
## 📊 **Your Arrays & Loops Toolkit Summary**
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A["🎯 Arrays & Loops Mastary"] --> B["📦 Array Fundamentals"]
|
||||
A --> C["🔄 Loop Kra"]
|
||||
A --> D["🔗 Data Wok"]
|
||||
A --> E["🎨 New Technik Dem"]
|
||||
|
||||
B --> B1["Creation: [ ]"]
|
||||
B --> B2["Indexing: arr[0]"]
|
||||
B --> B3["Method Dem: push, pop"]
|
||||
B --> B4["Property Dem: length"]
|
||||
|
||||
C --> C1["For: We Know How Many"]
|
||||
C --> C2["While: Based on Condition"]
|
||||
C --> C3["For...of: Direct Access"]
|
||||
C --> C4["forEach: Functional"]
|
||||
|
||||
D --> D1["Statistics Calculation"]
|
||||
D --> D2["Data Change Work"]
|
||||
D --> D3["Filtering & Searching"]
|
||||
D --> D4["Real-time Processing"]
|
||||
|
||||
E --> E1["Arrow Function Dem"]
|
||||
E --> E2["Method Chaining"]
|
||||
E --> E3["Destructuring"]
|
||||
E --> E4["Template Literals"]
|
||||
|
||||
F["💡 Key Benefit Dem"] --> F1["Better Data Handling"]
|
||||
F --> F2["Less Code Repeat"]
|
||||
F --> F3["Solution Dem Wey Fit Grow"]
|
||||
F --> F4["Clean Syntax"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
```
|
||||
---
|
||||
|
||||
## 🚀 Your Arrays & Loops Mastery Timeline
|
||||
|
||||
### ⚡ **What You Can Do in the Next 5 Minutes**
|
||||
- [ ] Create array of your favorite movies and check specific elements
|
||||
- [ ] Write for loop wey go count from 1 reach 10
|
||||
- [ ] Try the modern array methods challenge from the lesson
|
||||
- [ ] Practice array indexing for your browser console
|
||||
|
||||
### 🎯 **What You Can Accomplish This Hour**
|
||||
- [ ] Finish the post-lesson quiz and review any tricky palava
|
||||
- [ ] Build the full grade analyzer from the GitHub Copilot challenge
|
||||
- [ ] Make simple shopping cart wey go add and remove items
|
||||
- [ ] Practice changing between different loop types
|
||||
- [ ] Experiment with array methods like `push`, `pop`, `slice`, and `splice`
|
||||
|
||||
### 📅 **Your Week-Long Data Processing Journey**
|
||||
- [ ] Finish the "Loop an Array" assignment with creative upgrades
|
||||
- [ ] Build to-do list app wey use arrays and loops
|
||||
- [ ] Make simple statistics calculator for number data
|
||||
- [ ] Practice with [MDN array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
|
||||
- [ ] Build photo gallery or music playlist interface
|
||||
- [ ] Explore functional programming with `map`, `filter`, and `reduce`
|
||||
|
||||
### 🌟 **Your Month-Long Transformation**
|
||||
- [ ] Master advanced array operations and make dem fast
|
||||
- [ ] Build full data visualization dashboard
|
||||
- [ ] Join open source projects wey get data processing
|
||||
- [ ] Teach somebody about arrays and loops with real examples
|
||||
- [ ] Build personal library of reusable data processing functions
|
||||
- [ ] Explore algorithms and data structures wey dey based on arrays
|
||||
|
||||
### 🏆 **Final Data Processing Champion Check-in**
|
||||
|
||||
**Celebrate your array and loop mastery:**
|
||||
- Wetin be the most useful array operation wey you don learn for real-world work?
|
||||
- Which kind loop you feel most natural for you and why?
|
||||
- How understanding arrays and loops don change how you dey arrange data?
|
||||
- Which complex data processing work you go like try next?
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Data Processing Evolution
|
||||
section Today
|
||||
Array Confusion: 3: You
|
||||
Loop Basics: 4: You
|
||||
Index Understanding: 5: You
|
||||
section This Week
|
||||
Method Mastery: 4: You
|
||||
Efficient Processing: 5: You
|
||||
Modern Syntax: 5: You
|
||||
section Next Month
|
||||
Complex Algorithms: 5: You
|
||||
Performance Optimization: 5: You
|
||||
Teaching Others: 5: You
|
||||
```
|
||||
> 📦 **You don unlock the power to organise and process data!** Arrays and loops be the foundation for nearly every app wey you go build. From simple lists to complex data analysis, you get the tools to handle information sharp-sharp and well. Every dynamic website, mobile app, and data-driven application dey depend on these basic concepts. Welcome to the world of big-big data processing! 🎉
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we try make am correct, abeg sabi say machine translation fit get mistake or no too correct. The original document wey dey the main language na the correct one. If na serious matter, e good make human translator translate am. We no go carry any blame if person no understand or if e misinterpret anything wey come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,124 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "8abcada0534e0fb3a7556ea3c5a2a8a4",
|
||||
"translation_date": "2026-01-08T13:08:57+00:00",
|
||||
"source_file": "2-js-basics/4-arrays-loops/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Arrays and Loops Assignment
|
||||
|
||||
## Instructions
|
||||
|
||||
Complete di following exercises to practice working wit arrays and loops. Each exercise build on concepts from di lesson and encourage you to apply different loop types and array methods.
|
||||
|
||||
### Exercise 1: Number Pattern Generator
|
||||
Create one program wey go list every 3rd number between 1-20 and print am to di console.
|
||||
|
||||
**Requirements:**
|
||||
- Use one `for` loop wit custom increment
|
||||
- Display numbers for user-friendly format
|
||||
- Add descriptive comments wey go explain your logic
|
||||
|
||||
**Expected Output:**
|
||||
```
|
||||
3, 6, 9, 12, 15, 18
|
||||
```
|
||||
|
||||
> **Tip:** Modify di iteration-expression for your for loop make e skip numbers.
|
||||
|
||||
### Exercise 2: Array Analysis
|
||||
Create one array of at least 8 different numbers and write functions to analyze di data.
|
||||
|
||||
**Requirements:**
|
||||
- Create one array wey dem go call `numbers` with at least 8 values
|
||||
- Write one function `findMaximum()` wey go return di highest number
|
||||
- Write one function `findMinimum()` wey go return di lowest number
|
||||
- Write one function `calculateSum()` wey go return di total of all numbers
|
||||
- Test each function and show di results
|
||||
|
||||
**Bonus Challenge:** Create one function wey go find di second highest number inside di array.
|
||||
|
||||
### Exercise 3: String Array Processing
|
||||
Create one array of your favorite movies/books/songs and practice different loop types.
|
||||
|
||||
**Requirements:**
|
||||
- Create one array wit at least 5 string values
|
||||
- Use traditional `for` loop to show items with numbers (1. Item Name)
|
||||
- Use `for...of` loop to show items for uppercase
|
||||
- Use `forEach()` method to count and show di total characters
|
||||
|
||||
**Example Output:**
|
||||
```
|
||||
Traditional for loop:
|
||||
1. The Matrix
|
||||
2. Inception
|
||||
3. Interstellar
|
||||
|
||||
For...of loop (uppercase):
|
||||
THE MATRIX
|
||||
INCEPTION
|
||||
INTERSTELLAR
|
||||
|
||||
Character count:
|
||||
Total characters across all titles: 42
|
||||
```
|
||||
|
||||
### Exercise 4: Data Filtering (Advanced)
|
||||
Create one program wey go process array of objects wey represent students.
|
||||
|
||||
**Requirements:**
|
||||
- Create one array of at least 5 student objects with properties: `name`, `age`, `grade`
|
||||
- Use loops to find students wey be 18 or older
|
||||
- Calculate di average grade of all students
|
||||
- Create new array wey go contain only students wey get grades above 85
|
||||
|
||||
**Example Structure:**
|
||||
```javascript
|
||||
const students = [
|
||||
{ name: "Alice", age: 17, grade: 92 },
|
||||
{ name: "Bob", age: 18, grade: 84 },
|
||||
// Add more pikin dem...
|
||||
];
|
||||
```
|
||||
|
||||
## Testing Your Code
|
||||
|
||||
Test your programs by:
|
||||
1. Running each exercise inside your browser console
|
||||
2. Check outputs make sure dem match di expected results
|
||||
3. Test wit different data sets
|
||||
4. Check say your code fit handle edge cases (empty arrays, single elements)
|
||||
|
||||
## Submission Guidelines
|
||||
|
||||
Include di following inside your submission:
|
||||
- Well-commented JavaScript code for each exercise
|
||||
- Screenshots or text output wey show your programs dey run
|
||||
- Small explanation of which loop type you choose for each task and why
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary (3 points) | Adequate (2 points) | Needs Improvement (1 point) |
|
||||
| -------- | -------------------- | ------------------- | --------------------------- |
|
||||
| **Functionality** | All exercises complete correctly wit bonus challenges | All required exercises dey work correctly | Some exercises no complete or get errors |
|
||||
| **Code Quality** | Clean, well-organized code wit descriptive variable names | Code dey work but fit be cleaner | Code messy or e hard to understand |
|
||||
| **Comments** | Comprehensive comments wey explain logic and decisions | Basic comments dey present | Small or no comments |
|
||||
| **Loop Usage** | Shows understanding of different loop types well | Use loops correctly but no variety | Wrong or inefficient loop usage |
|
||||
| **Testing** | Proof of thorough testing wit plenty scenarios | Basic testing dey done | No much evidence of testing |
|
||||
|
||||
## Reflection Questions
|
||||
|
||||
After you finish di exercises, think about:
|
||||
1. Which type of loop you enjoy use pass and why?
|
||||
2. Wetin challenge you when you dey work wit arrays?
|
||||
3. How these skills fit help you for real-world web development projects?
|
||||
4. Wetin you for do different if you gots to optimize your code for better performance?
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg make you sabi say automated translation fit get some errors or wahala. Di original document wey dem write for im own language na im be correct source. If na important info, better make professional human translation do am. We no go take responsibility if mistake or misunderstanding happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cc9e70a2f096c67389c8acff1521fc27",
|
||||
"translation_date": "2026-01-08T10:44:35+00:00",
|
||||
"source_file": "2-js-basics/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Introduction to JavaScript
|
||||
|
||||
JavaScript na di language wey web dey use. For dis four lessons, you go learn im basics.
|
||||
|
||||
### Topics
|
||||
|
||||
1. [Variables and Data Types](1-data-types/README.md)
|
||||
2. [Functions and Methods](2-functions-methods/README.md)
|
||||
3. [Making Decisions with JavaScript](3-making-decisions/README.md)
|
||||
4. [Arrays and Loops](4-arrays-loops/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
Dem write dis lessons with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg no forget say sometimes automated translation fit get mistake or no too correct. The original document wey dem write for im own language na im get correct info pass. If na important info, e better make professional human translator do am. We no go take any kasala or wahala wey fit come from how dis translation dem use.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,135 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bee6762d4092a13fc7c338814963f980",
|
||||
"translation_date": "2026-01-08T19:27:07+00:00",
|
||||
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# CSS Refactoring Assignment
|
||||
|
||||
## Objective
|
||||
|
||||
Transform your terrarium project to use modern CSS layout techniques! Refactor the current absolute positioning approach to implement **Flexbox** or **CSS Grid** for a more maintainable, responsive design. Dis assignment dey challenge you to apply modern CSS standards while you still dey keep the fine look wey your terrarium get.
|
||||
|
||||
Knowing wen and how to use different layout methods na important skill for modern web development. Dis exercise go join old style positioning techniques with current CSS layout systems.
|
||||
|
||||
## Assignment Instructions
|
||||
|
||||
### Phase 1: Analysis and Planning
|
||||
1. **Review your current terrarium code** - Find out which elements dey use absolute positioning now
|
||||
2. **Choose your layout method** - Decide if Flexbox or CSS Grid go better for your design goals
|
||||
3. **Sketch your new layout structure** - Plan how containers and plant elements go arrange
|
||||
|
||||
### Phase 2: Implementation
|
||||
1. **Create a new version** of your terrarium project for another folder
|
||||
2. **Update the HTML structure** as e suppose be to fit your chosen layout method
|
||||
3. **Refactor the CSS** make e use Flexbox or CSS Grid instead of absolute positioning
|
||||
4. **Maintain visual consistency** - Make sure your plants and terrarium jar still dey the same places
|
||||
5. **Implement responsive behavior** - Your layout go fit change well well for different screen sizes
|
||||
|
||||
### Phase 3: Testing and Documentation
|
||||
1. **Cross-browser testing** - Check say your design dey work well for Chrome, Firefox, Edge, and Safari
|
||||
2. **Responsive testing** - Look your layout for mobile, tablet, and desktop screen sizes
|
||||
3. **Documentation** - Add comments for your CSS wey talk about your layout choices
|
||||
4. **Screenshots** - Take picture of your terrarium for different browsers and screen sizes
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### Layout Implementation
|
||||
- **Choose ONE**: Make you use either Flexbox OR CSS Grid (no mix for same elements)
|
||||
- **Responsive Design**: Use relative units (`rem`, `em`, `%`, `vw`, `vh`) no be fixed pixels
|
||||
- **Accessibility**: Keep correct semantic HTML structure and alt text
|
||||
- **Code Quality**: Use consistent naming style and arrange CSS well well
|
||||
|
||||
### Modern CSS Features to Include
|
||||
```css
|
||||
/* Example Flexbox approach */
|
||||
.terrarium-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.plant-containers {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
/* Example Grid approach */
|
||||
.terrarium-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 100vh;
|
||||
gap: 1rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Browser Support Requirements
|
||||
- **Chrome/Edge**: Latest 2 versions
|
||||
- **Firefox**: Latest 2 versions
|
||||
- **Safari**: Latest 2 versions
|
||||
- **Mobile browsers**: iOS Safari, Chrome Mobile
|
||||
|
||||
## Deliverables
|
||||
|
||||
1. **Updated HTML file** wey get better semantic structure
|
||||
2. **Refactored CSS file** wey use modern layout techniques
|
||||
3. **Screenshot collection** wey show cross-browser compatibility:
|
||||
- Desktop view (1920x1080)
|
||||
- Tablet view (768x1024)
|
||||
- Mobile view (375x667)
|
||||
- At least 2 different browsers
|
||||
4. **README.md file** wey show:
|
||||
- Wetin you choose (Flexbox or Grid) and why you choose am
|
||||
- Wahala wey you face during refactoring
|
||||
- Browser compatibility notes
|
||||
- How to run your code
|
||||
|
||||
## Assessment Rubric
|
||||
|
||||
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|
||||
|----------|---------------|----------------|---------------|---------------|
|
||||
| **Layout Implementation** | Correct Flexbox/Grid use with advanced features; full responsivity | Good implementation with good responsive behavior | Basic implementation with small responsive wahala | Incomplete or wrong layout implementation |
|
||||
| **Code Quality** | Clean, well-organized CSS with correct comments and consistent naming | Good organization plus some comments | Okay organization with few comments | Bad organization; hard to sabi |
|
||||
| **Cross-Browser Compatibility** | Perfect for all browsers wey dem need plus screenshots | Good compatibility with small differences mentioned | Some compatibility wahala wey no spoil function | Big compatibility wahala or no testing |
|
||||
| **Responsive Design** | Strong mobile-first with smooth breakpoints | Good responsive behavior with correct breakpoints | Basic responsive features with small problems | Limited or broken responsive behavior |
|
||||
| **Documentation** | Detailed README with full explanations and insights | Good documentation covering everything | Basic documentation with small explanation | No or incomplete documentation |
|
||||
|
||||
## Helpful Resources
|
||||
|
||||
### Layout Method Guides
|
||||
- 📖 [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
|
||||
- 📖 [A Complete Guide to CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
||||
- 📖 [Flexbox vs Grid - Choose the Right Tool](https://blog.webdevsimplified.com/2022-11/flexbox-vs-grid/)
|
||||
|
||||
### Browser Testing Tools
|
||||
- 🛠️ [Browser DevTools Responsive Mode](https://developer.chrome.com/docs/devtools/device-mode/)
|
||||
- 🛠️ [Can I Use - Feature Support](https://caniuse.com/)
|
||||
- 🛠️ [BrowserStack - Cross-browser Testing](https://www.browserstack.com/)
|
||||
|
||||
### Code Quality Tools
|
||||
- ✅ [CSS Validator](https://jigsaw.w3.org/css-validator/)
|
||||
- ✅ [HTML Validator](https://validator.w3.org/)
|
||||
- ✅ [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
|
||||
|
||||
## Bonus Challenges
|
||||
|
||||
🌟 **Advanced Layouts**: Use both Flexbox AND Grid for different parts of your design
|
||||
🌟 **Animation Integration**: Add CSS transitions or animations to work with your new layout
|
||||
🌟 **Dark Mode**: Use CSS custom property theme switcher
|
||||
🌟 **Container Queries**: Use new container query techniques for responsiveness at component level
|
||||
|
||||
> 💡 **Remember**: The goal no be just to make e work, but to sabi WHY your chosen layout method na the best solution for dis design challenge!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**: Dis document na translate wey AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) help do. Even though we try make am correct, e good make you sabi say automated translation fit get errors or mistake. Original document wey dey im correct language na the main one wey you suppose trust. If na serious matter, better make person wey sabi do professional translation check am. We no go responsible for any kondo or wrong understanding wey fit happen because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "947ca5ce7c94aee9c7de7034e762bc17",
|
||||
"translation_date": "2026-01-08T19:04:56+00:00",
|
||||
"source_file": "3-terrarium/3-intro-to-DOM-and-closures/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# DOM Element Investigation Assignment
|
||||
|
||||
## Overview
|
||||
|
||||
Now wey you don experience the power of DOM manipulation for yourself, na time to explore the bigger world of DOM interfaces. Dis assignment go deepen your understanding of how different web technologies dey interact with the DOM beyond just dragging elements.
|
||||
|
||||
## Learning Objectives
|
||||
|
||||
By completing dis assignment, you go:
|
||||
- **Research** and sabi one specific DOM interface well-well
|
||||
- **Analyze** how people dey use DOM manipulation for real life
|
||||
- **Connect** theory concepts to practical tins wey fit work
|
||||
- **Develop** skills for technical documentation and analysis
|
||||
|
||||
## Instructions
|
||||
|
||||
### Step 1: Choose Your DOM Interface
|
||||
|
||||
Go check MDN full [list of DOM interfaces](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) and choose one interface wey you like. Try choose from these categories make e get variety:
|
||||
|
||||
**Beginner-Friendly Options:**
|
||||
- `Element.classList` - How to manage CSS classes small-small
|
||||
- `Document.querySelector()` - Advanced way to select elements
|
||||
- `Element.addEventListener()` - How to manage events pass pointer events
|
||||
- `Window.localStorage` - Where you fit store data for client side
|
||||
|
||||
**Intermediate Challenges:**
|
||||
- `Intersection Observer API` - How to detect if element dey visible
|
||||
- `MutationObserver` - How to watch DOM changes
|
||||
- `Drag and Drop API` - Another way to do pointer based dragging
|
||||
- `Geolocation API` - How to get user location
|
||||
|
||||
**Advanced Exploration:**
|
||||
- `Web Components` - Custom elements plus shadow DOM
|
||||
- `Canvas API` - How to do graphics programmatic
|
||||
- `Web Workers` - Work for background without disturbing UI
|
||||
- `Service Workers` - How to make offline functions
|
||||
|
||||
### Step 2: Research and Document
|
||||
|
||||
Make one deep analysis (300-500 words) wey include:
|
||||
|
||||
#### Technical Overview
|
||||
- **Define** wetin your chosen interface dey do for a simple, beginner-friendly way
|
||||
- **Explain** the main methods, properties, or events wey e get
|
||||
- **Describe** the kind problems wey e dey solve
|
||||
|
||||
#### Real-World Implementation
|
||||
- **Find** website wey use your chosen interface (fit inspect the code or research examples)
|
||||
- **Document** how dem take implement am with code samples if you fit
|
||||
- **Analyze** why the developers choose that style
|
||||
- **Explain** how e make user experience beta
|
||||
|
||||
#### Practical Application
|
||||
- **Compare** your interface with the techniques we use last time for the terrarium project
|
||||
- **Suggest** how your interface fit improve or add beta tins for terrarium
|
||||
- **Identify** other projects wey dis interface go make sense
|
||||
|
||||
### Step 3: Code Example
|
||||
|
||||
Put one simple, working code wey go show your interface in action. E suppose be:
|
||||
- **Functional** - The code go really work if you test am
|
||||
- **Commented** - Make e explain wetin each part dey do
|
||||
- **Relevant** - Make e connect to real-life use case
|
||||
- **Beginner-friendly** - People wey dey learn web dev go fit understand am
|
||||
|
||||
## Submission Format
|
||||
|
||||
Structure your write-up with clear headings:
|
||||
|
||||
```markdown
|
||||
# [Interface Name] DOM Investigation
|
||||
|
||||
## What It Does
|
||||
[Technical overview]
|
||||
|
||||
## Real-World Example
|
||||
[Website analysis and implementation details]
|
||||
|
||||
## Code Demonstration
|
||||
[Your working example with comments]
|
||||
|
||||
## Reflection
|
||||
[How this connects to our terrarium project and future applications]
|
||||
```
|
||||
|
||||
## Assessment Rubric
|
||||
|
||||
| Criteria | Exemplary (A) | Proficient (B) | Developing (C) | Needs Improvement (D) |
|
||||
|----------|---------------|----------------|----------------|----------------------|
|
||||
| **Technical Understanding** | Show deep understanding with correct explanations and proper terms | Show solid understanding with mostly correct explanations | Basic understanding but get small mistakes | No good understanding plus plenty errors |
|
||||
| **Real-World Analysis** | Identify and analyze real implementation well well with examples | Find real example with okay analysis | Find example but analysis no too deep | Vague or wrong real-world connection |
|
||||
| **Code Example** | Code wey work plus good comments to show how interface work | Working code with enough comments | Code dey work but need better explanation | Code get errors or explanation no clear |
|
||||
| **Writing Quality** | Clear, interesting writing with proper structure and technical talk | Well organized with good technical writing | Adequate organization and clarity | No good organization or unclear writing |
|
||||
| **Critical Thinking** | Make clever connections between ideas and suggest new ways to use interface | Show good thinking plus relevant connections | Small analysis but fit still do more | No much sign of thinking critically |
|
||||
|
||||
## Tips for Success
|
||||
|
||||
**Research Strategies:**
|
||||
- **Start** with MDN docs to get correct information
|
||||
- **Look** for code examples on GitHub or CodePen
|
||||
- **Check** popular websites using browser dev tools
|
||||
- **Watch** tutorial videos to see explanations visually
|
||||
|
||||
**Writing Guidelines:**
|
||||
- **Use** your own words, no copy-paste from docs
|
||||
- **Include** examples and code snippets wey fit explain well
|
||||
- **Explain** technical things like you dey teach friend
|
||||
- **Connect** your interface to general web dev concepts
|
||||
|
||||
**Code Example Ideas:**
|
||||
- **Create** small demo wey show main features of your interface
|
||||
- **Build** on ideas from our terrarium project if e fit
|
||||
- **Focus** on how e work pass how e look
|
||||
- **Test** your code to make sure e work well
|
||||
|
||||
## Submission Deadline
|
||||
|
||||
[Insert deadline here]
|
||||
|
||||
## Questions?
|
||||
|
||||
If you no understand any part of this assignment, no fear to ask! Dis investigation go deepen your knowledge of how DOM dey power the interactive web we dey use everyday.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document dem don use AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Even though we try make am correct, abeg know say automated translation fit get some mistake or no too correct. The original document wey e write for im own language na im be the correct source. If na serious matter, e better make person wey sabi do professional human translation check am. We no go responsible if person no understand well or if dem misunderstand because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bc5c5550f79d10add90ce419ee34abb3",
|
||||
"translation_date": "2026-01-08T11:36:15+00:00",
|
||||
"source_file": "3-terrarium/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
## Deploy your Terrarium
|
||||
|
||||
You fit deploy, or publish your Terrarium for the web using **Azure Static Web Apps**.
|
||||
|
||||
1. Fork dis repo
|
||||
|
||||
2. Press dis button 👇
|
||||
|
||||
[](https://portal.azure.com/#create/Microsoft.StaticApp)
|
||||
|
||||
3. Follow the setup wizard to create your app.
|
||||
- Set the **App root** to either `/solution` or the root of your codebase.
|
||||
- Their no API for this app, so you fit skip the API configuration.
|
||||
- A `.github` folder go automatically create to help Azure Static Web Apps build and publish your app.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we dey try make am correct, abeg sabi say automated translation fit get some errors or wahala. Di original document wey e original language na di main correct one. For important tori, make person wey sabi human translator do am. We no go take blame if person no understand or if e use dis translation do wrong meaning.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "6329fbe8bd936068debd78cca6f09c0a",
|
||||
"translation_date": "2026-01-08T19:09:12+00:00",
|
||||
"source_file": "3-terrarium/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
|
||||
|
||||
Na small drag and drop code-meditation. Wit small HTML, JS and CSS, you fit build web interface, style am, and add interaction.
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
E write wit ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||
|
||||
Di terrarium wey CSS build na Jakub Mandra glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) inspire am.
|
||||
|
||||
Di artwork na wetin [Jen Looper](http://jenlooper.com) draw by hand wit Procreate.
|
||||
|
||||
## Deploy your Terrarium
|
||||
|
||||
You fit deploy, or publish your terrarium for web wit Azure Static Web Apps.
|
||||
|
||||
1. Fork dis repo
|
||||
|
||||
2. Press dis button
|
||||
|
||||
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
|
||||
|
||||
3. Follow di wizard create your app. Make sure say you set di app root to either be `/solution` or root of your codebase. Di app no get API, so no worry about to add am. .github folder go create for your forked repo wey go help Azure Static Web Apps build service build and publish your app to new URL.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say machine translation fit get mistakes or no too correct well well. Di original document wey dey im own language na di real correct source. For important info, e better make human professional translate am. We no go responsible if person misunderstand or mistake any from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,290 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "efa2ab875b8bb5a7883816506da6b6d2",
|
||||
"translation_date": "2026-01-08T11:31:16+00:00",
|
||||
"source_file": "4-typing-game/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Event-Driven Programming - Build a Typing Game
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Typing Game Development Journey
|
||||
section Foundation
|
||||
Plan game structure: 3: Student
|
||||
Design user interface: 4: Student
|
||||
Setup HTML elements: 4: Student
|
||||
section Functionality
|
||||
Handle user input: 4: Student
|
||||
Track timing: 5: Student
|
||||
Calculate accuracy: 5: Student
|
||||
section Features
|
||||
Add visual feedback: 5: Student
|
||||
Implement game logic: 5: Student
|
||||
Polish experience: 5: Student
|
||||
```
|
||||
## Introduction
|
||||
|
||||
Dis na wetin every developer sabi but no dey talk about well-well: typing fast na big power! 🚀 Think am - di faster wey you fit commot your tins from your brain go your code editor, di more your creativity go flow. E be like say you get direct pipeline between your mind and di screen.
|
||||
|
||||
```mermaid
|
||||
pie title Game Features
|
||||
"Real-time Feedback" : 25
|
||||
"Performance Tracking" : 20
|
||||
"Interactive UI" : 20
|
||||
"Timer System" : 15
|
||||
"Quote Management" : 10
|
||||
"Results Display" : 10
|
||||
```
|
||||
You wan sabi one beta way to upgrade dis skill? You don guess am - we go build game!
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[Player start di game] --> B[Random quote show]
|
||||
B --> C[Player dey type characters]
|
||||
C --> D{Character correct?}
|
||||
D -->|Yes| E[Green highlight]
|
||||
D -->|No| F[Red highlight]
|
||||
E --> G[Update accuracy]
|
||||
F --> G
|
||||
G --> H{Quote finish?}
|
||||
H -->|No| C
|
||||
H -->|Yes| I[Calculate WPM]
|
||||
I --> J[Show result]
|
||||
J --> K[Play again?]
|
||||
K -->|Yes| B
|
||||
K -->|No| L[Game don finish]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#fff3e0
|
||||
style E fill:#e8f5e8
|
||||
style F fill:#ffebee
|
||||
style I fill:#f3e5f5
|
||||
```
|
||||
> Make we create beta typing game together!
|
||||
|
||||
You ready to put all those JavaScript, HTML, and CSS skills wey you don dey learn for work? We go build typing game wey go challenge you with random quotes from di legendary detective [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes). Di game go dey track how fast and correct you fit type - and I swear, e dey more addictive pass wetin you fit think!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Typing Game Development))
|
||||
User Interface
|
||||
Input Elements
|
||||
Visual Feedback
|
||||
Responsive Design
|
||||
Accessibility
|
||||
Game Logic
|
||||
Quote Selection
|
||||
Timer Management
|
||||
Accuracy Tracking
|
||||
Score Calculation
|
||||
Event Handling
|
||||
Keyboard Input
|
||||
Button Clicks
|
||||
Real-time Updates
|
||||
Game State Changes
|
||||
Performance Metrics
|
||||
Words Per Minute
|
||||
Character Accuracy
|
||||
Error Tracking
|
||||
Progress Display
|
||||
User Experience
|
||||
Immediate Feedback
|
||||
Clear Instructions
|
||||
Engaging Content
|
||||
Achievement System
|
||||
```
|
||||
|
||||
|
||||
## Wetin You Need to Know
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[User Action] --> B{Event Type?}
|
||||
B -->|Key Press| C[Keyboard Event]
|
||||
B -->|Button Click| D[Mouse Event]
|
||||
B -->|Timer| E[Time Event]
|
||||
|
||||
C --> F[Check Character]
|
||||
D --> G[Start/Reset Game]
|
||||
E --> H[Update Timer]
|
||||
|
||||
F --> I{Correct?}
|
||||
I -->|Yes| J[Highlight Green]
|
||||
I -->|No| K[Highlight Red]
|
||||
|
||||
J --> L[Update Score]
|
||||
K --> L
|
||||
L --> M[Check Game State]
|
||||
|
||||
G --> N[Generate New Quote]
|
||||
H --> O[Display Time]
|
||||
|
||||
M --> P{Game Complete?}
|
||||
P -->|Yes| Q[Show Results]
|
||||
P -->|No| R[Continue Game]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
style Q fill:#f3e5f5
|
||||
```
|
||||
Before we start, make sure say you sabi these tins well (no shaking if you need quick refresher - we all don pass dat one!):
|
||||
|
||||
- How to create text input and button controls
|
||||
- CSS and how to set styles with classes
|
||||
- JavaScript basics
|
||||
- How to create array
|
||||
- How to create random number
|
||||
- How to get current time
|
||||
|
||||
If any of this tins dey small rusty for you, no worry! Sometimes di beta way to make your knowledge strong na to jump inside project and learn as you dey go.
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Foundation Assessment**: Before you start development, make sure say you sabi:
|
||||
- ✅ How HTML forms and input elements dey work
|
||||
- ✅ CSS classes and dynamic styling
|
||||
- ✅ JavaScript event listeners and handlers
|
||||
- ✅ Array manipulation and random selection
|
||||
- ✅ How to measure time and do calculations
|
||||
|
||||
**Quick Self-Test**: Fit explain how these concepts dey work together for interactive game?
|
||||
- **Events** dey trigger when users interact with elements
|
||||
- **Handlers** dey process those events and update game state
|
||||
- **CSS** dey give visual feedback for user actions
|
||||
- **Timing** dey enable performance measurement and game progress
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Typing Game Skills Development
|
||||
x-axis Beginner --> Expert
|
||||
y-axis Static --> Interactive
|
||||
quadrant-1 Advanced Games
|
||||
quadrant-2 Real-time Apps
|
||||
quadrant-3 Basic Pages
|
||||
quadrant-4 Interactive Sites
|
||||
|
||||
HTML Forms: [0.3, 0.2]
|
||||
CSS Styling: [0.4, 0.3]
|
||||
Event Handling: [0.7, 0.8]
|
||||
Game Logic: [0.8, 0.9]
|
||||
Performance Tracking: [0.9, 0.7]
|
||||
```
|
||||
## Make We Build Dis Game!
|
||||
|
||||
[Creating a typing game by using event driven programming](./typing-game/README.md)
|
||||
|
||||
### ⚡ **Wetin You Fit Do for Next 5 Minutes**
|
||||
- [ ] Open your browser console and try listen for keyboard events with `addEventListener`
|
||||
- [ ] Create simple HTML page with input field and test typing detection
|
||||
- [ ] Practice string manipulation by comparing typed text with target text
|
||||
- [ ] Try use `setTimeout` to understand timing functions
|
||||
|
||||
### 🎯 **Wetin You Fit Achieve Dis Hour**
|
||||
- [ ] Finish post-lesson quiz and understand event-driven programming
|
||||
- [ ] Build basic version of typing game with word validation
|
||||
- [ ] Add visual feedback for correct and wrong typing
|
||||
- [ ] Implement simple scoring system wey depend on speed and accuracy
|
||||
- [ ] Style your game with CSS to make am look fine
|
||||
|
||||
### 📅 **Your Week-Long Game Development**
|
||||
- [ ] Finish full typing game with all features and polish
|
||||
- [ ] Add difficulty levels with different word complexity
|
||||
- [ ] Implement user statistics tracking (WPM, accuracy over time)
|
||||
- [ ] Create sound effects and animations for better user experience
|
||||
- [ ] Make your game mobile-responsive for touch devices
|
||||
- [ ] Share your game online and collect feedback from users
|
||||
|
||||
### 🌟 **Your Month-Long Interactive Development**
|
||||
- [ ] Build multiple games to explore different interaction patterns
|
||||
- [ ] Learn about game loops, state management, and performance optimization
|
||||
- [ ] Contribute to open source game development projects
|
||||
- [ ] Master advanced timing concepts and smooth animations
|
||||
- [ ] Create portfolio wey dey show different interactive applications
|
||||
- [ ] Mentor people wey dey interested in game development and user interaction
|
||||
|
||||
## 🎯 Your Typing Game Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Game Development Learning Progression
|
||||
|
||||
section Setup (10 minutes)
|
||||
Project Structure: HTML foundation
|
||||
: CSS styling setup
|
||||
: JavaScript file creation
|
||||
|
||||
section User Interface (20 minutes)
|
||||
Interactive Elements: Input fields
|
||||
: Button controls
|
||||
: Display areas
|
||||
: Responsive layout
|
||||
|
||||
section Event Handling (25 minutes)
|
||||
User Interaction: Keyboard events
|
||||
: Mouse events
|
||||
: Real-time feedback
|
||||
: State management
|
||||
|
||||
section Game Logic (30 minutes)
|
||||
Core Functionality: Quote generation
|
||||
: Character comparison
|
||||
: Accuracy calculation
|
||||
: Timer implementation
|
||||
|
||||
section Performance Tracking (35 minutes)
|
||||
Metrics & Analytics: WPM calculation
|
||||
: Error tracking
|
||||
: Progress visualization
|
||||
: Results display
|
||||
|
||||
section Polish & Enhancement (45 minutes)
|
||||
User Experience: Visual feedback
|
||||
: Sound effects
|
||||
: Animations
|
||||
: Accessibility features
|
||||
|
||||
section Advanced Features (1 week)
|
||||
Extended Functionality: Difficulty levels
|
||||
: Leaderboards
|
||||
: Custom quotes
|
||||
: Multiplayer options
|
||||
|
||||
section Professional Skills (1 month)
|
||||
Game Development: Performance optimization
|
||||
: Code architecture
|
||||
: Testing strategies
|
||||
: Deployment patterns
|
||||
```
|
||||
### 🛠️ Your Game Development Toolkit Summary
|
||||
|
||||
After you finish dis project, you go sabi:
|
||||
- **Event-Driven Programming**: Responsive user interfaces wey dey react to input
|
||||
- **Real-Time Feedback**: Instant visual and performance updates
|
||||
- **Performance Measurement**: Correct timing and scoring systems
|
||||
- **Game State Management**: Control application flow and user experience
|
||||
- **Interactive Design**: Create engaging, addictive user experiences
|
||||
- **Modern Web APIs**: Use browser capabilities for rich interactions
|
||||
- **Accessibility Patterns**: Inclusive design for everybody
|
||||
|
||||
**Real-World Applications**: These skills dey important for:
|
||||
- **Web Applications**: Any interactive interface or dashboard
|
||||
- **Educational Software**: Learning platforms and skill assessment tools
|
||||
- **Productivity Tools**: Text editors, IDEs, and collaboration software
|
||||
- **Gaming Industry**: Browser games and interactive entertainment
|
||||
- **Mobile Development**: Touch-based interfaces and gesture handling
|
||||
|
||||
**Next Level**: You ready to explore advanced game frameworks, real-time multiplayer systems, or complex interactive applications!
|
||||
|
||||
## Credits
|
||||
|
||||
Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis dokumment don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg make you sabi se automated translation fit get some error or mistake. Di original dokumment wey dey dia for im own language na im be di main correct source. For important info, na professional human translation you suppose use. We no go responsible for any kind konfussion or wrong understandin wey fit happen from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T18:07:39+00:00",
|
||||
"source_file": "4-typing-game/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, left blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis dokument don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automated translation fit get some errors or mistake. Di original dokument wey dey dia for im correct language na di correct source. If na serious info, e better make person wey sabi translate am do am. We no go responsible for any wahala or misunderstanding wey fit come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,612 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "da8bc72041a2bb3826a54654ee1a8844",
|
||||
"translation_date": "2026-01-08T18:08:21+00:00",
|
||||
"source_file": "4-typing-game/typing-game/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Creating a game using events
|
||||
|
||||
You don waka ever wonder how websites sabi when you click button or type for inside textbox? Na the magic wey dey inside event-driven programming! Wetin better way to learn dis important skill than to build something useful - typing speed game wey dey react to every keystroke wey you do.
|
||||
|
||||
You go see for yourself how web browsers dey "talk" to your JavaScript code. Every time you click, type, or move your mouse, the browser dey send small messages (we dey call dem events) go your code, and na you go decide how to respond!
|
||||
|
||||
By the time we finish here, you go don build real typing game wey dey track your speed and accuracy. More importantly, you go understand the fundamental concepts wey dey power every interactive website wey you don ever use. Make we dive inside!
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/21)
|
||||
|
||||
## Event driven programming
|
||||
|
||||
Think about your favorite app or website - wetin make am feel alive and responsive? Na everything about how e dey react to wetin you do! Every tap, click, swipe, or keystroke na wetin we dey call "event," and na there the real magic of web development dey happen.
|
||||
|
||||
This na wetin make programming for web dey interesting: we no sabi when person go click that button or begin type for inside textbox. E fit click immediately, wait five minutes, or maybe no click at all! This unpredictability mean say we need to think differently on top how we dey write our code.
|
||||
|
||||
Instead of writing code wey go run from top to bottom like recipe, we dey write code wey just siddon wait patiently for something to happen. E be like how telegraph operators for 1800s dey siddon near their machines, ready to respond the moment message show for the wire.
|
||||
|
||||
So wetin be "event"? Simply put, na wetin happen! When you click button - na event be dat. When you type letter - na event be dat. When you move your mouse - na another event be dat.
|
||||
|
||||
Event-driven programming let us set our code to listen and respond. We dey create special functions wey we dey call **event listeners** wey go wait patiently for specific things to happen, then come rush into action when dem happen.
|
||||
|
||||
Think event listeners as doorbell for your code. You set the doorbell (`addEventListener()`), tell am which sound to listen for (like 'click' or 'keypress'), then specify wetin suppose happen when person ring am (your own custom function).
|
||||
|
||||
**Dis na how event listeners dey work:**
|
||||
- **Listen** for specific user actions like clicks, keystrokes, or mouse movements
|
||||
- **Run** your custom code when the specified event happen
|
||||
- **Respond** immediately to user interactions, create smooth experience
|
||||
- **Handle** multiple events on same element using different listeners
|
||||
|
||||
> **NOTE:** E good to know say plenty ways dey to create event listeners. You fit use anonymous functions, or create named ones. You fit use different shortcuts, like to set `click` property, or to use `addEventListener()`. For our exercise, we go focus on `addEventListener()` and anonymous functions, as na the most common way web developers dey use. E get plenty flexibility too, as `addEventListener()` dey work with all events, and event name fit dey passed as parameter.
|
||||
|
||||
### Common events
|
||||
|
||||
Even though web browsers get plenty different events wey you fit listen to, most interactive apps rely on just few important events. To sabi these main events go give you foundation to build better user interactions.
|
||||
|
||||
You get [dozens of events](https://developer.mozilla.org/docs/Web/Events) wey you fit listen for when you dey create app. Basically anything wey user do on page go raise event, this one dey give you plenty power to make sure dem get the experience you want. Luckily, you go normally need only small handful of events. Here some common ones (including the two we go use for making our game):
|
||||
|
||||
| Event | Description | Common Use Cases |
|
||||
|-------|-------------|------------------|
|
||||
| `click` | User click on something | Buttons, links, interactive elements |
|
||||
| `contextmenu` | User click right mouse button | Custom right-click menus |
|
||||
| `select` | User highlight some text | Text editing, copy operations |
|
||||
| `input` | User input some text | Form validation, real-time search |
|
||||
|
||||
**To understand these event types:**
|
||||
- **Trigger** when users interact with specific elements on your page
|
||||
- **Provide** detailed info about user's action through event objects
|
||||
- **Enable** you to create responsive, interactive web apps
|
||||
- **Work** consistently across different browsers and devices
|
||||
|
||||
## Creating the game
|
||||
|
||||
Now wey you don understand how events dey work, make we take that knowledge put am for practice by building something useful. We go create typing speed game wey go show how event handling dey work and help you develop important developer skill.
|
||||
|
||||
We go create game to explore how events dey work for JavaScript. Our game go test player typing skill which be one of the most underrated skills wey all developers suppose get. Fun fact: the QWERTY keyboard layout wey we use today na im dem design for typewriters back for 1870s - and good typing skill still dey very valuable for programmers today! The general flow of the game go be like this:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Player click Start] --> B[Random quote show]
|
||||
B --> C[Player dey type for textbox]
|
||||
C --> D{Word finish?}
|
||||
D -->|Yes| E[Highlight di next word]
|
||||
D -->|No| F{E correct so far?}
|
||||
F -->|Yes| G[Make style normal]
|
||||
F -->|No| H[Show error style]
|
||||
E --> I{Quote finish?}
|
||||
I -->|No| C
|
||||
I -->|Yes| J[Show success message with time]
|
||||
G --> C
|
||||
H --> C
|
||||
```
|
||||
**Here na how our game go work:**
|
||||
- **Start** when player click start button and display random quote
|
||||
- **Track** player typing progress word by word in real-time
|
||||
- **Highlight** the current word to guide player focus
|
||||
- **Provide** immediate visual feedback for typing errors
|
||||
- **Calculate** and display the total time when the quote complete
|
||||
|
||||
Make we build our game, and learn more about events!
|
||||
|
||||
### File structure
|
||||
|
||||
Before we start to code, make we organize ourselves! To get clean file structure from the beginning go save headache later and make your project look professional. 😊
|
||||
|
||||
We go keep am simple with just three files: `index.html` for page structure, `script.js` for all our game logic, and `style.css` to make everything fine. Dis na classic trio wey dey power most web!
|
||||
|
||||
**Create new folder for your work by opening console or terminal and run dis command:**
|
||||
|
||||
```bash
|
||||
# Linux or macOS
|
||||
mkdir typing-game && cd typing-game
|
||||
|
||||
# Windows
|
||||
md typing-game && cd typing-game
|
||||
```
|
||||
|
||||
**Here na wetin these commands go do:**
|
||||
- **Create** new directory wey dem call `typing-game` for your project files
|
||||
- **Goto** the newly created directory automatically
|
||||
- **Set** clean workspace for your game development
|
||||
|
||||
**Open Visual Studio Code:**
|
||||
|
||||
```bash
|
||||
code .
|
||||
```
|
||||
|
||||
**Dis command:**
|
||||
- **Launch** Visual Studio Code for current directory
|
||||
- **Open** your project folder inside editor
|
||||
- **Provide** access to all development tools wey you go need
|
||||
|
||||
**Add three files to the folder inside Visual Studio Code with these names:**
|
||||
- `index.html` - get structure and content of your game
|
||||
- `script.js` - handle all game logic and event listeners
|
||||
- `style.css` - define visual look and styling
|
||||
|
||||
## Create the user interface
|
||||
|
||||
Now make we build the stage where all our game action go happen! Think am like to design control panel for spaceship - we need make sure everything wey our players need dey for place wey dem expect.
|
||||
|
||||
Make we think wetin our game really need. If na you dey play typing game, wetin you go want see for the screen? Here na wetin we go need:
|
||||
|
||||
| UI Element | Purpose | HTML Element |
|
||||
|------------|---------|-------------|
|
||||
| Quote Display | Show the text to type | `<p>` with `id="quote"` |
|
||||
| Message Area | Show status and success messages | `<p>` with `id="message"` |
|
||||
| Text Input | Where players type the quote | `<input>` with `id="typed-value"` |
|
||||
| Start Button | Begin the game | `<button>` with `id="start"` |
|
||||
|
||||
**Understanding the UI structure:**
|
||||
- **Organize** content logically from top to bottom
|
||||
- **Assign** unique IDs to elements for JavaScript targeting
|
||||
- **Provide** clear visual hierarchy for better user experience
|
||||
- **Include** semantic HTML elements for accessibility
|
||||
|
||||
Each one go need ID so that we fit work with dem inside our JavaScript. We go also add reference to CSS and JavaScript files wey we go create.
|
||||
|
||||
Create new file wey dem go call `index.html`. Add this HTML:
|
||||
|
||||
```html
|
||||
<!-- inside index.html -->
|
||||
<html>
|
||||
<head>
|
||||
<title>Typing game</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Typing game!</h1>
|
||||
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
|
||||
<p id="quote"></p> <!-- This will display our quote -->
|
||||
<p id="message"></p> <!-- This will display any status messages -->
|
||||
<div>
|
||||
<input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
|
||||
<button type="button" id="start">Start</button> <!-- To start the game -->
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Explain what this HTML structure fit do:**
|
||||
- **Link** the CSS stylesheet inside `<head>` for styling
|
||||
- **Create** clear heading and instructions for users
|
||||
- **Establish** placeholder paragraphs with specific IDs for dynamic content
|
||||
- **Include** input field with accessibility attributes
|
||||
- **Provide** start button to start the game
|
||||
- **Load** JavaScript file at the end for better performance
|
||||
|
||||
### Launch the application
|
||||
|
||||
Testing your application frequently while you dey develop go help you catch problems early and see your progress in real-time. Live Server na valuable tool wey go automatically refresh your browser anytime you save changes, this one make development better.
|
||||
|
||||
E good to develop little by little so you fit see how things dey look. Make we launch our application. There a great extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) wey go host your application locally and also refresh the browser whenever you save.
|
||||
|
||||
**Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) by following the link and click Install:**
|
||||
|
||||
**Here na wetin go happen during installation:**
|
||||
- **Tell** your browser to open Visual Studio Code
|
||||
- **Guide** you through the extension installation process
|
||||
- **Fit require** restart Visual Studio Code to finish setup
|
||||
|
||||
**When e don install, for Visual Studio Code, press Ctrl-Shift-P (or Cmd-Shift-P) to open command palette:**
|
||||
|
||||
**Understanding the command palette:**
|
||||
- **Give** quick access to all VS Code commands
|
||||
- **Search** commands as you type
|
||||
- **Give** keyboard shortcuts for faster development
|
||||
|
||||
**Type "Live Server: Open with Live Server":**
|
||||
|
||||
**Wetn Live Server dey do:**
|
||||
- **Start** local development server for your project
|
||||
- **Automatically** refresh browser when you save files
|
||||
- **Serve** your files from local URL (usually `localhost:5500`)
|
||||
|
||||
**Open browser and go `https://localhost:5500`:**
|
||||
|
||||
You suppose see the page you create! Make we add some functionality.
|
||||
|
||||
## Add the CSS
|
||||
|
||||
Now make we make things fine! Visual feedback don dey important for user interfaces since early days of computing. For 1980s, researchers discover say immediate visual feedback really improve user performance and reduce mistakes. Na exactly wetin we go create here.
|
||||
|
||||
Our game need make e clear well well wetin dey happen. Players suppose know immediately which word to type, and if dem make mistake, dem go see am immediately. Make we create simple but effective styling:
|
||||
|
||||
Create new file wey you call `style.css` and put dis syntax inside.
|
||||
|
||||
```css
|
||||
/* inside style.css */
|
||||
.highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: lightcoral;
|
||||
border: red;
|
||||
}
|
||||
```
|
||||
|
||||
**Understanding these CSS classes:**
|
||||
- **Highlight** the current word with yellow background to give clear visual guidance
|
||||
- **Show** typing errors with light coral background color
|
||||
- **Provide** immediate feedback without disturbing user typing flow
|
||||
- **Use** contrasting colors for accessibility and clear visual communication
|
||||
|
||||
✅ For CSS, you fit arrange your page any how you like. Take small time and make the page fine:
|
||||
|
||||
- Pick different font
|
||||
- Color the headers
|
||||
- Resize items
|
||||
|
||||
## JavaScript
|
||||
|
||||
Now na here things go start dey interesting! 🎉 We get our HTML structure and CSS styling, but now our game be like beautiful car wey no get engine. JavaScript na that engine - na im dey make everything really work and respond to wetin players do.
|
||||
|
||||
Na here you go see your creation come to life. We go do am step by step so e no go too heavy:
|
||||
|
||||
| Step | Purpose | Wetin You Go Learn |
|
||||
|------|---------|------------------|
|
||||
| [Create the constants](../../../../4-typing-game/typing-game) | Set up quotes and DOM references | Variable management and DOM selection |
|
||||
| [Event listener to start the game](../../../../4-typing-game/typing-game) | Handle game initialization | Event handling and UI updates |
|
||||
| [Event listener to typing](../../../../4-typing-game/typing-game) | Process user input in real-time | Input validation and dynamic feedback |
|
||||
|
||||
**Dis structured approach go help you:**
|
||||
- **Organize** your code into logical, manageable parts
|
||||
- **Build** functionality step by step to make debugging easy
|
||||
- **Understand** how different parts of app dey work together
|
||||
- **Create** reusable patterns for future projects
|
||||
|
||||
But first, create new file wey you go call `script.js`.
|
||||
|
||||
### Add the constants
|
||||
|
||||
Before we enter action, make we gather all our resources! Just like NASA mission control wey set all their monitoring systems before launch, e dey easier when you get everything ready. This go save us from to dey find things later and help make we no make typos.
|
||||
|
||||
Here na wetin we need set up first:
|
||||
|
||||
| Data Type | Purpose | Example |
|
||||
| Array of quotes | Store all possible quotes for the game | `['Quote 1', 'Quote 2', ...]` |
|
||||
| Word array | Break current quote into individual words | `['When', 'you', 'have', ...]` |
|
||||
| Word index | Track which word player is typing | `0, 1, 2, 3...` |
|
||||
| Start time | Calculate elapsed time for scoring | `Date.now()` |
|
||||
|
||||
**We go still need references to our UI elements:**
|
||||
| Element | ID | Purpose |
|
||||
|---------|----|---------|
|
||||
| Text input | `typed-value` | Where players go type |
|
||||
| Quote display | `quote` | Shows the quote to type |
|
||||
| Message area | `message` | Displays status updates |
|
||||
|
||||
```javascript
|
||||
// inside script.js
|
||||
// all of our quotes
|
||||
const quotes = [
|
||||
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||
'There is nothing more deceptive than an obvious fact.',
|
||||
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
||||
'I never make exceptions. An exception disproves the rule.',
|
||||
'What one man can invent another can discover.',
|
||||
'Nothing clears up a case so much as stating it to another person.',
|
||||
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||
];
|
||||
// store di list of words and di index of di word wey di player dey type now
|
||||
let words = [];
|
||||
let wordIndex = 0;
|
||||
// di starting time
|
||||
let startTime = Date.now();
|
||||
// page elements
|
||||
const quoteElement = document.getElementById('quote');
|
||||
const messageElement = document.getElementById('message');
|
||||
const typedValueElement = document.getElementById('typed-value');
|
||||
```
|
||||
|
||||
**Breaking down wetin dis setup code dey do:**
|
||||
- **Stores** array of Sherlock Holmes quotes with `const` because quotes no go change
|
||||
- **Initializes** tracking variables with `let` as dem go dey update during gameplay
|
||||
- **Captures** references to DOM elements using `document.getElementById()` for better access
|
||||
- **Sets up** ground for all game functionality with clear, descriptive variable names
|
||||
- **Organizes** related data and elements make e easy to maintain code
|
||||
|
||||
✅ Go ahead add more quotes to your game
|
||||
|
||||
> 💡 **Pro Tip**: We fit retrieve elements anytime for code by using `document.getElementById()`. Since we go dey refer these elements anyhow, we go avoid typos with string literals by using constants. Frameworks like [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/) fit help you manage centralizing your code better.
|
||||
>
|
||||
**Na why dis approach dey work so well:**
|
||||
- **Prevents** spelling mistakes when you dey refer elements many times
|
||||
- **Improves** code clarity with descriptive constant names
|
||||
- **Enables** better IDE support with autocomplete and error checking
|
||||
- **Makes** am easier to refactor if element IDs change later
|
||||
|
||||
Take small time watch video on top using `const`, `let` and `var`
|
||||
|
||||
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
|
||||
|
||||
> 🎥 Click the picture above for video about variables.
|
||||
|
||||
### Add start logic
|
||||
|
||||
Na here everything go begin work! 🚀 You dey about write your first true event listener, and e dey satisfy to see your code respond when person click button.
|
||||
|
||||
Think am well: somewhere, player go click that "Start" button, and your code must ready for am. We no know when dem go click am - fit be immediately, fit be after dem grab coffee - but when dem do am, your game go start live.
|
||||
|
||||
When user click `start`, we go pick quote, setup user interface, then setup tracking for current word and time. Below na the JavaScript you need add; we go explain am just after the script block.
|
||||
|
||||
```javascript
|
||||
// for di end of script.js
|
||||
document.getElementById('start').addEventListener('click', () => {
|
||||
// make we find one quote
|
||||
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||
const quote = quotes[quoteIndex];
|
||||
// Put di quote inside one array of words
|
||||
words = quote.split(' ');
|
||||
// reset di word index so we fit track am
|
||||
wordIndex = 0;
|
||||
|
||||
// UI dey update
|
||||
// Make array of span things so we fit set class
|
||||
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
|
||||
// Change am to string and put am as innerHTML for di quote display
|
||||
quoteElement.innerHTML = spanWords.join('');
|
||||
// Make di first word clear pass di others
|
||||
quoteElement.childNodes[0].className = 'highlight';
|
||||
// Clear any kain message wey dey before
|
||||
messageElement.innerText = '';
|
||||
|
||||
// Arrange di textbox
|
||||
// Clear di textbox
|
||||
typedValueElement.value = '';
|
||||
// put focus
|
||||
typedValueElement.focus();
|
||||
// put di event handler
|
||||
|
||||
// Start di timer
|
||||
startTime = new Date().getTime();
|
||||
});
|
||||
```
|
||||
|
||||
**Make we break down the code into sections:**
|
||||
|
||||
**📊 Word Tracking Setup:**
|
||||
- **Selects** random quote using `Math.floor()` and `Math.random()` for variety
|
||||
- **Converts** quote into array of individual words using `split(' ')`
|
||||
- **Resets** `wordIndex` to 0 because players start with first word
|
||||
- **Prepares** game state for fresh round
|
||||
|
||||
**🎨 UI Setup and Display:**
|
||||
- **Creates** array of `<span>` elements, wrap each word for separate styling
|
||||
- **Joins** span elements into one string for efficient DOM update
|
||||
- **Highlights** first word by adding `highlight` CSS class
|
||||
- **Clears** any past game messages to provide clean slate
|
||||
|
||||
**⌨️ Textbox Preparation:**
|
||||
- **Clears** any existing text inside input
|
||||
- **Sets focus** to textbox so players go start type immediately
|
||||
- **Prepares** input area for new game session
|
||||
|
||||
**⏱️ Timer Initialization:**
|
||||
- **Captures** current timestamp with `new Date().getTime()`
|
||||
- **Enables** accurate calculation of typing speed and completion time
|
||||
- **Starts** performance tracking for game session
|
||||
|
||||
### Add typing logic
|
||||
|
||||
Na here we dey take handle the heart of our game! No worry if e look complicated at first - we go waka through every part, and by the end, you go see how e dey logical.
|
||||
|
||||
Wetin we dey build here na serious: every time person type letter, our code go check wetin dem type, give dem feedback, and decide wetin go happen next. Na like those old word processors like WordStar from 1970s wey dey give typists real-time feedback.
|
||||
|
||||
```javascript
|
||||
// for di end of script.js
|
||||
typedValueElement.addEventListener('input', () => {
|
||||
// make you get di current word
|
||||
const currentWord = words[wordIndex];
|
||||
// make you get di current value
|
||||
const typedValue = typedValueElement.value;
|
||||
|
||||
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||
// end of di sentence
|
||||
// show success
|
||||
const elapsedTime = new Date().getTime() - startTime;
|
||||
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||
messageElement.innerText = message;
|
||||
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||
// end of di word
|
||||
// clear di typedValueElement for di new word
|
||||
typedValueElement.value = '';
|
||||
// move go di next word
|
||||
wordIndex++;
|
||||
// make reset di class name for all di elements wey dey quote
|
||||
for (const wordElement of quoteElement.childNodes) {
|
||||
wordElement.className = '';
|
||||
}
|
||||
// highlight di new word
|
||||
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||
} else if (currentWord.startsWith(typedValue)) {
|
||||
// correct so far
|
||||
// highlight di next word
|
||||
typedValueElement.className = '';
|
||||
} else {
|
||||
// error state
|
||||
typedValueElement.className = 'error';
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Understanding the typing logic flow:**
|
||||
|
||||
This function dey use waterfall style, checking conditions from most specific go most general. Make we break am down for each scenario:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Player types character] --> B[Get current word and typed value]
|
||||
B --> C{Quote complete?}
|
||||
C -->|Yes| D[Show completion message with time]
|
||||
C -->|No| E{Word complete with space?}
|
||||
E -->|Yes| F[Clear input, move to next word, update highlight]
|
||||
E -->|No| G{Typing correctly so far?}
|
||||
G -->|Yes| H[Remove error styling]
|
||||
G -->|No| I[Show error styling]
|
||||
```
|
||||
**🏁 Quote Complete (Scenario 1):**
|
||||
- **Checks** if typed value match current word AND we dey for last word
|
||||
- **Calculates** elapsed time by subtracting start time from current time
|
||||
- **Converts** milliseconds to seconds by dividing by 1,000
|
||||
- **Displays** congratulatory message wit completion time
|
||||
|
||||
**✅ Word Complete (Scenario 2):**
|
||||
- **Detects** word complete when input end wit space
|
||||
- **Validates** say trimmed input match current word exactly
|
||||
- **Clears** input field for next word
|
||||
- **Advances** to next word by incrementing `wordIndex`
|
||||
- **Updates** visual highlighting by removing all classes then highlight new word
|
||||
|
||||
**📝 Typing in Progress (Scenario 3):**
|
||||
- **Verifies** say current word start wit wetin dem type so far
|
||||
- **Removes** any error styling show say input correct
|
||||
- **Allows** continued typing without wahala
|
||||
|
||||
**❌ Error State (Scenario 4):**
|
||||
- **Triggers** when typed text no match the expected word beginning
|
||||
- **Applies** error CSS class for immediate visual feedback
|
||||
- **Helps** players quickly spot and correct mistake
|
||||
|
||||
## Test your application
|
||||
|
||||
Look wetin you don achieve! 🎉 You build real, working typing game from scratch using event-driven programming. Take time appreciate that - na no small thing be that!
|
||||
|
||||
Now na testing phase come! E go work as we expect? We miss anything? Wetin dey happen be say if e no work perfectly immediately, no wahala. Even top developers dey find bugs for their code sometimes. Na part of development process be that!
|
||||
|
||||
Click `start`, den start to type! E go look small like the animation we see before.
|
||||
|
||||
|
||||
|
||||
**Wetin to test for your application:**
|
||||
- **Verifies** say clicking Start go show random quote
|
||||
- **Confirms** typing go highlight current word correct
|
||||
- **Checks** that error styling show up for wrong typing
|
||||
- **Ensures** say completing words go move highlight properly
|
||||
- **Tests** finishing quote go show completion message with timing
|
||||
|
||||
**Common debugging tips:**
|
||||
- **Check** browser console (F12) for JavaScript errors
|
||||
- **Verify** all file names match exactly (case-sensitive)
|
||||
- **Ensure** Live Server dey run and dey refresh well
|
||||
- **Test** plenty quotes to check say random selection dey work
|
||||
|
||||
---
|
||||
|
||||
## GitHub Copilot Agent Challenge 🎮
|
||||
|
||||
Use Agent mode take complete dis challenge:
|
||||
|
||||
**Description:** Expand typing game by adding difficulty system wey adjust game based on player performance. This challenge go help you practice advanced event handling, data analysis, and dynamic UI updates.
|
||||
|
||||
**Prompt:** Create difficulty adjustment system for typing game wey:
|
||||
1. Track player typing speed (words per minute) and accuracy percentage
|
||||
2. Automatically adjust to three difficulty levels: Easy (simple quotes), Medium (current quotes), Hard (complex quotes with punctuation)
|
||||
3. Show current difficulty level and player stats on UI
|
||||
4. Implement streak counter wey increase difficulty after 3 good performances in row
|
||||
5. Add visual feedback (colors, animations) to show difficulty changes
|
||||
|
||||
Add necessary HTML elements, CSS styles, and JavaScript functions to implement dis feature. Make sure error handling dey proper and game remain accessible wit correct ARIA labels.
|
||||
|
||||
Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Ready to take your typing game go next level? Try put these advanced features add to grow understanding of event handling and DOM manipulation:
|
||||
|
||||
**Add more functionality:**
|
||||
|
||||
| Feature | Description | Skills You'll Practice |
|
||||
|---------|-------------|------------------------|
|
||||
| **Input Control** | Disable `input` event listener after completion, re-enable when button clicked | Event management and state control |
|
||||
| **UI State Management** | Disable textbox when player finish quote | DOM property manipulation |
|
||||
| **Modal Dialog** | Show modal dialog box with success message | Advanced UI patterns and accessibility |
|
||||
| **High Score System** | Store high scores using `localStorage` | Browser storage APIs and data persistence |
|
||||
|
||||
**Implementation tips:**
|
||||
- **Research** `localStorage.setItem()` and `localStorage.getItem()` for persistent storage
|
||||
- **Practice** adding and removing event listeners dynamically
|
||||
- **Explore** HTML dialog elements or CSS modal patterns
|
||||
- **Consider** accessibility while disabling and enabling form controls
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/22)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Your Typing Game Mastery Timeline
|
||||
|
||||
### ⚡ **Wetin You Fit Do for Next 5 Minutes**
|
||||
- [ ] Test your typing game wit different quotes to make sure e smooth
|
||||
- [ ] Try change CSS styling - try change highlight and error colors
|
||||
- [ ] Open browser DevTools (F12) and watch console while you dey play
|
||||
- [ ] Challenge yourself make you finish quote fast
|
||||
|
||||
### ⏰ **Wetin You Fit Accomplish This Hour**
|
||||
- [ ] Add more quotes to array (maybe from your favorite books or movies)
|
||||
- [ ] Implement localStorage high score system from challenge section
|
||||
- [ ] Create words-per-minute calculator wey show after each game
|
||||
- [ ] Add sound effects for correct typing, errors, and completion
|
||||
|
||||
### 📅 **Your Week-Long Adventure**
|
||||
- [ ] Build multiplayer version weh friends fit compete side-by-side
|
||||
- [ ] Create different difficulty levels with varying quote complexity
|
||||
- [ ] Add progress bar show how much of quote don complete
|
||||
- [ ] Implement user accounts with personal stats tracking
|
||||
- [ ] Design custom themes and allow users choose their preferred styling
|
||||
|
||||
### 🗓️ **Your Month-Long Transformation**
|
||||
- [ ] Create typing course with lessons wey dey teach proper finger placement step-by-step
|
||||
- [ ] Build analytics show which letters or words dey cause plenty errors
|
||||
- [ ] Add support for different languages and keyboard layouts
|
||||
- [ ] Integrate educational APIs to pull quotes from literature databases
|
||||
- [ ] Publish your enhanced typing game make others fit use and enjoy
|
||||
|
||||
### 🎯 **Final Reflection Check-in**
|
||||
|
||||
**Before you move on, take time celebrate:**
|
||||
- Wetin be the most satisfying moment as you dey build this game?
|
||||
- How do you feel about event-driven programming now compared to when you start?
|
||||
- Which one feature you dey excited to add to make dis game uniquely yours?
|
||||
- How you fit apply event handling concepts to other projects?
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Event Programming Confidence Journey
|
||||
section Today
|
||||
Understanding Events: 3: You
|
||||
Building UI: 4: You
|
||||
Writing Event Listeners: 5: You
|
||||
section This Week
|
||||
Adding Features: 4: You
|
||||
Debugging Issues: 5: You
|
||||
Enhancing UX: 4: You
|
||||
section Next Month
|
||||
Building Complex Apps: 5: You
|
||||
Teaching Others: 5: You
|
||||
Creating Frameworks: 5: You
|
||||
```
|
||||
> 🌟 **Remember**: You don master one core concept wey dey power every interactive website and app. Event-driven programming na wetin dey make web feel alive and responsive. Anytime you see dropdown menu, form wey dey validate as you type, or game wey respond to your clicks, you don sabi the magic behind am. You no just dey learn code - you dey learn to create experiences wey go feel natural and engaging! 🎉
|
||||
|
||||
---
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Read up on [all the events available](https://developer.mozilla.org/docs/Web/Events) give the developer through web browser, and reason the scenarios where you go use each one.
|
||||
|
||||
## Assignment
|
||||
|
||||
[Create a new keyboard game](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na e get translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make everything correct, abeg remember say automated translate fit get some errors or mistakes. Di original document wey dem write for im own language na di correct one wey you suppose trust. If na serious matter, e good make person wey sabi translate for human do am. We no go responsible if pesin go misunderstand or misinterpret anything wey dis translation carry.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,57 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3eac59d70e2532a677a2ce6bf765485a",
|
||||
"translation_date": "2026-01-08T18:22:36+00:00",
|
||||
"source_file": "4-typing-game/typing-game/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Create new keyboard game
|
||||
|
||||
## Instructions
|
||||
|
||||
Now wey you don sabi di fundamentals of event-driven programming wit di typing game, na time to show your creativity! You go design and build your own keyboard-based game weh go show say you understand how event handling, DOM manipulation, and user interaction patterns dey work.
|
||||
|
||||
Make you create small game weh dey use keyboard events to do specific tasks. E fit be different kind typing game, art app weh dey paint pixels for screen anytime keyboard key press, simple arcade-style game weh you control wit arrow keys, or any other creative idea weh you fit think. Make you use your brain, reason how different keys fit trigger different kain behavior!
|
||||
|
||||
**Your game suppose get:**
|
||||
|
||||
| Requirement | Description | Purpose |
|
||||
|-------------|-------------|---------|
|
||||
| **Event Listeners** | Respond to at least 3 different keyboard events | Show say you sabi event handling |
|
||||
| **Visual Feedback** | Give immediate visual response to wetin user input | Show say you sabi DOM manipulation |
|
||||
| **Game Logic** | Get scoring, levels, or progression mechanics | Practice how to implement application state |
|
||||
| **User Interface** | Clear instructions and easy to use controls | Develop user experience design skills |
|
||||
|
||||
**Creative project ideas to consider:**
|
||||
- **Rhythm Game**: Players press keys to di rhythm of music or visual cues
|
||||
- **Pixel Art Creator**: Different keys dey paint different colors or patterns
|
||||
- **Word Builder**: Players dey create words by typing letters for specific order
|
||||
- **Snake Game**: You fit control snake wit arrow keys to collect items
|
||||
- **Music Synthesizer**: Different keys dey play different kind musical tones or sounds
|
||||
- **Speed Typing Variants**: Category-specific typing (programming words, foreign languages)
|
||||
- **Keyboard Drummer**: Create beats by mapping keys to different drum sounds
|
||||
|
||||
**Implementation guidelines:**
|
||||
- **Start** with simple idea then build complexity gradually
|
||||
- **Focus** on smooth, responsive controls wey go feel natural
|
||||
- **Include** clear visual signs for game state and player progress
|
||||
- **Test** your game wit different people to make sure e easy to play
|
||||
- **Document** your code wit comments weh explain your event handling plan
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **Functionality** | Complete, polished game wey get many features and smooth gameplay | Working game with basic features wey show keyboard event handling | Minimal implementation with limited function or serious bugs |
|
||||
| **Code Quality** | Well-organized, commented code wey follow best practices wit efficient event handling | Clean, readable code with correct use of event listeners and DOM manipulation | Basic code structure with some organization wahala or inefficient implementation |
|
||||
| **User Experience** | Controls dey easy, feedback clear, gameplay interesting and professional | Functional interface with enough user guidance and responsive controls | Basic interface wey instructions no clear or e no dey responsive well |
|
||||
| **Creativity** | Original idea wit innovative use of keyboard events and creative problem solving | Interesting variation of common game patterns with good use of event handling | Simple implementation of basic idea wit small creative elements |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we try make e correct, pls sabi say automated translations fit get some mistakes or wrong tori. Di original document wey dey dia for inside im original language na di correct source. If na serious tori, make person wey sabi human translation do am. We no go take any blame if person no understand or miss meaning because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,554 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "00aa85715e1efd4930c17a23e3012e69",
|
||||
"translation_date": "2026-01-08T15:39:46+00:00",
|
||||
"source_file": "5-browser-extension/1-about-browsers/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Browser Extension Project Part 1: All about Browsers
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Browser Extension Development Journey
|
||||
section Foundation
|
||||
Understand browsers: 3: Student
|
||||
Learn extension types: 4: Student
|
||||
Setup development: 4: Student
|
||||
section Development
|
||||
Build interface: 4: Student
|
||||
Add functionality: 5: Student
|
||||
Handle data: 5: Student
|
||||
section Integration
|
||||
Test in browser: 5: Student
|
||||
Debug issues: 4: Student
|
||||
Polish experience: 5: Student
|
||||
```
|
||||
|
||||
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/23)
|
||||
|
||||
### Introduction
|
||||
|
||||
Browser extensions na small apps wey dey make your web browsing beta. Like Tim Berners-Lee original plan for interactive web, extensions dey increase the browser power pass just to dey look documents. From password managers wey dey keep your account safe to color pickers wey help designers find correct shades, extensions dey solve wahala wey dey everyday browsing.
|
||||
|
||||
Before we build your first extension, make we understand how browsers dey work. Just like Alexander Graham Bell suppose understand how sound dey carry before e invent telephone, to sabi browser basics go help you make extensions wey go join well-well with browser systems.
|
||||
|
||||
By the end of this lesson, you go sabi browser architecture and start to build your first extension.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Browser Architecture))
|
||||
Core Components
|
||||
Rendering Engine
|
||||
JavaScript Engine
|
||||
Network Stack
|
||||
Storage APIs
|
||||
User Interface
|
||||
Address Bar
|
||||
Tab Management
|
||||
Bookmarks
|
||||
Extension Icons
|
||||
Extension System
|
||||
Manifest Files
|
||||
Content Scripts
|
||||
Background Pages
|
||||
Popup Windows
|
||||
Security Model
|
||||
Same-Origin Policy
|
||||
Permissions API
|
||||
Content Security
|
||||
Isolated Worlds
|
||||
Development Tools
|
||||
DevTools Integration
|
||||
Debug Console
|
||||
Performance Monitor
|
||||
Extension Inspector
|
||||
```
|
||||
## Understanding Web Browsers
|
||||
|
||||
Web browser na correct document interpreter. When you type "google.com" inside address bar, browser go do gbege series of work - e go request content from servers for everywhere, then e go parse am and render dat code into interactive web pages wey you dey see.
|
||||
|
||||
This process dey like how first web browser, WorldWideWeb, Tim Berners-Lee design am for 1990 so that everybody fit access hyperlinked documents.
|
||||
|
||||
✅ **Small history**: Di first browser na 'WorldWideWeb' an e be Tim Berners-Lee create am for 1990.
|
||||
|
||||
|
||||
> Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
|
||||
|
||||
### How Browsers Process Web Content
|
||||
|
||||
The process between to put URL and see webpage get many steps wey dem arranged nicely, and everything happen in seconds:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Browser
|
||||
participant Extension
|
||||
participant DNS
|
||||
participant Server
|
||||
|
||||
User->>Browser: Types URL and presses Enter
|
||||
Browser->>Extension: Trigger beforeRequest event
|
||||
Extension->>Extension: Check if URL needs modification
|
||||
Browser->>DNS: Looks up server IP address
|
||||
DNS->>Browser: Returns IP address
|
||||
Browser->>Server: Requests web page content
|
||||
Server->>Browser: Sends HTML, CSS, and JavaScript
|
||||
Browser->>Extension: Trigger beforeResponse event
|
||||
Extension->>Extension: Modify content if needed
|
||||
Browser->>User: Render di complete web page
|
||||
Extension->>User: Show extension UI updates
|
||||
```
|
||||
**Dis na wetin dis process dey do:**
|
||||
- **Translate** human readable URL go server IP address through DNS lookup
|
||||
- **Set up** secure connection with the web server using HTTP or HTTPS protocols
|
||||
- **Request** the exact web page content from the server
|
||||
- **Receive** HTML markup, CSS styling, and JavaScript code from server
|
||||
- **Render** all di content to interactive web page wey you dey see
|
||||
|
||||
### Browser Core Features
|
||||
|
||||
Modern browsers get plenty features wey extension developers fit use:
|
||||
|
||||
| Feature | Purpose | Extension Opportunities |
|
||||
|---------|---------|------------------------|
|
||||
| **Rendering Engine** | Display HTML, CSS, JavaScript | Change content, styling injection |
|
||||
| **JavaScript Engine** | Run JavaScript code | Custom scripts, API interactions |
|
||||
| **Local Storage** | Save data local | User preferences, cached data |
|
||||
| **Network Stack** | Handle web requests | Monitor requests, data analysis |
|
||||
| **Security Model** | Protect users from bad content | Content filtering, security upgrades |
|
||||
|
||||
**To sabi these features go help you:**
|
||||
- **Know** where your extension fit add the most value
|
||||
- **Pick** correct browser APIs for your extension work
|
||||
- **Design** extensions wey dey work well with browser system
|
||||
- **Make sure** your extension follow browser security best practices
|
||||
|
||||
### Cross-Browser Development Considerations
|
||||
|
||||
Different browsers dey do standards small-small different, like how different programming languages dey handle algorithm differently too. Chrome, Firefox, and Safari get their own way wey developers must understand as dem develop extensions.
|
||||
|
||||
> 💡 **Pro Tip**: Use [caniuse.com](https://www.caniuse.com) to check which web technologies browsers support. Dis thing go help you plan your extension well!
|
||||
|
||||
**Important things to remember when developing extensions:**
|
||||
- **Test** your extension for Chrome, Firefox, and Edge
|
||||
- **Adjust** to different browser extension APIs and manifest formats
|
||||
- **Handle** different performance and limits
|
||||
- **Provide** fallbacks for browser-specific features wey no too dey available
|
||||
|
||||
✅ **Analytics Insight**: You fit sabi the browsers wey your users like by installing analytics tools for your web projects. Dis data go help you know which browser to support first.
|
||||
|
||||
## Understanding Browser Extensions
|
||||
|
||||
Browser extensions dey solve common web browsing problems by adding extra work directly to the browser interface. No need for separate apps or complicated workflow, extensions go give quick access to tools.
|
||||
|
||||
Dis idea na like how early computer pioneers like Douglas Engelbart think say technology fit boost wetin humans fit do - extensions go add power to your browser.
|
||||
|
||||
```mermaid
|
||||
quadrantChart
|
||||
title Browser Extension Categories
|
||||
x-axis Simple --> Complex
|
||||
y-axis Personal Use --> Professional Tools
|
||||
quadrant-1 Developer Tools
|
||||
quadrant-2 Enterprise Solutions
|
||||
quadrant-3 Personal Utilities
|
||||
quadrant-4 Productivity Apps
|
||||
|
||||
Ad Blockers: [0.3, 0.2]
|
||||
Password Managers: [0.7, 0.3]
|
||||
Color Pickers: [0.4, 0.8]
|
||||
Code Formatters: [0.8, 0.9]
|
||||
Note Taking: [0.6, 0.5]
|
||||
Video Downloaders: [0.5, 0.2]
|
||||
Time Trackers: [0.7, 0.6]
|
||||
Screenshot Tools: [0.4, 0.4]
|
||||
```
|
||||
**Popular extension categories and benefits:**
|
||||
- **Productivity Tools**: Task managers, note-taking apps, time trackers wey dey help you organize
|
||||
- **Security Enhancements**: Password managers, ad blockers, privacy tools wey protect your data
|
||||
- **Developer Tools**: Code formatters, color pickers, debugging tools wey make development easier
|
||||
- **Content Enhancement**: Reading modes, video downloaders, screenshot tools wey improve your web experience
|
||||
|
||||
✅ **Reflection Question**: Wetin be your favorite browser extensions? Wetin dem dey do, and how e dey make your browsing better?
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Browser Architecture Understanding**: Before you start to develop extensions, make sure you:
|
||||
- ✅ Fit explain how browsers dey process web requests and display content
|
||||
- ✅ Fit identify main parts for browser architecture
|
||||
- ✅ Understand how extensions join with browser functions
|
||||
- ✅ Know security model wey protect users
|
||||
|
||||
**Quick Self-Test**: You fit trace the way from when you type URL to when webpage show?
|
||||
1. **DNS lookup** convert URL go IP address
|
||||
2. **HTTP request** fetch content from server
|
||||
3. **Parsing** processes HTML, CSS, JavaScript
|
||||
4. **Rendering** display final webpage
|
||||
5. **Extension** fit change content for different steps
|
||||
|
||||
## Installing and Managing Extensions
|
||||
|
||||
To sabi extension installation process go help you sabi how user experience go be when people dey install your extension. Installation process dey similar for all modern browsers, only small design differences.
|
||||
|
||||
|
||||
|
||||
> **Important**: Make sure say developer mode dey on and you allow extensions wey come from other stores when you dey test your own extensions.
|
||||
|
||||
### Development Extension Installation Process
|
||||
|
||||
When you dey develop and test your own extensions, follow this steps:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Write Code] --> B[Build Extension]
|
||||
B --> C{First Install?}
|
||||
C -->|Yes| D[Load Unpacked]
|
||||
C -->|No| E[Reload Extension]
|
||||
D --> F[Test Functionality]
|
||||
E --> F
|
||||
F --> G{Working Correctly?}
|
||||
G -->|No| H[Debug Issues]
|
||||
G -->|Yes| I[Ready for Users]
|
||||
H --> A
|
||||
I --> J[Publish to Store]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#e8f5e8
|
||||
style I fill:#f3e5f5
|
||||
style J fill:#fff3e0
|
||||
```
|
||||
```bash
|
||||
# Step 1: Make your extension
|
||||
npm run build
|
||||
```
|
||||
|
||||
**Wetìn dis command dey do:**
|
||||
- **Compile** your source code into browser ready files
|
||||
- **Bundle** JavaScript modules into better optimized packages
|
||||
- **Create** final extension files for `/dist` folder
|
||||
- **Prepare** your extension for installation and testing
|
||||
|
||||
**Step 2: Go Browser Extensions**
|
||||
1. **Open** your browser extension management page
|
||||
2. **Click** "Settings and more" button (`...` icon) for top right
|
||||
3. **Select** "Extensions" from menu
|
||||
|
||||
**Step 3: Load Your Extension**
|
||||
- **For new installs**: Choose `load unpacked` and select your `/dist` folder
|
||||
- **For updates**: Click `reload` beside your installed extension
|
||||
- **For testing**: Turn on "Developer mode" to get extra debugging features
|
||||
|
||||
### Production Extension Installation
|
||||
|
||||
> ✅ **Note**: These development instructions na for extensions wey you dey build yourself. If you want install published extensions, go official browser extension stores like [Microsoft Edge Add-ons store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home).
|
||||
|
||||
**Understand the difference:**
|
||||
- **Development install** let you test unpublished extensions as you develop
|
||||
- **Store install** na vetted, published extensions wey get automatic updates
|
||||
- **Sideloading** na to install extensions from outside official stores (developer mode must dey on)
|
||||
|
||||
## Building Your Carbon Footprint Extension
|
||||
|
||||
We go create browser extension wey go show carbon footprint for your region energy use. Dis project show key extension development concepts plus create real tool for environment.
|
||||
|
||||
Dis approach follow "learning by doing" principle wey John Dewey education theory dey support - mix technical skills with real-world purpose.
|
||||
|
||||
### Project Requirements
|
||||
|
||||
Before you start development, make we gather wetin we need:
|
||||
|
||||
**Required API Access:**
|
||||
- **[CO2 Signal API key](https://www.co2signal.com/)**: Put your email to get free API key
|
||||
- **[Region code](http://api.electricitymap.org/v3/zones)**: Find your region code on [Electricity Map](https://www.electricitymap.org/map) (for example, Boston get 'US-NEISO')
|
||||
|
||||
**Development Tools:**
|
||||
- **[Node.js and NPM](https://www.npmjs.com)**: Package manager tool to install project dependencies
|
||||
- **[Starter code](../../../../5-browser-extension/start)**: Download `start` folder to start development
|
||||
|
||||
✅ **Learn More**: Improve your package management skills with this [comprehensive Learn module](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
|
||||
|
||||
### Understanding the Project Structure
|
||||
|
||||
Sabi project structure help organize development work better. Like Library of Alexandria organize knowledge for easy retrieval, well-structured codebase make development faster:
|
||||
|
||||
```
|
||||
project-root/
|
||||
├── dist/ # Built extension files
|
||||
│ ├── manifest.json # Extension configuration
|
||||
│ ├── index.html # User interface markup
|
||||
│ ├── background.js # Background script functionality
|
||||
│ └── main.js # Compiled JavaScript bundle
|
||||
├── src/ # Source development files
|
||||
│ └── index.js # Your main JavaScript code
|
||||
├── package.json # Project dependencies and scripts
|
||||
└── webpack.config.js # Build configuration
|
||||
```
|
||||
|
||||
**Break down wetin each file do:**
|
||||
- **`manifest.json`**: **Define** extension metadata, permissions, and entry points
|
||||
- **`index.html`**: **Create** user interface wey show when people click your extension
|
||||
- **`background.js`**: **Handle** background work and browser event listeners
|
||||
- **`main.js`**: **Contain** final bundled JavaScript after build
|
||||
- **`src/index.js`**: **House** your main development code wey go compile into `main.js`
|
||||
|
||||
> 💡 **Organization Tip**: Keep your API key and region code for secure note so you fit easily check am during development. You go need am to test extension work.
|
||||
|
||||
✅ **Security Note**: No ever commit API keys or sensitive info to code repository. We go show you how to keep am safe later.
|
||||
|
||||
## Creating the Extension Interface
|
||||
|
||||
Now, we go build user interface parts. The extension get two screens: one for setup and one for result show.
|
||||
|
||||
This follow progressive disclosure principle inside interface design since early computers - dey show info and options step by step so no overwhelm user.
|
||||
|
||||
### Extension Views Overview
|
||||
|
||||
**Setup View** - Configuration for first time user:
|
||||
|
||||
|
||||
**Results View** - Carbon footprint data display:
|
||||
|
||||
|
||||
### Building the Configuration Form
|
||||
|
||||
Setup form go collect user config data on first use. After you set am, info go remain for browser storage for next times.
|
||||
|
||||
For `/dist/index.html` file, add dis form structure:
|
||||
|
||||
```html
|
||||
<form class="form-data" autocomplete="on">
|
||||
<div>
|
||||
<h2>New? Add your Information</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label for="region">Region Name</label>
|
||||
<input type="text" id="region" required class="region-name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="api">Your API Key from tmrow</label>
|
||||
<input type="text" id="api" required class="api-key" />
|
||||
</div>
|
||||
<button class="search-btn">Submit</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
**Wetìn dis form dey do:**
|
||||
- **Create** semantic form with correct labels and input connection
|
||||
- **Enable** browser autocomplete to make user experience better
|
||||
- **Require** both fields to fill before submit using `required` attribute
|
||||
- **Organize** inputs with class names to ease styling and JavaScript access
|
||||
- **Give** clear instructions to users wey dey set extension first time
|
||||
|
||||
### Building the Results Display
|
||||
|
||||
Next, create where results go show the carbon footprint data. Add dis HTML below the form:
|
||||
|
||||
```html
|
||||
<div class="result">
|
||||
<div class="loading">loading...</div>
|
||||
<div class="errors"></div>
|
||||
<div class="data"></div>
|
||||
<div class="result-container">
|
||||
<p><strong>Region: </strong><span class="my-region"></span></p>
|
||||
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
|
||||
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
|
||||
</div>
|
||||
<button class="clear-btn">Change region</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Break down wetin dis place dey provide:**
|
||||
- **`loading`**: **Show** loading message while API data dey fetch
|
||||
- **`errors`**: **Show** error messages if API call fail or data no correct
|
||||
- **`data`**: **Hold** raw data for debugging during development
|
||||
- **`result-container`**: **Display** formatted carbon footprint info to users
|
||||
- **`clear-btn`**: **Allow** users change region and reset extension
|
||||
|
||||
### Setting Up the Build Process
|
||||
|
||||
Now make we install project dependencies and test build process:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
**Wetín dis installation go do:**
|
||||
- **Download** Webpack and other development dependencies from `package.json`
|
||||
- **Configure** build tools for compiling modern JavaScript
|
||||
- **Prepare** development environment to build and test extension
|
||||
- **Enable** code bundling, optimization, and cross-browser support
|
||||
|
||||
> 💡 **Build Process Insight**: Webpack bundle your source code from `/src/index.js` into `/dist/main.js`. Dis process go optimize your code for production and make am compatible with browsers.
|
||||
|
||||
### Testing Your Progress
|
||||
|
||||
For now, you fit start to test your extension:
|
||||
1. **Run** di build command to compile ya kode
|
||||
2. **Load** di extension inside ya browser wit di developer mode
|
||||
3. **Verify** sey di form dey show well and e fine well well
|
||||
4. **Check** sey all di form elements line well and dey work
|
||||
|
||||
**Wetin you don achieve:**
|
||||
- **Built** di basic HTML structure for ya extension
|
||||
- **Created** both configuration and results interfaces with correct semantic markup
|
||||
- **Set up** modern development workflow using industry-standard tools
|
||||
- **Prepared** di foundation to add interactive JavaScript functionality
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Extension Development Progress**: Make sure sey you sabi before you continue:
|
||||
- ✅ You fit explain di purpose of each file inside di project structure?
|
||||
- ✅ You understand how di build process dey turn your source code?
|
||||
- ✅ Why we separate configuration and results into different UI sections?
|
||||
- ✅ How di form structure dey support both usability and accessibility?
|
||||
|
||||
**Development Workflow Understanding**: You suppose fit now to:
|
||||
1. **Modify** HTML and CSS for ya extension interface
|
||||
2. **Run** di build command to compile your changes
|
||||
3. **Reload** di extension inside your browser to test updates
|
||||
4. **Debug** wahala using browser developer tools
|
||||
|
||||
You don finish di first phase of browser extension development. Just like how Wright brothers first gats understand aerodynamics before dem fit fly, understanding dis basic kind concept dey prepare you to build more complex interactive features for the next lesson.
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use di Agent mode to finish di following challenge:
|
||||
|
||||
**Description:** Make di browser extension beta by adding form validation and user feedback features to better di user experience when dem dey put API keys and region codes.
|
||||
|
||||
**Prompt:** Create JavaScript validation functions wey go check if di API key field get at least 20 characters and if di region code follow the correct format (like 'US-NEISO'). Add visual feedback by changing input border colors to green if valid and red if no correct. Make you also add toggle feature to show/hide di API key for security reasons.
|
||||
|
||||
Find out more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Make you check one browser extension store and install one for your browser. You fit check im files in interesting way. Wetin you discover?
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/24)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
For dis lesson you learn small about di history of web browser; take dis chance to learn how di inventors of di World Wide Web see how people go use am by reading more about di history. Some sites wey fit help include:
|
||||
|
||||
[The History of Web Browsers](https://www.mozilla.org/firefox/browsers/browser-history/)
|
||||
|
||||
[History of the Web](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[An interview with Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||
|
||||
### ⚡ **Wetin You Fit Do for Next 5 Minutes**
|
||||
- [ ] Open Chrome/Edge extensions page (chrome://extensions) and explore wetin you get for your browser
|
||||
- [ ] Look your browser DevTools Network tab as you dey load webpage
|
||||
- [ ] Try see page source (Ctrl+U) to check HTML structure
|
||||
- [ ] Inspect any webpage element and change im CSS inside DevTools
|
||||
|
||||
### 🎯 **Wetin You Fit Achieve Dis Hour**
|
||||
- [ ] Finish di post-lesson quiz and sabi browser fundamentals
|
||||
- [ ] Create basic manifest.json file for browser extension
|
||||
- [ ] Build simple "Hello World" extension wey go show popup
|
||||
- [ ] Test loading your extension for developer mode
|
||||
- [ ] Explore di browser extension documentation for your target browser
|
||||
|
||||
### 📅 **Your Week-Long Extension Journey**
|
||||
- [ ] Finish functional browser extension wey get real use
|
||||
- [ ] Learn about content scripts, background scripts, and popup interactions
|
||||
- [ ] Master browser APIs like storage, tabs, and messaging
|
||||
- [ ] Design user-friendly interfaces for your extension
|
||||
- [ ] Test your extension on different websites and scenarios
|
||||
- [ ] Publish your extension to the browser extension store
|
||||
|
||||
### 🌟 **Your Month-Long Browser Development**
|
||||
- [ ] Build many extensions wey solve different user problems
|
||||
- [ ] Learn advanced browser APIs and correct security ways
|
||||
- [ ] Contribute to open source browser extension projects
|
||||
- [ ] Master cross-browser compatibility and progressive enhancement
|
||||
- [ ] Create extension development tools and templates for other people to use
|
||||
- [ ] Become browser extension expert wey fit help other developers
|
||||
|
||||
## 🎯 Your Browser Extension Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Browser Extension Development Progression
|
||||
|
||||
section Foundation (15 minutes)
|
||||
Browser Understanding: Core architecture
|
||||
: Rendering process
|
||||
: Extension integration points
|
||||
|
||||
section Setup (20 minutes)
|
||||
Development Environment: Project structure
|
||||
: Build tools configuration
|
||||
: Browser developer mode
|
||||
: Extension loading process
|
||||
|
||||
section Interface Design (25 minutes)
|
||||
User Experience: HTML structure
|
||||
: CSS styling
|
||||
: Form validation
|
||||
: Responsive design
|
||||
|
||||
section Core Functionality (35 minutes)
|
||||
JavaScript Integration: Event handling
|
||||
: API interactions
|
||||
: Data storage
|
||||
: Error handling
|
||||
|
||||
section Browser APIs (45 minutes)
|
||||
Platform Integration: Permissions system
|
||||
: Storage APIs
|
||||
: Tab management
|
||||
: Context menus
|
||||
|
||||
section Advanced Features (1 week)
|
||||
Professional Extensions: Background scripts
|
||||
: Content scripts
|
||||
: Cross-browser compatibility
|
||||
: Performance optimization
|
||||
|
||||
section Publishing (2 weeks)
|
||||
Distribution: Store submission
|
||||
: Review process
|
||||
: User feedback
|
||||
: Update management
|
||||
|
||||
section Expert Level (1 month)
|
||||
Extension Ecosystem: Advanced APIs
|
||||
: Security best practices
|
||||
: Enterprise features
|
||||
: Framework integration
|
||||
```
|
||||
### 🛠️ Your Extension Development Toolkit Summary
|
||||
|
||||
After you finish dis lesson, you now get:
|
||||
- **Browser Architecture Knowledge**: You sabi rendering engines, security models, and extension integration
|
||||
- **Development Environment**: Modern tools like Webpack, NPM, and debugging
|
||||
- **UI/UX Foundation**: Semantic HTML structure with progressive disclosure patterns
|
||||
- **Security Awareness**: You know browser permissions and how to develop safely
|
||||
- **Cross-Browser Concepts**: You sabi compatibility and testing approach
|
||||
- **API Integration**: Foundation to work with external data
|
||||
- **Professional Workflow**: Industry-standard development and testing methods
|
||||
|
||||
**Real-World Applications**: These skills good for:
|
||||
- **Web Development**: Single-page applications and progressive web apps
|
||||
- **Desktop Applications**: Electron and web-based desktop software
|
||||
- **Mobile Development**: Hybrid apps and web-based mobile solutions
|
||||
- **Enterprise Tools**: Internal productivity apps and workflow automation
|
||||
- **Open Source**: Contributing to browser extension projects and web standards
|
||||
|
||||
**Next Level**: You ready to add interactive features, work with browser APIs, and create extensions wey go solve real user wahala!
|
||||
|
||||
## Assignment
|
||||
|
||||
[Restyle your extension](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**: Dis document don translate wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make everything correct, abeg make you sabi say automatic translation fit get wahala or mistake. Di original document for im own language na im get di real correct tin. If na important information, better make professional human translation do am. We no go responsible for any yawa or wrong understanding wey fit happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b6897c02603d0045dd6d8256e8714baa",
|
||||
"translation_date": "2026-01-08T15:51:21+00:00",
|
||||
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Assignment: Restyle Your Browser Extension
|
||||
|
||||
## Overview
|
||||
|
||||
Now wey you don build di HTML structure for your carbon footprint browser extension, na time to make am fine to look and easy to use. Beta design dey improve user experience and e go make your extension dey more professional and interesting.
|
||||
|
||||
Your extension get basic CSS styling, but dis assignment go challenge you to create your own visual style wey go show your personal taste plus make sure e still easy to use.
|
||||
|
||||
## Instructions
|
||||
|
||||
### Part 1: Analyze the Current Design
|
||||
|
||||
Before you start to change am, look di CSS structure wey dey already:
|
||||
|
||||
1. **Locate** di CSS files inside your extension project
|
||||
2. **Review** di current styling way and color scheme
|
||||
3. **Identify** places wey fit improve for layout, typography, and visual hierarchy
|
||||
4. **Consider** how design dey support wetin user want (easy form fill and clear data show)
|
||||
|
||||
### Part 2: Design Your Custom Styling
|
||||
|
||||
Create one solid visual design wey go include:
|
||||
|
||||
**Color Scheme:**
|
||||
- Choose main color pallet wey go show environmental themes
|
||||
- Make sure di contrast reach well for accessibility (use tools like WebAIM's contrast checker)
|
||||
- Think about how colors go look for different browser themes
|
||||
|
||||
**Typography:**
|
||||
- Pick fonts wey easy to read wey go still fine for small extension size
|
||||
- Set clear hierarchy with correct font sizes and weights
|
||||
- Make sure text still dey clear for both light and dark browser themes
|
||||
|
||||
**Layout and Spacing:**
|
||||
- Improve how form elements and data display arrange for better look
|
||||
- Add correct padding and margins to make e easier to read
|
||||
- Think about responsive design principles wey fit different screen sizes
|
||||
|
||||
### Part 3: Implement Your Design
|
||||
|
||||
Change di CSS files to put your design for ground:
|
||||
|
||||
```css
|
||||
/* Example starting points for customization */
|
||||
|
||||
.form-data {
|
||||
/* Style the configuration form */
|
||||
background: /* your choice */;
|
||||
padding: /* your spacing */;
|
||||
border-radius: /* your preference */;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
/* Style the data display area */
|
||||
background: /* complementary color */;
|
||||
border: /* your border style */;
|
||||
margin: /* your spacing */;
|
||||
}
|
||||
|
||||
/* Add your custom styles here */
|
||||
```
|
||||
|
||||
**Key areas to style:**
|
||||
- **Form elements**: Input fields, labels, and submit button
|
||||
- **Results display**: Data container, text styling, and loading states
|
||||
- **Interactive elements**: Hover effects, button states, and transitions
|
||||
- **Overall layout**: Container spacing, background colors, and visual hierarchy
|
||||
|
||||
### Part 4: Test and Refine
|
||||
|
||||
1. **Build** your extension with `npm run build`
|
||||
2. **Load** di updated extension for your browser
|
||||
3. **Test** all visual states (form entry, loading, results display, errors)
|
||||
4. **Verify** accessibility using browser developer tools
|
||||
5. **Refine** your styles based on how e really perform
|
||||
|
||||
## Creative Challenges
|
||||
|
||||
### Basic Level
|
||||
- Change colors and fonts to create one solid theme
|
||||
- Improve spacing and alignment for the whole interface
|
||||
- Add soft hover effects to interactive parts
|
||||
|
||||
### Intermediate Level
|
||||
- Design custom icons or graphics for your extension
|
||||
- Make smooth transitions between different states
|
||||
- Create a unique loading animation for API calls
|
||||
|
||||
### Advanced Level
|
||||
- Design different themes (light/dark/high-contrast)
|
||||
- Make responsive design wey fit different browser window sizes
|
||||
- Add micro-interactions wey go improve user experience
|
||||
|
||||
## Submission Guidelines
|
||||
|
||||
Your finished assignment suppose include:
|
||||
|
||||
- **Modified CSS files** wey get your custom styling
|
||||
- **Screenshots** wey show your extension for different states (form, loading, results)
|
||||
- **Short description** (2-3 sentences) to explain your design choices and how dem make user experience better
|
||||
|
||||
## Assessment Rubric
|
||||
|
||||
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|
||||
|----------|---------------|----------------|----------------|----------------|
|
||||
| **Visual Design** | Creative, cohesive design wey go enhance usability and show strong design principles | Good design choices with consistent styling and clear visual hierarchy | Basic design improvements but get some consistency wahala | Small styling changes or inconsistent design |
|
||||
| **Functionality** | All styles dey work perfectly for different states and browser environments | Styles work well but get small issues for edge cases | Most styles dey work but get some display wahala | Big styling problems wey dey affect usability |
|
||||
| **Code Quality** | Clean, well-organized CSS with proper class names and efficient selectors | Good CSS structure with correct use of selectors and properties | Acceptable CSS but get some organization issues | Poor CSS structure or styling way too complex |
|
||||
| **Accessibility** | Excellent color contrast, readable fonts, and consideration for users with disabilities | Good accessibility practices but get small areas wey fit improve | Basic accessibility consideration but get some problems | Limited care for accessibility needs |
|
||||
|
||||
## Tips for Success
|
||||
|
||||
> 💡 **Design Tip**: Start with small changes and build to bigger styling. Small improvements for typography and spacing fit get big impact for how people feel about am.
|
||||
|
||||
**Best practices to follow:**
|
||||
- **Test** your extension for both light and dark browser themes
|
||||
- **Use** relative units (em, rem) to make am scalable
|
||||
- **Maintain** consistent spacing with CSS custom properties
|
||||
- **Consider** how your design go look for users with different visual needs
|
||||
- **Validate** your CSS to make sure e follow correct syntax
|
||||
|
||||
> ⚠️ **Common Mistake**: No sacrifice usability just to make am fine. Your extension suppose be both beautiful and functional.
|
||||
|
||||
**Remember to:**
|
||||
- **Keep** important information easy to read
|
||||
- **Make sure** buttons and interactive parts easy to click
|
||||
- **Maintain** clear visual feedback when user dey do action
|
||||
- **Test** your design with real data, no just placeholder text
|
||||
|
||||
Good luck for creating browser extension wey dey functional and fine to look!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg make you sabi say automated translations fit get some mistakes or wrong tins. The original document wey dey the correct language na the correct source. If na important tin, better make person wey sabi translate am do am. We no go take any blame if person no understand well or if mistake happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,664 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "2b6203a48c48d8234e0948353b47d84e",
|
||||
"translation_date": "2026-01-08T15:03:33+00:00",
|
||||
"source_file": "5-browser-extension/2-forms-browsers-local-storage/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Browser Extension Project Part 2: Call an API, use Local Storage
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your API Integration & Storage Journey
|
||||
section Foundation
|
||||
Setup DOM references: 3: Student
|
||||
Add event listeners: 4: Student
|
||||
Handle form submission: 4: Student
|
||||
section Data Management
|
||||
Implement local storage: 4: Student
|
||||
Build API calls: 5: Student
|
||||
Handle async operations: 5: Student
|
||||
section User Experience
|
||||
Add error handling: 5: Student
|
||||
Create loading states: 4: Student
|
||||
Polish interactions: 5: Student
|
||||
```
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/25)
|
||||
|
||||
## Introduction
|
||||
|
||||
Remember dat browser extension wey you start build? Right now you get one beta form wey fine, but e just dey static. Today we go make am come alive by connect am to real data and give am memory.
|
||||
|
||||
Think about di Apollo mission control computers - dem no just dey show fixed information. Dem dey always relate wit spacecrafts, dey update wit telemetry data, and dem dey remember important mission parameters. Na dis kain dynamic behavior we dey build today. Your extension go reach out to internet, gather real environmental data, and remember your settings for next time.
|
||||
|
||||
API integration fit sound hard, but na just teaching your code how e go yan wit other services be dat. Whether you dey fetch weather data, social media feeds, or carbon footprint info like we go do today, na all about to make dis digital connections. We go also explore how browsers fit keep information - like how libraries take use card catalogs to remember where book dem dey.
|
||||
|
||||
By di end of dis lesson, you go get browser extension wey dey fetch real data, dey store user preferences, and dey provide smooth experience. Make we begin!
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Dynamic Extensions))
|
||||
DOM Manipulation
|
||||
Element Selection
|
||||
Event Handling
|
||||
State Management
|
||||
UI Updates
|
||||
Local Storage
|
||||
Data Persistence
|
||||
Key-Value Pairs
|
||||
Session Management
|
||||
User Preferences
|
||||
API Integration
|
||||
HTTP Requests
|
||||
Authentication
|
||||
Data Parsing
|
||||
Error Handling
|
||||
Async Programming
|
||||
Promises
|
||||
Async/Await
|
||||
Error Catching
|
||||
Non-blocking Code
|
||||
User Experience
|
||||
Loading States
|
||||
Error Messages
|
||||
Smooth Transitions
|
||||
Data Validation
|
||||
```
|
||||
✅ Follow di numbered segments for di correct files to sabi where to put your code
|
||||
|
||||
## Set up the elements to manipulate for di extension
|
||||
|
||||
Before your JavaScript fit manipulate di interface, e need references to specific HTML elements. Think am like telescope wey e need point for certain stars - before Galileo fit study Jupiter moons, e gats locate and focus for Jupiter itself.
|
||||
|
||||
For your `index.js` file, we go create `const` variables wey go capture references to every important form element. Dis one be like how scientists dey label their equipment - instead to dey find everywhere for di laboratory every time, dem fit just access wetin dem need straight.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[JavaScript Code] --> B[document.querySelector]
|
||||
B --> C[CSS Selectors]
|
||||
C --> D[HTML Elements]
|
||||
|
||||
D --> E[".form-data"]
|
||||
D --> F[".region-name"]
|
||||
D --> G[".api-key"]
|
||||
D --> H[".loading"]
|
||||
D --> I[".errors"]
|
||||
D --> J[".result-container"]
|
||||
|
||||
E --> K[Form Element]
|
||||
F --> L[Input Field]
|
||||
G --> M[Input Field]
|
||||
H --> N[UI Element]
|
||||
I --> O[UI Element]
|
||||
J --> P[UI Element]
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#e8f5e8
|
||||
style K fill:#fff3e0
|
||||
style L fill:#fff3e0
|
||||
style M fill:#fff3e0
|
||||
```
|
||||
```javascript
|
||||
// form filds
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// resalts
|
||||
const errors = document.querySelector('.errors');
|
||||
const loading = document.querySelector('.loading');
|
||||
const results = document.querySelector('.result-container');
|
||||
const usage = document.querySelector('.carbon-usage');
|
||||
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||
const myregion = document.querySelector('.my-region');
|
||||
const clearBtn = document.querySelector('.clear-btn');
|
||||
```
|
||||
|
||||
**Na wetin dis code dey do:**
|
||||
- **Captures** form elements using `document.querySelector()` wit CSS class selectors
|
||||
- **Creates** references to input fields for di region name and API key
|
||||
- **Establishes** connections to result display elements for carbon usage data
|
||||
- **Sets up** access to UI elements like loading indicators and error messages
|
||||
- **Stores** each element reference inside `const` variable to make am easy to use everywhere for your code
|
||||
|
||||
## Add event listeners
|
||||
|
||||
Now we go make your extension respond to wetin user dey do. Event listeners na how your code dey monitor user actions. Think dem like telephone operators wey dey early exchanges - dem dey listen for incoming calls then dem go connect di correct circuits when pesin want make connection.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant Form
|
||||
participant JavaScript
|
||||
participant API
|
||||
participant Storage
|
||||
|
||||
User->>Form: Dey fill region/API key
|
||||
User->>Form: Click submit
|
||||
Form->>JavaScript: Trigger submit event
|
||||
JavaScript->>JavaScript: handleSubmit(e)
|
||||
JavaScript->>Storage: Save user preferences
|
||||
JavaScript->>API: Fetch carbon data
|
||||
API->>JavaScript: Returns data
|
||||
JavaScript->>Form: Update UI wit results
|
||||
|
||||
User->>Form: Click clear button
|
||||
Form->>JavaScript: Trigger click event
|
||||
JavaScript->>Storage: Clear saved data
|
||||
JavaScript->>Form: Reset go initial state
|
||||
```
|
||||
```javascript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
**Make you sabi dis concepts:**
|
||||
- **Attaches** submit listener to form wey go trigger when users press Enter or click submit
|
||||
- **Connects** click listener to clear button to reset form
|
||||
- **Passes** di event object `(e)` to handler functions for extra control
|
||||
- **Calls** di `init()` function immediately to arrange initial setup of your extension
|
||||
|
||||
✅ Note di shorthand arrow function syntax wey dey used for here. Dis modern JavaScript way dey clean pass old school function expression, but both still dey work well!
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Event Handling Understanding**: Before you start initialization, make sure say you fit:
|
||||
- ✅ Explain how `addEventListener` dey connect user actions to JavaScript functions
|
||||
- ✅ Understand why we dey pass event object `(e)` to handler functions
|
||||
- ✅ Know difference between `submit` and `click` events
|
||||
- ✅ Describe when `init()` function go run and why
|
||||
|
||||
**Quick Self-Test**: Wetin go happen if you forget `e.preventDefault()` when form submit?
|
||||
*Answer: The page go reload, all JavaScript state go lost, and user experience go stop*
|
||||
|
||||
## Build di initialization and reset functions
|
||||
|
||||
Make we write the initialization logic for your extension. Di `init()` function na like ship navigation system wey dey check instruments - e dey find current state and change interface based on dat. E dey check if pesin don use your extension before and e load their previous settings.
|
||||
|
||||
Di `reset()` function na to give users fresh start - like how scientists dey reset instruments between experiments to get clean data.
|
||||
|
||||
```javascript
|
||||
function init() {
|
||||
// Check if user don save API credentials before
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
// Set extension icon to general green (placeholder for next lesson)
|
||||
// TODO: Make icon update for next lesson
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
// First-time user: show di setup form
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
// Returning user: load dia saved data automatically
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
// Clear stored region make user fit pick new location
|
||||
localStorage.removeItem('regionName');
|
||||
// Restart di initialization process
|
||||
init();
|
||||
}
|
||||
```
|
||||
|
||||
**Wetin dey happen here:**
|
||||
- **Retrieves** stored API key and region from browser local storage
|
||||
- **Checks** if na first-time user (no stored credentials) or na returning user
|
||||
- **Shows** setup form for new users and hide other interface elements
|
||||
- **Loads** saved data automatically for returning users and shows reset option
|
||||
- **Manages** user interface state based on data wey available
|
||||
|
||||
**Key tori about Local Storage:**
|
||||
- **Persists** data between browser sessions (no be like session storage)
|
||||
- **Stores** data as key-value pairs using `getItem()` and `setItem()`
|
||||
- **Returns** `null` if no data dey for di key
|
||||
- **Provides** simple way to remember user preferences and settings
|
||||
|
||||
> 💡 **Understanding Browser Storage**: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) na like to give your extension persistent memory. Think how ancient Library of Alexandria dey store scrolls - information still dey available even if scholars comot then come back.
|
||||
>
|
||||
> **Main tori be:**
|
||||
> - **Persists** data even after you close your browser
|
||||
> - **Survives** computer restart and browser crash
|
||||
> - **Provides** big storage space for user preferences
|
||||
> - **Offers** quick access without network wahala
|
||||
|
||||
> **Important Note**: Your browser extension get im own isolated local storage wey separate from normal web pages. Dis one dey keep am secure and prevent conflict wit other websites.
|
||||
|
||||
You fit see your stored data by opening browser Developer Tools (F12), go **Application** tab, then expand **Local Storage** section.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> CheckStorage: Extension start
|
||||
CheckStorage --> FirstTime: No data wey dem store
|
||||
CheckStorage --> Returning: Data dey
|
||||
|
||||
FirstTime --> ShowForm: Show setup form
|
||||
ShowForm --> UserInput: User dey put data
|
||||
UserInput --> SaveData: Store for localStorage
|
||||
SaveData --> FetchAPI: Collect carbon data
|
||||
|
||||
Returning --> LoadData: Read from localStorage
|
||||
LoadData --> FetchAPI: Collect carbon data
|
||||
|
||||
FetchAPI --> ShowResults: Show data
|
||||
ShowResults --> UserAction: User dey interact
|
||||
|
||||
UserAction --> Reset: Clear button click
|
||||
UserAction --> ShowResults: See data
|
||||
|
||||
Reset --> ClearStorage: Remove saved data
|
||||
ClearStorage --> FirstTime: Come back to setup
|
||||
```
|
||||
|
||||
|
||||
> ⚠️ **Security Consideration**: For production apps, to store API keys for LocalStorage fit cause security risks since JavaScript fit access dis data. For learning, dis way good, but real apps suppose use secure server-side storage for sensitive credentials.
|
||||
|
||||
## Handle form submission
|
||||
|
||||
Now make we manage wetin dey happen when pesin submit your form. By default, browsers dey reload page when forms submit, but we go stop dis to make experience smooth.
|
||||
|
||||
Dis one be like how mission control dey handle spacecraft communication - no be to reset everything for each time, dem just dey run continuously while dem dey process new info.
|
||||
|
||||
Make a function wey go capture form submission event and collect wetin user put:
|
||||
|
||||
```javascript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
|
||||
**For di code above, we:**
|
||||
- **Prevents** default form submission wey go refresh page
|
||||
- **Extracts** user input from API key and region fields
|
||||
- **Passes** form data go `setUpUser()` function for processing
|
||||
- **Maintains** single-page app behavior by no reload page
|
||||
|
||||
✅ Remember say your HTML form fields get `required` attribute, so browser go check say user put both API key and region before dis function go run.
|
||||
|
||||
## Set up user preferences
|
||||
|
||||
Di `setUpUser` function dey responsible to save user credentials and to start di first API call. Dis one na to make smooth transition from setup to showing results.
|
||||
|
||||
```javascript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
// Save di user credentials for future sessions
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
|
||||
// Update UI to show say e dey load
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
|
||||
// Fetch carbon usage data wit di user's credentials
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
|
||||
**Step by step, wetin dey happen:**
|
||||
- **Saves** API key and region name for local storage to use for future
|
||||
- **Shows** loading indicator to tell user say data dey fetch
|
||||
- **Clears** any error messages wey dey before
|
||||
- **Reveals** clear button make users fit reset their settings later
|
||||
- **Starts** API call to fetch real carbon usage data
|
||||
|
||||
Dis function dey create smooth user experience by dey manage both data persistence and UI update for one go.
|
||||
|
||||
## Display carbon usage data
|
||||
|
||||
Now we go connect your extension to outside data sources through APIs. Dis one go turn your extension from standalone tool to something wey fit access real-time info from internet.
|
||||
|
||||
**Understanding APIs**
|
||||
|
||||
[APIs](https://www.webopedia.com/TERM/A/API.html) na how different apps dey yan to each other. Think am like telegraph system wey connect far towns for 19th century - operators go send requests to far stations and receive answers wit requested info. Anytime you check social media, ask voice assistant question, or use delivery app, na APIs dey facilitate dis data exchange.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Your Extension] --> B[HTTP Request]
|
||||
B --> C[CO2 Signal API]
|
||||
C --> D{Valid Request?}
|
||||
D -->|Yes| E[Query Database]
|
||||
D -->|No| F[Return Error]
|
||||
E --> G[Carbon Data]
|
||||
G --> H[JSON Response]
|
||||
H --> I[Your Extension]
|
||||
F --> I
|
||||
I --> J[Update UI]
|
||||
|
||||
subgraph "API Request"
|
||||
K[Headers: auth-token]
|
||||
L[Parameters: countryCode]
|
||||
M[Method: GET]
|
||||
end
|
||||
|
||||
subgraph "API Response"
|
||||
N[Carbon Intensity]
|
||||
O[Fossil Fuel %]
|
||||
P[Timestamp]
|
||||
end
|
||||
|
||||
style C fill:#e8f5e8
|
||||
style G fill:#fff3e0
|
||||
style I fill:#e1f5fe
|
||||
```
|
||||
**Key tori about REST APIs:**
|
||||
- **REST** mean 'Representational State Transfer'
|
||||
- **Uses** standard HTTP methods (GET, POST, PUT, DELETE) to waka wit data
|
||||
- **Returns** data for predictable formats, mostly JSON
|
||||
- **Provides** steady, URL-based endpoints for different requests
|
||||
|
||||
✅ Di [CO2 Signal API](https://www.co2signal.com/) wey we go use dey supply real-time carbon intensity data from electrical grids worldwide. Dis one dey help users understand how dem electricity use dey affect environment!
|
||||
|
||||
> 💡 **Understanding Asynchronous JavaScript**: Di [`async` keyword](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) make your code fit do many operations at once. When you dey request data from server, you no want say your whole extension go hang - dat one go be like air traffic control stop all work as e dey wait for one plane.
|
||||
|
||||
>
|
||||
> **Key benefits:**
|
||||
> - **Keep** extension dey respond while data dey load
|
||||
> - **Allow** other code to continue during network requests
|
||||
> - **Make** code easy to read pass old callback style
|
||||
> - **Help** handle errors well during network waka
|
||||
|
||||
Here be quick video about `async`:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
|
||||
|
||||
> 🎥 Click di picture on top for video about async/await.
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Async Programming Understanding**: Before you start API function, make sure say you sabi:
|
||||
- ✅ Why we dey use `async/await` no be to block di whole extension
|
||||
- ✅ How `try/catch` dey handle network wahala well
|
||||
- ✅ Difference between synchronous and asynchronous operations
|
||||
- ✅ Why API calls fit fail and how to manage dis failures
|
||||
|
||||
**Real-World Connection**: Think about dis async examples:
|
||||
- **Ordering food**: You no just dey wait for kitchen - you get receipt then continue other things
|
||||
- **Sending emails**: Your email app no freeze while sending - you fit write more emails
|
||||
- **Loading web pages**: Images dey load slow-slow while you fit already read text
|
||||
|
||||
**API Authentication Flow**:
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Ext as Extension
|
||||
participant API as CO2 Signal API
|
||||
participant DB as Database
|
||||
|
||||
Ext->>API: Request wit auth-token
|
||||
API->>API: Validate token
|
||||
API->>DB: Query carbon data
|
||||
DB->>API: Return data
|
||||
API->>Ext: JSON response
|
||||
Ext->>Ext: Update UI
|
||||
```
|
||||
Make function to fetch and show carbon usage data:
|
||||
|
||||
```javascript
|
||||
// Modern fetch API way (no need external dependencies)
|
||||
async function displayCarbonUsage(apiKey, region) {
|
||||
try {
|
||||
// Fetch carbon intensity data from CO2 Signal API
|
||||
const response = await fetch('https://api.co2signal.com/v1/latest', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'auth-token': apiKey,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
// Add query parameters for the particular region
|
||||
...new URLSearchParams({ countryCode: region }) && {
|
||||
url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
|
||||
}
|
||||
});
|
||||
|
||||
// Check if the API request dey successful
|
||||
if (!response.ok) {
|
||||
throw new Error(`API request failed: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const carbonData = data.data;
|
||||
|
||||
// Calculate rounded carbon intensity value
|
||||
const carbonIntensity = Math.round(carbonData.carbonIntensity);
|
||||
|
||||
// Update the user interface with di fetched data
|
||||
loading.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
myregion.textContent = region.toUpperCase();
|
||||
usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
|
||||
fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
|
||||
results.style.display = 'block';
|
||||
|
||||
// TODO: calculateColor(carbonIntensity) - go implement am for next lesson
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching carbon data:', error);
|
||||
|
||||
// Show user-friendly error message
|
||||
loading.style.display = 'none';
|
||||
results.style.display = 'none';
|
||||
errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Wetin dey happen here:**
|
||||
- **Uses** modern `fetch()` API no use external libraries like Axios make code clean and no need dependencies
|
||||
- **Implements** correct error checking with `response.ok` to catch API failure quick
|
||||
- **Handles** async operation with `async/await` make code easy to read
|
||||
- **Authenticates** wit CO2 Signal API using `auth-token` header
|
||||
- **Parses** JSON data and take carbon intensity info
|
||||
- **Updates** many UI elements wit formatted environment data
|
||||
- **Shows** user-friendly error messages when API call fail
|
||||
|
||||
**Key modern JavaScript tori wey e show:**
|
||||
- **Template literals** wit `${}` syntax to format strings cleanly
|
||||
- **Error handling** wit try/catch block for robust apps
|
||||
- **Async/await** pattern to handle network requests well
|
||||
- **Object destructuring** to take specific data from API response
|
||||
- **Method chaining** to do many DOM changes smooth
|
||||
|
||||
✅ Dis function dey show many important web dev skills - how to talk wit server, handle authentication, process data, update interface, and manage error well. Dis na core skill wey pro developers dey use every day.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Stat API Call] --> B[Fetch Request]
|
||||
B --> C{Network Success?}
|
||||
C -->|No| D[Network Wahala]
|
||||
C -->|Yes| E{Response OK?}
|
||||
E -->|No| F[API Wahala]
|
||||
E -->|Yes| G[Parse JSON]
|
||||
G --> H{Valid Data?}
|
||||
H -->|No| I[Data Wahala]
|
||||
H -->|Yes| J[Update UI]
|
||||
|
||||
D --> K[Show Error Message]
|
||||
F --> K
|
||||
I --> K
|
||||
J --> L[Hide Loading]
|
||||
K --> L
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style J fill:#e8f5e8
|
||||
style K fill:#ffebee
|
||||
style L fill:#f3e5f5
|
||||
```
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Complete System Understanding**: Make sure you sabi full flow:
|
||||
- ✅ How DOM references help JavaScript control interface
|
||||
- ✅ Why local storage dey create persistence between browser session
|
||||
- ✅ How async/await dey make API calls without freeze extension
|
||||
- ✅ Wetin happen if API call fail and how to handle errors
|
||||
- ✅ Why user experience get loading states and error messages
|
||||
|
||||
🎉 **Wetin you don do:** You don create browser extension wey:
|
||||
- **Connects** to internet and get real environmental data
|
||||
- **Persists** user settings between sessions
|
||||
- **Handles** errors well no be to crash
|
||||
- **Provides** smooth and professional user experience
|
||||
|
||||
Test your work by running `npm run build` and refresh your extension for browser. Now you get working carbon footprint tracker. Next lesson go add dynamic icon functionality to complete di extension.
|
||||
|
||||
---
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use Agent mode to complete dis challenge:
|
||||
**Description:** Make the browser extension beta by adding beta beta for error handling and better user experience features. This challenge go help you sabi how to work with APIs, local storage, and DOM manipulation using modern JavaScript style.
|
||||
|
||||
**Prompt:** Create better version of displayCarbonUsage function wey get: 1) Retry mechanism for API call wey fail with exponential backoff, 2) Check make sure say region code correct before you call API, 3) Loading animation with progress signs, 4) Cache API responses for localStorage with expiry time (cache for 30 minutes), and 5) Show historical data from previous API calls. Add correct TypeScript-style JSDoc comments to explain all function parameters and return types.
|
||||
|
||||
Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Make your understanding of APIs big by exploring beta beta browser-based APIs wey dey for web development. Choose one browser API and build small demonstration:
|
||||
|
||||
- [Geolocation API](https://developer.mozilla.org/docs/Web/API/Geolocation_API) - Get user current location
|
||||
- [Notification API](https://developer.mozilla.org/docs/Web/API/Notifications_API) - Send desktop notifications
|
||||
- [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) - Create interactive drag interfaces
|
||||
- [Web Storage API](https://developer.mozilla.org/docs/Web/API/Web_Storage_API) - Advanced local storage techniques
|
||||
- [Fetch API](https://developer.mozilla.org/docs/Web/API/Fetch_API) - Modern alternative to XMLHttpRequest
|
||||
|
||||
**Research questions to consider:**
|
||||
- Wetin real-world problem dis API fit solve?
|
||||
- How API dey handle errors and edge cases?
|
||||
- Wetin be security things wey you for sabi when you dey use dis API?
|
||||
- How many browsers dey support dis API?
|
||||
|
||||
After your research, find out wetin make API developer-friendly and reliable.
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/26)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
You don learn about LocalStorage and APIs for this lesson, both very useful for professional web developer. Fit you think how these two things go work together? Think how you go plan web site wey go save things for API use.
|
||||
|
||||
### ⚡ **Wetyn You Fit Do for Next 5 Minutes**
|
||||
- [ ] Open DevTools Application tab and check localStorage for any website
|
||||
- [ ] Create simple HTML form and test form validation for browser
|
||||
- [ ] Try save and collect data using localStorage for browser console
|
||||
- [ ] Check form data wey dey submit using Network tab
|
||||
|
||||
### 🎯 **Wetyn You Fit Finish This Hour**
|
||||
- [ ] Finish post-lesson quiz and understand form handling ideas
|
||||
- [ ] Build browser extension form wey go save user preferences
|
||||
- [ ] Make client-side form validation with correct error messages
|
||||
- [ ] Practice using chrome.storage API for extension data saving
|
||||
- [ ] Create user interface wey respond to saved user settings
|
||||
|
||||
### 📅 **Your Week-Long Extension Building**
|
||||
- [ ] Finish full browser extension with form function
|
||||
- [ ] Master different storage ways: local, sync, and session storage
|
||||
- [ ] Add advanced form features like autocomplete and validation
|
||||
- [ ] Add import/export function for user data
|
||||
- [ ] Test your extension well well across different browsers
|
||||
- [ ] Make your extension user experience and error handling beta
|
||||
|
||||
### 🌟 **Your Month-Long Web API Mastery**
|
||||
- [ ] Build complex app using different browser storage APIs
|
||||
- [ ] Learn offline-first development pattern
|
||||
- [ ] Contribute to open source projects about data saving
|
||||
- [ ] Master privacy-focused development and GDPR compliance
|
||||
- [ ] Create reusable libraries for form handling and data management
|
||||
- [ ] Share knowledge about web APIs and extension development
|
||||
|
||||
## 🎯 Your Extension Development Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title API Integration & Storage Learning Progression
|
||||
|
||||
section DOM Fundamentals (15 minutes)
|
||||
Element References: querySelector mastery
|
||||
: Event listener setup
|
||||
: State management basics
|
||||
|
||||
section Local Storage (20 minutes)
|
||||
Data Persistence: Key-value storage
|
||||
: Session management
|
||||
: User preference handling
|
||||
: Storage inspection tools
|
||||
|
||||
section Form Handling (25 minutes)
|
||||
User Input: Form validation
|
||||
: Event prevention
|
||||
: Data extraction
|
||||
: UI state transitions
|
||||
|
||||
section API Integration (35 minutes)
|
||||
External Communication: HTTP requests
|
||||
: Authentication patterns
|
||||
: JSON data parsing
|
||||
: Response handling
|
||||
|
||||
section Async Programming (40 minutes)
|
||||
Modern JavaScript: Promise handling
|
||||
: Async/await patterns
|
||||
: Error management
|
||||
: Non-blocking operations
|
||||
|
||||
section Error Handling (30 minutes)
|
||||
Robust Applications: Try/catch blocks
|
||||
: User-friendly messages
|
||||
: Graceful degradation
|
||||
: Debugging techniques
|
||||
|
||||
section Advanced Patterns (1 week)
|
||||
Professional Development: Caching strategies
|
||||
: Rate limiting
|
||||
: Retry mechanisms
|
||||
: Performance optimization
|
||||
|
||||
section Production Skills (1 month)
|
||||
Enterprise Features: Security best practices
|
||||
: API versioning
|
||||
: Monitoring & logging
|
||||
: Scalable architecture
|
||||
```
|
||||
### 🛠️ Your Full-Stack Development Toolkit Summary
|
||||
|
||||
After you finish this lesson, you now get:
|
||||
- **DOM Mastery**: Sharp element targeting and manipulation
|
||||
- **Storage Expertise**: Persistent data management with localStorage
|
||||
- **API Integration**: Real-time data fetching and authentication
|
||||
- **Async Programming**: Non-blocking work with modern JavaScript
|
||||
- **Error Handling**: Strong apps wey fit handle failure well
|
||||
- **User Experience**: Loading states, validation, and smooth interactions
|
||||
- **Modern Patterns**: fetch API, async/await, and ES6+ features
|
||||
|
||||
**Professional Skills We You Fit Get**: You don use patterns for:
|
||||
- **Web Applications**: Single-page apps with external data sources
|
||||
- **Mobile Development**: API-driven app with offline abilities
|
||||
- **Desktop Software**: Electron apps with persistent storage
|
||||
- **Enterprise Systems**: Authentication, caching, and error handling
|
||||
- **Modern Frameworks**: React/Vue/Angular data management patterns
|
||||
|
||||
**Next Level**: You don ready to explore advanced topics like caching strategies, real-time WebSocket connections, or complex state management!
|
||||
|
||||
## Assignment
|
||||
|
||||
[Adopt an API](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e correct, abeg remember say automatic translation fit get some mistake or no too correct. Di original document wey e dey for im own language na di correct one wey you suppose trust. For important information, na professional human translation dem recommend. We no go responsible if person misunderstand or misinterpret anything wey come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "25b8d28b8531352d4eb67291fd7824c4",
|
||||
"translation_date": "2026-01-08T15:16:07+00:00",
|
||||
"source_file": "5-browser-extension/2-forms-browsers-local-storage/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# 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](https://github.com/public-apis/public-apis). Think about these categories:
|
||||
|
||||
**Popular options for beginners:**
|
||||
- **Entertainment**: [Dog CEO API](https://dog.ceo/dog-api/) for random dog pictures
|
||||
- **Weather**: [OpenWeatherMap](https://openweathermap.org/api) for current weather data
|
||||
- **Quotes**: [Quotable API](https://quotable.io/) for inspirational quotes
|
||||
- **News**: [NewsAPI](https://newsapi.org/) for current headlines
|
||||
- **Fun Facts**: [Numbers API](http://numbersapi.com/) for interesting number facts
|
||||
|
||||
### 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
|
||||
|
||||
- [Browser Extension Documentation](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions)
|
||||
- [Fetch API Guide](https://developer.mozilla.org/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [Local Storage Tutorial](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
|
||||
- [JSON Parsing and Handling](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON)
|
||||
|
||||
Make you enjoy build beta and creative tin! 🚀
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/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.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,596 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
|
||||
"translation_date": "2026-01-08T15:19:44+00:00",
|
||||
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Browser Extension Project Part 3: Learn about Background Tasks and Performance
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Performance Optimization Journey
|
||||
section Foundation
|
||||
Learn browser tools: 3: Student
|
||||
Understand profiling: 4: Student
|
||||
Identify bottlenecks: 4: Student
|
||||
section Extension Features
|
||||
Build color system: 4: Student
|
||||
Create background tasks: 5: Student
|
||||
Update icons dynamically: 5: Student
|
||||
section Optimization
|
||||
Monitor performance: 5: Student
|
||||
Debug issues: 4: Student
|
||||
Polish experience: 5: Student
|
||||
```
|
||||
You don waka ever wonder why some browser extensions dey feel sharp and responsive while others dey slow slow? Di koko na wetin dey happen for background. As users dey click tins for your extension interface, e get plenty background processes wey dey quietly manage data fetching, icon updates, and system resources.
|
||||
|
||||
Dis na di last lesson for di browser extension series, and we go make your carbon footprint tracker work smooth. You go add dynamic icon updates and learn how to see performance wahala before e become problem. E dey like tuning race car - small tinkerings fit make big difference for how everything dey run.
|
||||
|
||||
By di time we finish, you go get polished extension and sabi di performance principles wey separate good web apps from better ones. Make we dive enter di world of browser optimization.
|
||||
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/27)
|
||||
|
||||
### Introduction
|
||||
|
||||
For our previous lessons, you don build form, connect am to API, and handle asynchronous data fetching. Your extension dey form well.
|
||||
|
||||
Now we need to add di last touches - like making di extension icon change color based on di carbon data. Dis remind me how NASA for optimize every system for Apollo spacecraft. Dem no fit waste any cycles or memory because lives depend on performance. Even tho our browser extension no too critical like dat, di same principles still dey apply - efficient code dey make better user experiences.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Performance & Background Tasks))
|
||||
Browser Performance
|
||||
Rendering Pipeline
|
||||
Asset Optimization
|
||||
DOM Manipulation
|
||||
JavaScript Execution
|
||||
Profiling Tools
|
||||
Developer Tools
|
||||
Performance Tab
|
||||
Timeline Analysis
|
||||
Bottleneck Detection
|
||||
Extension Architecture
|
||||
Background Scripts
|
||||
Content Scripts
|
||||
Message Passing
|
||||
Icon Management
|
||||
Optimization Strategies
|
||||
Code Splitting
|
||||
Lazy Loading
|
||||
Caching
|
||||
Resource Compression
|
||||
Visual Feedback
|
||||
Dynamic Icons
|
||||
Color Coding
|
||||
Real-time Updates
|
||||
User Experience
|
||||
```
|
||||
## Web Performance Basics
|
||||
|
||||
When your code dey run efficiently, people fit *feel* di difference. You sabi dat moment when page load straight-away or animation flow smooth? Na good performance dey work.
|
||||
|
||||
Performance no be only about speed - e mean say web experiences go dey natural and no go be clunky or frustrating. For early days of computing, Grace Hopper hold nanosecond (wire wey about one foot long) for her desk to show how far light fit travel inside one billionth of second. That na her way to explain why every microsecond matter for computing. Make we explore the detective tools wey fit help you see wetin dey slow things down.
|
||||
|
||||
> "Website performance na about two tins: how fast di page load, and how fast di code for am dey run." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
Di topic on how to make your websites dey blazing fast for all kain devices, all kain users, and all kain situations, e big. Here some points to keep for mind as you dey build standard web project or browser extension.
|
||||
|
||||
Di first step for optimizing your site na to sabi wetin really dey happen under di hood. Luckily, your browser get powerful detective tools inside.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[HTML] --> B[Parse]
|
||||
B --> C[DOM Tree]
|
||||
D[CSS] --> E[Parse]
|
||||
E --> F[CSSOM]
|
||||
G[JavaScript] --> H[Execute]
|
||||
|
||||
C --> I[Render Tree]
|
||||
F --> I
|
||||
H --> I
|
||||
|
||||
I --> J[Layout]
|
||||
J --> K[Paint]
|
||||
K --> L[Composite]
|
||||
L --> M[Display]
|
||||
|
||||
subgraph "Critical Rendering Path"
|
||||
N["1. Parse HTML"]
|
||||
O["2. Parse CSS"]
|
||||
P["3. Run JS"]
|
||||
Q["4. Build Render Tree"]
|
||||
R["5. Arrange Elements"]
|
||||
S["6. Paint Pixels"]
|
||||
T["7. Join Layers"]
|
||||
end
|
||||
|
||||
style M fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
style H fill:#ffebee
|
||||
```
|
||||
To open Developer Tools for Edge, click di three dots for top right corner, then go More Tools > Developer Tools. Or you fit use keyboard shortcut: `Ctrl` + `Shift` + `I` for Windows or `Option` + `Command` + `I` for Mac. Once you dey there, click Performance tab - na there you go do your investigation.
|
||||
|
||||
**Here your performance detective toolkit:**
|
||||
- **Open** Developer Tools (you go dey use am well well as developer!)
|
||||
- **Go** Performance tab - think am like your web app fitness tracker
|
||||
- **Press** that Record button and watch your page dey do tins
|
||||
- **Check** di results to see wetin dey slow things down
|
||||
|
||||
Make we try am. Open website (Microsoft.com good for this) and click 'Record' button. Now refresh di page and watch di profiler record everything wey dey happen. When you stop recording, you go see detailed breakdown of how browser 'scripts', 'renders', and 'paints' di site. E dey remind me how mission control dey monitor every system during rocket launch - you go get real-time data on exactly wetin dey happen and when.
|
||||
|
||||
|
||||
|
||||
✅ Di [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) get plenty details if you wan deep dive
|
||||
|
||||
> Pro tip: Clear your browser cache before testing to see how your site perform for first-time visitors - e normally different from repeat visits!
|
||||
|
||||
Select elements for profile timeline to zoom on events wey happen while your page dey load.
|
||||
|
||||
Get snapshot of your page performance by selecting part of profile timeline and look summary pane:
|
||||
|
||||
|
||||
|
||||
Check Event Log pane to see if any event carry pass 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Get to sabi your profiler! Open developer tools for this site and check if any bottlenecks dey. Wetin be slowest-loading asset? Di fastest?
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A[Open DevTools] --> B[Go to Performance Tab]
|
||||
B --> C[Click Record Button]
|
||||
C --> D[Do Actions]
|
||||
D --> E[Stop Recording]
|
||||
E --> F{Analyze Results}
|
||||
|
||||
F --> G[Check Timeline]
|
||||
F --> H[Review Network]
|
||||
F --> I[Look Scripts]
|
||||
F --> J[Find Paint Events]
|
||||
|
||||
G --> K{Long Tasks?}
|
||||
H --> L{Big Assets?}
|
||||
I --> M{Render Blocking?}
|
||||
J --> N{Expensive Paints?}
|
||||
|
||||
K -->|Yes| O[Make JavaScript Better]
|
||||
L -->|Yes| P[Compress Assets]
|
||||
M -->|Yes| Q[Add Async/Defer]
|
||||
N -->|Yes| R[Make Styles Simple]
|
||||
|
||||
O --> S[Test Again]
|
||||
P --> S
|
||||
Q --> S
|
||||
R --> S
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style F fill:#fff3e0
|
||||
style S fill:#e8f5e8
|
||||
```
|
||||
## Wetin to Look For When Profiling
|
||||
|
||||
Running profiler na only di beginning - di real skill na to sabi wetin those colorful charts dey tell you. No worry, you go sabi how to read dem. Experienced developers don learn how to spot warning signs before e turn big problem.
|
||||
|
||||
Make we talk about usual suspects - di performance wahala wey fit sneak inside web projects. Like how Marie Curie dey monitor radiation level well for her lab, we need to dey watch some patterns wey fit mean trouble. Catch am early to save you (and your users) plenty frustration.
|
||||
|
||||
**Asset sizes**: Websites don dey "heavy" over di years, and extra weight mostly come from images. E be like say we dey pack more tins for our digital suitcase.
|
||||
|
||||
✅ Check [Internet Archive](https://httparchive.org/reports/page-weight) to see how page sizes don grow - e dey very revealing.
|
||||
|
||||
**How keep your assets optimized:**
|
||||
- **Compress** images! Modern format like WebP fit reduce file sizes well well
|
||||
- **Serve** correct image size for each device - no need send big desktop images to phone dem
|
||||
- **Minify** your CSS and JavaScript - every byte matter
|
||||
- **Use** lazy loading so images go download only when users scroll come them
|
||||
|
||||
**DOM traversals**: Browser go build Document Object Model from di code you write, so na better page performance to keep your tags small, use and style only wetin di page need. Extra CSS for page fit need optimize; styles wey only need for one page no need to join main style sheet.
|
||||
|
||||
**Key strategies for DOM optimization:**
|
||||
- **Minimizes** number of HTML elements and nesting levels
|
||||
- **Removes** CSS rules wey no dey used and join stylesheets well well
|
||||
- **Organizes** CSS to load only wetin needed for each page
|
||||
- **Structures** HTML semantically so browser fit parse better
|
||||
|
||||
**JavaScript**: Every JavaScript developer suppose watch for 'render-blocking' scripts wey suppose load before di rest of DOM fit traverse and render. Try use `defer` with your inline scripts (like we do for Terrarium module).
|
||||
|
||||
**Modern JavaScript optimization techniques:**
|
||||
- **Uses** `defer` attribute to load scripts after DOM parsing
|
||||
- **Implements** code splitting to load only JavaScript wey necessary
|
||||
- **Applies** lazy loading for non-critical work
|
||||
- **Minimizes** use of heavy libraries and frameworks when fit
|
||||
|
||||
✅ Try some sites for [Site Speed Test website](https://www.webpagetest.org/) to learn common checks wey dem do to know site performance.
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Performance Understanding**: Before you build extension features, make sure you fit:
|
||||
- ✅ Explain critical rendering path from HTML go pixels
|
||||
- ✅ Identify common performance bottlenecks for web apps
|
||||
- ✅ Use browser developer tools to profile page performance
|
||||
- ✅ Understand how asset size and DOM complexity dey affect speed
|
||||
|
||||
**Quick Self-Test**: Wetin happen if you get render-blocking JavaScript?
|
||||
*Answer: Browser must download and run di script before e fit continue parsing HTML and render di page*
|
||||
|
||||
**Real-World Performance Impact**:
|
||||
- **100ms delay**: Users go notice slowdown
|
||||
- **1 second delay**: Users begin lose focus
|
||||
- **3+ seconds**: 40% users go comot page
|
||||
- **Mobile networks**: Performance dey even more important
|
||||
|
||||
Now say you get idea how browser dey render di assets you send am, make we see last tins you need do to complete your extension:
|
||||
|
||||
### Create a function to calculate color
|
||||
|
||||
Now we go create function wey go turn numerical data to meaningful colors. Think am like traffic light system - green mean clean energy, red mean high carbon intensity.
|
||||
|
||||
Dis function go take CO2 data from our API and decide which color best represent environmental impact. Na like how scientists dey use color-coding for heat maps to show complex data patterns - from ocean temperature to star formation. Make we add dis to `/src/index.js`, just after those `const` variables wey we set earlier:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[CO2 Value] --> B[Find Closest Scale Point]
|
||||
B --> C[Get Scale Index]
|
||||
C --> D[Map to Color]
|
||||
D --> E[Send to Background]
|
||||
|
||||
subgraph "Color Scale"
|
||||
F["0-150: Green (Clean)"]
|
||||
G["150-600: Yellow (Moderate)"]
|
||||
H["600-750: Orange (High)"]
|
||||
I["750+: Brown (Very High)"]
|
||||
end
|
||||
|
||||
subgraph "Message Passing"
|
||||
J[Content Script]
|
||||
K[chrome.runtime.sendMessage]
|
||||
L[Background Script]
|
||||
M[Icon Update]
|
||||
end
|
||||
|
||||
style A fill:#e1f5fe
|
||||
style D fill:#e8f5e8
|
||||
style E fill:#fff3e0
|
||||
```
|
||||
```javascript
|
||||
function calculateColor(value) {
|
||||
// Define CO2 intensity scale (grams per kWh)
|
||||
const co2Scale = [0, 150, 600, 750, 800];
|
||||
// Corresponding colors from green (clean) to dark brown (high carbon)
|
||||
const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
// Find di closest scale value to we input
|
||||
const closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
|
||||
console.log(`${value} is closest to ${closestNum}`);
|
||||
|
||||
// Find di index for color mapping
|
||||
const num = (element) => element > closestNum;
|
||||
const scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
const closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
// Send color update message go background script
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
**Make we break down dis clever small function:**
|
||||
- **Sets up** two arrays - one for CO2 levels, another for colors (green = clean, brown = dirty!)
|
||||
- **Finds** the closest match to actual CO2 value with some neat array sorting
|
||||
- **Grabs** matching color with findIndex() method
|
||||
- **Sends** message to Chrome background script with our chosen color
|
||||
- **Uses** template literals (those backticks) for cleaner string formatting
|
||||
- **Keeps** everything organized with const declarations
|
||||
|
||||
The `chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) na like nervous system of your extension - e dey handle all behind-the-scenes communication and tasks:
|
||||
|
||||
> "Use chrome.runtime API to get background page, return details about manifest, and listen to respond to events for app or extension lifecycle. You fit also use dis API to convert relative path of URLs to full qualified URLs."
|
||||
|
||||
**Why Chrome Runtime API dey very handy:**
|
||||
- **Lets** different parts of your extension dey talk
|
||||
- **Handles** background work without freeze user interface
|
||||
- **Manages** your extension lifecycle events
|
||||
- **Makes** message passing between scripts easy well
|
||||
|
||||
✅ If you dey develop dis browser extension for Edge, e fit shock you say you dey use chrome API. Di newer Edge versions dey run for Chromium engine, so you fit use these tools.
|
||||
|
||||
```mermaid
|
||||
architecture-beta
|
||||
group browser(logos:chrome)[Browza]
|
||||
|
||||
service popup(logos:html5)[Popup UI] in browser
|
||||
service content(logos:javascript)[Content Script] in browser
|
||||
service background(database)[Background Script] in browser
|
||||
service api(logos:api)[External API] in browser
|
||||
|
||||
popup:R -- L:content
|
||||
content:R -- L:background
|
||||
background:T -- B:api
|
||||
content:T -- B:api
|
||||
|
||||
junction junctionCenter in browser
|
||||
popup:R -- L:junctionCenter
|
||||
junctionCenter:R -- L:background
|
||||
```
|
||||
> **Pro Tip**: If you want profile browser extension, open dev tools from inside the extension, because e be separate browser instance. Dis one go give you extension-specific performance metrics.
|
||||
|
||||
### Set a default icon color
|
||||
|
||||
Before we start fetch real data, make we give our extension starting point. Nobody like to dey look blank or broken icon. We go start with green color so users go sabi extension dey work from moment dem install am.
|
||||
|
||||
For your `init()` function, make we set default green icon:
|
||||
|
||||
```javascript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
**Wetin dis initialization dey do:**
|
||||
- **Sets** neutral green color as default state
|
||||
- **Gives** immediate visual feedback when extension dey load
|
||||
- **Establishes** communication pattern with background script
|
||||
- **Ensures** users go see functional extension before data load
|
||||
### Call the function, execute the call
|
||||
|
||||
Now make we connect everything so that when fresh CO2 data land, your icon go update automatically with correct color. E be like connect final circuit for electronic device - suddenly all components go work as one system.
|
||||
|
||||
Add dis line just after you get CO2 data from API:
|
||||
|
||||
```javascript
|
||||
// After we don collect CO2 data from the API
|
||||
// make CO2 = data.data[0].intensity.actual;
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
**Dis integration dey do:**
|
||||
- **Connects** API data flow with visual indicator system
|
||||
- **Triggers** icon updates automatically when new data show
|
||||
- **Ensures** real-time visual feedback based on current carbon intensity
|
||||
- **Maintains** separation of data fetching and display logic
|
||||
|
||||
Finally, for `/dist/background.js`, add listener for these background action calls:
|
||||
|
||||
```javascript
|
||||
// Dey listen for messages wey come from content script
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
|
||||
// Draw dynamic icon use Canvas API
|
||||
// Borrow from energy lollipop extension - na beta feature!
|
||||
function drawIcon(value) {
|
||||
// Create offscreen canvas make performance beta
|
||||
const canvas = new OffscreenCanvas(200, 200);
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
// Draw color circle wey represent carbon intensity
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
// Return di image data for di browser icon
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
|
||||
**Wetin dis background script dey do:**
|
||||
- **Listens** for messages from your main script (like receptionist wey dey take calls)
|
||||
- **Processes** 'updateIcon' request to change your toolbar icon
|
||||
- **Creates** new icons quickly with Canvas API
|
||||
- **Draws** simple colored circle wey dey show current carbon intensity
|
||||
- **Updates** your browser toolbar with fresh icon
|
||||
- **Uses** OffscreenCanvas for smooth performance (no UI block)
|
||||
|
||||
✅ You go learn more about Canvas API for [Space Game lessons](../../6-space-game/2-drawing-to-canvas/README.md).
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant CS as Content Script
|
||||
participant BG as Background Script
|
||||
participant Canvas as OffscreenCanvas
|
||||
participant Browser as Browser Icon
|
||||
|
||||
CS->>BG: sendMessage({action: 'updateIcon', color})
|
||||
BG->>Canvas: new OffscreenCanvas(200, 200)
|
||||
Canvas->>Canvas: getContext('2d')
|
||||
Canvas->>Canvas: beginPath() + fillStyle + arc()
|
||||
Canvas->>Canvas: fill() + getImageData()
|
||||
Canvas->>BG: Return image data
|
||||
BG->>Browser: chrome.action.setIcon(imageData)
|
||||
Browser->>Browser: Update toolbar icon
|
||||
```
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Complete Extension Understanding**: Check your mastery for whole system:
|
||||
- ✅ How message passing dey work between different extension scripts?
|
||||
- ✅ Why we use OffscreenCanvas instead of regular Canvas for better performance?
|
||||
- ✅ Wetin be di role wey Chrome Runtime API dey play for extension architecture?
|
||||
- ✅ How di color calculation algorithm dey map data go visual feedback?
|
||||
|
||||
**Performance Considerations**: Your extension don now show:
|
||||
- **Efficient messaging**: Clear communication between script contexts
|
||||
- **Optimized rendering**: OffscreenCanvas dey stop UI from blocking
|
||||
- **Real-time updates**: Dynamic icon dey change based on live data
|
||||
- **Memory management**: Correct cleanup and handling of resource
|
||||
|
||||
**Time to test your extension:**
|
||||
- **Build** everything with `npm run build`
|
||||
- **Reload** your extension for the browser (no forget dis step)
|
||||
- **Open** your extension and watch di icon change colors
|
||||
- **Check** how e dey respond to real carbon data from around di world
|
||||
|
||||
Now you go sabi sharp sharp whether na good time for dat load of laundry or if you gats wait for cleaner energy. You don just build something wey really useful and learn about browser performance as you go.
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use di Agent mode to complete dis challenge:
|
||||
|
||||
**Description:** Improve di browser extension's performance monitoring power by adding a feature wey go track and show load times for different parts of di extension.
|
||||
|
||||
**Prompt:** Make a performance monitoring system for di browser extension wey go measure and log di time e dey take to fetch CO2 data from di API, calculate colors, and update di icon. Add function called `performanceTracker` wey dey use di Performance API to measure these operations and show di results for di browser console with timestamps and duration metrics.
|
||||
|
||||
Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Here be one interesting detective mission: choose some open source websites wey don dey for years (like Wikipedia, GitHub, or Stack Overflow) and check their commit history. You fit see wetin dem do for performance improvement? Wetin be di problems wey dey always come up?
|
||||
|
||||
**Your investigation approach:**
|
||||
- **Search** commit messages for words like "optimize," "performance," or "faster"
|
||||
- **Look** for patterns - dem dey always fix di same kind issues?
|
||||
- **Identify** di common wahala wey dey slow down websites
|
||||
- **Share** wetin you find - other developers go learn from real-world example
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/28)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Try sign up for one [performance newsletter](https://perf.email/)
|
||||
|
||||
Check some ways wey browsers dey measure web performance by using di performance tabs inside their web tools. You find any big difference?
|
||||
|
||||
### ⚡ **Wetyn You Fit Do for Di Next 5 Minutes**
|
||||
- [ ] Open browser Task Manager (Shift+Esc for Chrome) to see extension resource usage
|
||||
- [ ] Use DevTools Performance tab to record and analyze webpage performance
|
||||
- [ ] Check di browser's Extensions page to see which extensions dey affect startup time
|
||||
- [ ] Try turn off some extensions for small time to see performance differences
|
||||
|
||||
### 🎯 **Wetyn You Fit Achieve for Dis Hour**
|
||||
- [ ] Finish di post-lesson quiz and understand performance concepts
|
||||
- [ ] Build one background script for your browser extension
|
||||
- [ ] Learn how to use browser.alarms for efficient background tasks
|
||||
- [ ] Practice message passing between content scripts and background scripts
|
||||
- [ ] Measure and optimize your extension's resource usage
|
||||
|
||||
### 📅 **Your Week-Long Performance Journey**
|
||||
- [ ] Finish one high-performance browser extension with background functionality
|
||||
- [ ] Master service workers and modern extension architecture
|
||||
- [ ] Build efficient data synchronization and caching strategies
|
||||
- [ ] Learn advanced debugging techniques for extension performance
|
||||
- [ ] Optimize your extension for both functionality and resource efficiency
|
||||
- [ ] Create comprehensive tests for extension performance scenarios
|
||||
|
||||
### 🌟 **Your Month-Long Optimization Mastery**
|
||||
- [ ] Build enterprise-grade browser extensions with optimal performance
|
||||
- [ ] Learn about Web Workers, Service Workers, and modern web performance
|
||||
- [ ] Contribute to open source projects focused on performance optimization
|
||||
- [ ] Master browser internals and advanced debugging techniques
|
||||
- [ ] Create performance monitoring tools and best practices guides
|
||||
- [ ] Become a performance expert wey dey help optimize web applications
|
||||
|
||||
## 🎯 Your Browser Extension Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Complete Extension Development Progression
|
||||
|
||||
section Performance Fundamentals (20 minutes)
|
||||
Browser Profiling: DevTools mastery
|
||||
: Timeline analysis
|
||||
: Bottleneck identification
|
||||
: Critical rendering path
|
||||
|
||||
section Background Tasks (25 minutes)
|
||||
Extension Architecture: Message passing
|
||||
: Background scripts
|
||||
: Runtime API usage
|
||||
: Cross-context communication
|
||||
|
||||
section Visual Feedback (30 minutes)
|
||||
Dynamic UI: Color calculation algorithms
|
||||
: Canvas API integration
|
||||
: Icon generation
|
||||
: Real-time updates
|
||||
|
||||
section Performance Optimization (35 minutes)
|
||||
Efficient Code: Async operations
|
||||
: Memory management
|
||||
: Resource cleanup
|
||||
: Performance monitoring
|
||||
|
||||
section Production Ready (45 minutes)
|
||||
Polish & Testing: Cross-browser compatibility
|
||||
: Error handling
|
||||
: User experience
|
||||
: Performance validation
|
||||
|
||||
section Advanced Features (1 week)
|
||||
Extension Ecosystem: Chrome Web Store
|
||||
: User feedback
|
||||
: Analytics integration
|
||||
: Update management
|
||||
|
||||
section Professional Development (2 weeks)
|
||||
Enterprise Extensions: Team collaboration
|
||||
: Code reviews
|
||||
: CI/CD pipelines
|
||||
: Security audits
|
||||
|
||||
section Expert Mastery (1 month)
|
||||
Platform Expertise: Advanced Chrome APIs
|
||||
: Performance optimization
|
||||
: Architecture patterns
|
||||
: Open source contribution
|
||||
```
|
||||
### 🛠️ Your Complete Extension Development Toolkit
|
||||
|
||||
After you don finish dis trilogy, you don master:
|
||||
- **Browser Architecture**: Deep understanding how extensions dey join browser systems
|
||||
- **Performance Profiling**: Fit identify and fix bottlenecks with developer tools
|
||||
- **Async Programming**: Modern JavaScript styles for responsive and non-blocking operations
|
||||
- **API Integration**: External data fetching with authentication and error handling
|
||||
- **Visual Design**: Dynamic UI updates and Canvas-based graphics generation
|
||||
- **Message Passing**: Communication between scripts for extension architectures
|
||||
- **User Experience**: Loading states, error handling, and easy to use interactions
|
||||
- **Production Skills**: Testing, debugging, and optimization for real-world usage
|
||||
|
||||
**Real-World Applications**: Your skills for extension development apply direct to:
|
||||
- **Progressive Web Apps**: Similar architecture and performance patterns
|
||||
- **Electron Desktop Apps**: Cross-platform apps wey dey use web technologies
|
||||
- **Mobile Hybrid Apps**: Cordova/PhoneGap development using web APIs
|
||||
- **Enterprise Web Applications**: Complex dashboard and productivity tools
|
||||
- **Chrome DevTools Extensions**: Advanced developer tooling and debugging
|
||||
- **Web API Integration**: Any app wey dey talk with external services
|
||||
|
||||
**Professional Impact**: You fit now:
|
||||
- **Build** production-ready browser extensions from concept go deployment
|
||||
- **Optimize** web application performance using industry-standard profiling tools
|
||||
- **Architect** scalable systems with proper separation of concerns
|
||||
- **Debug** complex async operations and cross-context communication
|
||||
- **Contribute** to open source extension projects and browser standards
|
||||
|
||||
**Next Level Opportunities**:
|
||||
- **Chrome Web Store Developer**: Publish extensions for millions of users
|
||||
- **Web Performance Engineer**: Specialize for optimization and user experience
|
||||
- **Browser Platform Developer**: Help develop browser engine
|
||||
- **Extension Framework Creator**: Build tools wey go help other developers
|
||||
- **Developer Relations**: Share knowledge through teaching and content creation
|
||||
|
||||
🌟 **Achievement Unlocked**: You don build one complete, functional browser extension wey show professional development skills and modern web standards!
|
||||
|
||||
## Assignment
|
||||
|
||||
[Analyze a site for performance](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate with AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say machine translation fit get mistake or waka wrong. Di original document for im own language na di main correct source. If na serious information, make person wey sabi human translation do am. We no go responsible if person no understand well or if dem use dis translation anyhow.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,109 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a203e560e58ccc6ba68bffc40c7c8676",
|
||||
"translation_date": "2026-01-08T15:31:03+00:00",
|
||||
"source_file": "5-browser-extension/3-background-tasks-and-performance/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Analyze wan site for performance
|
||||
|
||||
## Assignment Overview
|
||||
|
||||
Performance analysis na important skill for modern web developers. For this assignment, you go have to do detailed performance audit for real website, using both browser-based tools and third-party services to find bottlenecks and suggest how to optimize am.
|
||||
|
||||
Your work na to provide detailed performance report wey go show how you sabi web performance principles and how you fit use professional analysis tools well-well.
|
||||
|
||||
## Assignment Instructions
|
||||
|
||||
**Choose one website** for analysis - pick one from the options wey follow:
|
||||
- One popular website wey you dey use often (news site, social media, e-commerce)
|
||||
- One open-source project website (GitHub pages, documentation sites)
|
||||
- One local business website or portfolio site
|
||||
- Your own project or previous coursework
|
||||
|
||||
**Do multi-tool analysis** using at least three different ways:
|
||||
- **Browser DevTools** - Use Chrome/Edge Performance tab for detailed profiling
|
||||
- **Online auditing tools** - Try Lighthouse, GTmetrix, or WebPageTest
|
||||
- **Network analysis** - Look resource loading, file sizes, and request patterns
|
||||
|
||||
**Document your findings** for one complete report wey get:
|
||||
|
||||
### Performance Metrics Analysis
|
||||
- **Load time measurements** from many tools and viewpoints
|
||||
- **Core Web Vitals** scores (LCP, FID, CLS) and wetin dem mean
|
||||
- **Resource breakdown** showing which assets dey contribute most to load time
|
||||
- **Network waterfall analysis** wey identify blocking resources
|
||||
|
||||
### Problem Identification
|
||||
- **Specific performance bottlenecks** with data wey support am
|
||||
- **Root cause analysis** wey explain why each problem happen
|
||||
- **User impact assessment** wey describe how the problems affect real users
|
||||
- **Priority ranking** of issues based on how serious and how e hard to fix
|
||||
|
||||
### Optimization Recommendations
|
||||
- **Specific, actionable improvements** with expected impact
|
||||
- **Implementation strategies** for each recommended change
|
||||
- **Modern best practices** wey fit apply (lazy loading, compression, etc.)
|
||||
- **Tools and techniques** for ongoing performance monitoring
|
||||
|
||||
## Research Requirements
|
||||
|
||||
**No rely only on browser tools** - expand your analysis with:
|
||||
|
||||
**Third-party auditing services:**
|
||||
- [Google Lighthouse](https://developers.google.com/web/tools/lighthouse) - Full audits
|
||||
- [GTmetrix](https://gtmetrix.com/) - Performance and optimization insights
|
||||
- [WebPageTest](https://www.webpagetest.org/) - Real-world testing conditions
|
||||
- [Pingdom](https://tools.pingdom.com/) - Global performance monitoring
|
||||
|
||||
**Specialized analysis tools:**
|
||||
- [Bundle Analyzer](https://bundlephobia.com/) - JavaScript bundle size analysis
|
||||
- [Image optimization tools](https://squoosh.app/) - Asset optimization opportunities
|
||||
- [Security headers analysis](https://securityheaders.com/) - Security performance impact
|
||||
|
||||
## Deliverables Format
|
||||
|
||||
Make one professional report (2-3 pages) wey get:
|
||||
|
||||
1. **Executive Summary** - Main findings and recommendations overview
|
||||
2. **Methodology** - Tools wey you use and how you do the testing
|
||||
3. **Current Performance Assessment** - Baseline metrics and measurements
|
||||
4. **Issues Identified** - Detailed problem analysis with supporting data
|
||||
5. **Recommendations** - Prioritized improvement plans
|
||||
6. **Implementation Roadmap** - Step-by-step optimization plan
|
||||
|
||||
**Include visual evidence:**
|
||||
- Screenshots of performance tools and metrics
|
||||
- Charts or graphs showing performance data
|
||||
- Before/after comparisons where e fit
|
||||
- Network waterfall charts and resource breakdowns
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary (90-100%) | Adequate (70-89%) | Needs Improvement (50-69%) |
|
||||
| -------- | ------------------- | ----------------- | -------------------------- |
|
||||
| **Analysis Depth** | Comprehensive analysis using 4+ tools with detailed metrics, root cause analysis, and user impact assessment | Good analysis using 3 tools with clear metrics and basic problem identification | Basic analysis using 2 tools with limited depth and minimal problem identification |
|
||||
| **Tool Diversity** | Uses browser tools + 3+ third-party services with comparative analysis and insights from each | Uses browser tools + 2 third-party services with some comparative analysis | Uses browser tools + 1 third-party service with limited comparison |
|
||||
| **Problem Identification** | Identifies 5+ specific performance issues with detailed root cause analysis and quantified impact | Identifies 3-4 performance issues with good analysis and some impact measurement | Identifies 1-2 performance issues with basic analysis |
|
||||
| **Recommendations** | Provides specific, actionable recommendations with implementation details, expected impact, and modern best practices | Provides good recommendations with some implementation guidance and expected outcomes | Provides basic recommendations with limited implementation details |
|
||||
| **Professional Presentation** | Well-organized report with clear structure, visual evidence, executive summary, and professional formatting | Good organization with some visual evidence and clear structure | Basic organization with minimal visual evidence |
|
||||
|
||||
## Learning Outcomes
|
||||
|
||||
By completing this assignment, you go show say you fit:
|
||||
- **Apply** professional performance analysis tools and methodologies
|
||||
- **Identify** performance bottlenecks using data-driven analysis
|
||||
- **Analyze** the relationship between code quality and user experience
|
||||
- **Recommend** specific, actionable optimization strategies
|
||||
- **Communicate** technical findings in professional way
|
||||
|
||||
This assignment dey reinforce the performance concepts wey you learn for the lesson and help you build practical skills wey you go use for your entire web development career.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na to say e don be translated wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translation fit get mistake or no clear. Di original document wey e dey for dia language na di one wey get correct info. If na important info, make person wey sabi translate for human do am. We no go take any wahala or kasala wey fit happen if person no understand or interpret dis translation well well.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "b121a279a6ab39878491f3e572673515",
|
||||
"translation_date": "2026-01-08T11:17:54+00:00",
|
||||
"source_file": "5-browser-extension/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Building a browser extension
|
||||
|
||||
Building browser extensions na fun and interesting way to dey think about how your apps go perform while you dey build different kain web asset. Dis module get lessons on how browsers dey work and how to deploy browser extension, how to build form, call API, and use local storage, plus how to check how your website dey perform and improve am.
|
||||
|
||||
You go build browser extension wey go work for Edge, Chrome, and Firefox. Dis extension, wey be like small mini web site wey dem tailor make for one correct task, dey check [C02 Signal API](https://www.co2signal.com) to see how one region dey use electricity and how many carbon e dey release, then e go give reading on the carbon footprint of the region.
|
||||
|
||||
Dis extension fit be call ad hoc by user once dem put API key and region code inside form to find local electricity use and then give data wey fit affect how user go take use electricity. For example, e fit better to delay to run clothes dryer (wey dey carbon intense) when electricity usage high for your region.
|
||||
|
||||
### Topics
|
||||
|
||||
1. [About the browser](1-about-browsers/README.md)
|
||||
2. [Forms and local storage](2-forms-browsers-local-storage/README.md)
|
||||
3. [Background tasks and performance](3-background-tasks-and-performance/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
|
||||
|
||||
## Credits
|
||||
|
||||
Idea for dis web carbon trigger na from Asim Hussain, wey be lead at Microsoft for Green Cloud Advocacy team and na author of [Green Principles](https://principles.green/). E first be [web site project](https://github.com/jlooper/green).
|
||||
|
||||
Structure of this browser extension get influence from [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
|
||||
|
||||
The concept wey dey the 'dot' icon system come from the icon structure of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
|
||||
|
||||
These lessons na [Jen Looper](https://www.twitter.com/jenlooper) write with ♥️.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we try make e correct, make you sabi say machine translation fit get some error or no too clear. The original document wey e dey for im original language na the correct one wey you suppose trust pass. If na serious matter, e good make person wey sabi do human translation help you. We no go carry any wahala if anybody misunderstand or no sabi well because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "fab4e6b4f0efcd587a9029d82991f597",
|
||||
"translation_date": "2026-01-08T15:57:35+00:00",
|
||||
"source_file": "5-browser-extension/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger Browser Extension: Completed Code
|
||||
|
||||
Using tmrow's C02 Signal API to track electricity usage, build a browser extension so that you fit get reminder right for your browser about how heavy your region's electricity usage be. Using this extension ad hoc go help you make judgement calls on your activities based on this information.
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You go need get [npm](https://npmjs.com) installed. Download copy of this code for folder for your computer.
|
||||
|
||||
Install all di required packages:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build di extension from webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use di 'three dot' menu for di top right corner of di browser to find di Extensions panel. From there, select 'Load Unpacked' to load new extension. Open di 'dist' folder when dem ask you and di extension go load. To use am, you need API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - put your email for di box for dis page) plus di [code for your region](http://api.electricitymap.org/v3/zones) wey match di [Electricity Map](https://www.electricitymap.org/map) (for Boston, as example, I dey use 'US-NEISO').
|
||||
|
||||
|
||||
|
||||
Once di API key and region don enter for di extension interface, di colored dot wey dey di browser extension bar go change to show how your region energy use dey and go give you hint on which energy-heavy activities fit make sense for you to do. Di idea behind dis 'dot' system na wetin di [Energy Lollipop extension](https://energylollipop.com/) give me for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say machine translation fit get some small mistake or no too correct. Di original document for dia own language na di correct one. If na serious matter, e good make human expert translate am. We no responsible if mistake or wrong meaning show because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cbaf73f94a9ab4c680a10ef871e92948",
|
||||
"translation_date": "2026-01-08T16:08:59+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.es.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger Browser Extension: Full Code
|
||||
|
||||
Using tmrow's CO2 signal API to track electricity use, make a browser extension so you fit get reminder directly for your browser about your area's electricity consumption. This kind extension go help you take decisions about your activities based on this information.
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You gats get [npm](https://npmjs.com) installed. Download one copy of this code for one folder for your computer.
|
||||
|
||||
Install all the necessary packages:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build the extension from webpack:
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use the 'three dots' menu for the top right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load new extension. Open the 'dist' folder wen dem ask you and the extension go load. To use am, you go need API key for CO2 Signal API ([get one here by email](https://www.co2signal.com/) - enter your email for the box on this page) and the [code for your area](http://api.electricitymap.org/v3/zones) wey match the [Electricity map](https://www.electricitymap.org/map) (for Boston, for example, I dey use 'US- NEISO').
|
||||
|
||||
|
||||
|
||||
Once you don enter the API key and the region for the extension interface, the color dot for the browser extension bar go change to show how your area's energy use dey and give you one signal about high energy consumption activities wey go make sense for you. The idea behind this "dot" system I get am from the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automated translation fit get mistake or no exactly correct. The original document wey e come from na im get final authority. For important information, make person wey sabi do professional human translation help you. We no go take responsibility if person no understand or misinterpret anything from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9361268ca430b2579375009e1eceb5e5",
|
||||
"translation_date": "2026-01-08T16:11:15+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.fr.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Extension de navigateur Carbon Trigger: Completed Code
|
||||
|
||||
En dey use API C02 Signal wey tmrow get to track how electricity dey consume, make you build browser extension so dat you fit get reminder straight for your browser about how much electricity your area dey use. Using dis kind ad hoc extension go help you make better judgment about your activities based on dis info.
|
||||
|
||||
|
||||
|
||||
## Débuter
|
||||
|
||||
You go need to get [npm](https://npmjs.com) install. Download one copy of dis code for one folder for your computer.
|
||||
|
||||
Install all di packages wey you need:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build di extension from webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use di 'three dots' menu for di top right corner of your browser to find di Extensions panel. From there, select 'Load unpacked extension' to load new extension. Open di 'dist' folder when e ask and di extension go load. To use am, you need API key for CO2 Signal API ([get one here by email](https://www.co2signal.com/) - put your email for di box for dis page) plus di [code for your region](http://api.electricitymap.org/v3/zones) wey match with di [Electricity map](https://www.electricitymap.org/map) (for example, for Boston, I use 'US- NEISO').
|
||||
|
||||
|
||||
|
||||
Once you don enter di API key and region inside extension interface, di colored dot for di browser extension bar go change to show how much power your area dey consume and e go give you sign about which energy-heavy activities e go good make you do. Di idea behind dis 'points' system na from di [Energy Lollipop extension](https://energylollipop.com/) wey dem make for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automatic translation fit get some errors or wrong tins. Di original document wey dem write for im own language na im be di main correct source. If na serious mata be dat, better to use professional human translation. We no go take responsibility for any misunderstanding or wrong meaning wey fit show from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "dd58ae1b7707034f055718c1b68bc8de",
|
||||
"translation_date": "2026-01-08T16:06:34+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.hi.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger Browser Extension: Complete Code
|
||||
|
||||
To track electricity usage, use tmrow's CO2 Signal API to build a browser extension wey go remind you how heavy di electricity usage be for your area for your browser. Using dis temporary extension go help you decide your activities based on dis information.
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You go need to install [npm](https://npmjs.com). Download one copy of dis code inside one folder for your computer.
|
||||
|
||||
Install all the necessary packages:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build di extension using webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use di 'three-dot' menu for di top right corner of your browser to find di extension panel. From there, choose 'Load unpacked' to load new extension. Open di 'dist' folder at di prompt and di extension go load. To use am, you need an API key for di CO2 Signal API ([get am here via email](https://www.co2snal.com/) - enter your email for di box on dis page) and [code for your region](http://api.electricitymap.org/v3/zones) from [Electricity Map](https://www.electricitymap.org/map) (For example, for Boston, I dey use 'US-NEISO').
|
||||
|
||||
|
||||
|
||||
Once you don input di API key and region inside di extension interface, di colored dot for di browser extension bar suppose change to reflect how di energy use be for your area and also show you one indicator wey go tell you which energy-heavy activities fit be good for your performance. Di idea behind dis 'dot' system na from the California emissions [Energy Lollipop Extension](https://energylollipop.com/) wey I jaga.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis dokument don translate by AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or no-too-correct parts. The original dokument for im own language na im get correct authority. If na important info, e better make human professional translate am. We no go responsible if person waka mistake or misunderstand tins because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9a6b22a2eff0f499b66236be973b24ad",
|
||||
"translation_date": "2026-01-08T16:16:43+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.it.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Estensione del browser Carbon Trigger: kòd wey make you fit start
|
||||
|
||||
We go use API Signal C02 from tmrow to dey monitor how people dey use electricity to make browser extension wey go dey remind you inside your browser how heavy electricity use be for your area. Dis kind extension go help you to sabi how your activities dey affect electricity use based on dis info.
|
||||
|
||||
|
||||
|
||||
## To Start
|
||||
|
||||
You go need make sure say [npm](https://npmjs.com) dey installed. Download copy of dis code put am for folder for your computer.
|
||||
|
||||
Make you install all di packages wey you need:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Make you create the extension using webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install am for Edge, use di "three dots" menu for top right corner for browser to find Extensions panel. If "Developer Mode" no dey enabled, enable am (e dey for bottom left). Choose "Load unpacked" to load new extension. Open "dist" folder for prompt and the extension go load. To use am, you need API key for CO2 Signal API (you fit [get am here via email](https://www.co2signal.com/) - put your email for the box for dat page) and [code for your region](http://api.electricitymap.org/v3/zones) wey match di [electricity map](https://www.electricitymap.org/map) (for Boston, for example, na "US-NEISO").
|
||||
|
||||
|
||||
|
||||
Once API key and region don enter for the extension interface, the colored dot for the browser extension bar suppose change to show your region energy use and give hint about which high energy activities fit make sense to run. The idea wey behind dis "dots" system na from [Energy Lollipop extension](https://energylollipop.com/) wey dem make for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am accurate, abeg sabi say automated translations fit get errors or mistakes. Di original document wey written for im correct language na di main tori. If na serious information, make person professional human translator check am. We no go responsible for any confusion or wrong understanding wey fit happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "3f5e6821e0febccfc5d05e7c944d9e3d",
|
||||
"translation_date": "2026-01-08T16:13:12+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.ja.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Kaabon Trigger Browser Extension: Di Complete Code
|
||||
|
||||
Wi go build browser extension wey go fit show reminder for your browser to track how much power una dey use for your area using tmrow C02 Signal API. Dis extension go help you judge your activities based on dis information if you use am adhoc.
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You go need get [npm](https://npmjs.com) installed. Download di copy of dis code into folder for your computer.
|
||||
|
||||
Install all di packages wey you need.
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build di extension from webpack.
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, find di "3 dots" menu for di top right corner of di browser then find "Extensions" panel. From dia select "Load Unpacked" to load di new extension. When prompt show, open di "dist" folder and di extension go load. To use am, you go need CO2 Signal API key ([get one here via email](https://www.co2signal.com/) - just put your email for di box for dis page) and di [Electricity Map](https://www.electricitymap.org/map) code for your region (for Boston, we dey use 'US-NEISO' for example).
|
||||
|
||||
|
||||
|
||||
Once you put your API key and region for di extension interface, di colored dot wey dey show for di browser extension bar go change to reflect your area energy usage and show which kind energy activity you suppose do. Dis "dot" system idea na from di [Energy Lollipop extension](https://energylollipop.com/) wey I see for California state emission.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) weh translate am. Even though we try make am correct, abeg sabi say automated translation fit get errors or mistake. Di original document wey dem write for im correct language na di real correct one. If na serious matter, e better make professional human translator do am. We no go responsible for any misunderstanding or wrong meaning wey fit come from using dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "21b364c158c8e4f698de65eeac16c9fe",
|
||||
"translation_date": "2026-01-08T16:14:56+00:00",
|
||||
"source_file": "5-browser-extension/solution/translation/README.ms.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger Browser Extension: Complete Code
|
||||
|
||||
Using the CO2 Signal API tmrow to detect electricity usage, build a browser extension so you fit get reminder for your browser about how heavy your region electricity use be. Using this extension specifically go help you make decisions about your activity based on this information.
|
||||
|
||||
|
||||
|
||||
## Start Here
|
||||
|
||||
You need to install [npm](https://npmjs.com). Download copy of this code to folder for your computer.
|
||||
|
||||
Install all the packages wey you need:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build the extension from webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use the 'three dots' menu for the top right corner of browser to find Extensions panel. From there, choose 'Load Unpacked' to load new extension. Open the 'dist' folder on request and the extension go load. To use am, you need API key for CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email inside the box for this page) and [code for your region](http://api.electricitymap.org/v3/zones) wey match the [Electricity Map](https://www.electricitymap.org/map) (for Boston, for example, I use 'US-NEISO').
|
||||
|
||||
|
||||
|
||||
Once the API key and region don enter into the extension interface, the coloured dot for the browser extension bar go change to show your region electricity usage and give you idea about the kind heavy activities wey make sense for you to do. The concept behind the 'dot' system dem give me from [Energy Lollipop browser extension](https://energylollipop.com/) for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, make you sabi say automated translations fit get mistakes or no too correct. Di original document wey e base for e own language na di correct source. If na important tins, na professional human translation better. We no dey responsible for any wahala or wrong understanding wey fit happen from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "26fd39046d264ba185dcb086d3a8cf3e",
|
||||
"translation_date": "2026-01-08T16:00:02+00:00",
|
||||
"source_file": "5-browser-extension/start/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Carbon Trigger Browser Extension: Starter Code
|
||||
|
||||
Using tmrow's C02 Signal API to track electricity usage, build a browser extension so that you fit get reminder for your browser about how heavy your regiohn dem electricity usage be. Using this extension sometimes go help you make correct judgement on top your activities based on this information.
|
||||
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
You go need get [npm](https://npmjs.com) installed. Download copy of this code go one folder for your computer.
|
||||
|
||||
Install all the required packages:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Build the extension from webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
To install for Edge, use the 'three dot' menu for top right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load new extension. Open the 'dist' folder when e ask and the extension go load. To use am, you go need API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - put your email for the box for this page) and the [code for your region](http://api.electricitymap.org/v3/zones) wey match the [Electricity Map](https://www.electricitymap.org/map) (for Boston, for example, I dey use 'US-NEISO').
|
||||
|
||||
|
||||
|
||||
Once you input the API key and region for the extension interface, the colored dot for the browser extension bar go change to show how your region dey use energy and give you pointer on which energy-heavy activities fit beta for you to do. The idea for this 'dot' system na from the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis dokumant don translate wit AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get mistake or no too correct. Di original dokumant wey dey im original language na di main correct source. If na serious mata, make person wey sabi translate am proper do am. We no go responsible if pesin no understand or misunderstand any tin wey happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "87cd43afe5b69dbbffb5c4b209ea6791",
|
||||
"translation_date": "2026-01-08T13:46:32+00:00",
|
||||
"source_file": "6-space-game/2-drawing-to-canvas/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Assignment: Explore di Canvas API
|
||||
|
||||
## Learning Objectives
|
||||
|
||||
By finishing dis assignment, you go show say you sabi Canvas API basics and fit use creative problem-solving build visual tins wit JavaScript and HTML5 canvas.
|
||||
|
||||
## Instructions
|
||||
|
||||
Choose one part of di Canvas API wey dey interest you come create one better visual project around am. Dis assignment dey encourage you to try di drawing skills wey you don learn as you build sometin wey be your own.
|
||||
|
||||
### Project Ideas to Inspire You
|
||||
|
||||
**Geometric Patterns:**
|
||||
- **Create** galaxy of animated twinkling stars wey dey position randomly
|
||||
- **Design** interesting texture with repeated geometric shapes
|
||||
- **Build** kaleidoscope effect with patterns wey dey rotate and get plenty colour
|
||||
|
||||
**Interactive Elements:**
|
||||
- **Develop** drawing tool wey dey respond to mouse movements
|
||||
- **Implement** shapes wey go change colour when you click am
|
||||
- **Design** simple animation loop wit moving elements
|
||||
|
||||
**Game-Related Graphics:**
|
||||
- **Craft** scrolling background for space game
|
||||
- **Build** particle effects like explosions or magic spells
|
||||
- **Create** animated sprites with many frames
|
||||
|
||||
### Development Guidelines
|
||||
|
||||
**Research and Inspiration:**
|
||||
- **Browse** CodePen for creative canvas examples (to inspire you, no to copy)
|
||||
- **Study** di [Canvas API documentation](https://developer.mozilla.org/docs/Web/API/Canvas_API) for more methods
|
||||
- **Experiment** with different drawing functions, colours, and animations
|
||||
|
||||
**Technical Requirements:**
|
||||
- **Use** correct canvas setup wit `getContext('2d')`
|
||||
- **Include** meaningful comments to explain how you take do am
|
||||
- **Test** your code proper so e no go get error
|
||||
- **Apply** modern JavaScript syntax (const/let, arrow functions)
|
||||
|
||||
**Creative Expression:**
|
||||
- **Focus** on one Canvas API feature but explore am well well
|
||||
- **Add** your own creative touch to make di project personal
|
||||
- **Consider** how your project fit join bigger app
|
||||
|
||||
### Submission Guidelines
|
||||
|
||||
Send your finished project as one HTML file wey get embedded CSS and JavaScript, or as different files inside one folder. Add small comment wey explain your creative choices and di Canvas API features wey you try.
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
|----------|-----------|----------|-------------------|
|
||||
| **Technical Implementation** | Canvas API used creatively with many features, code run perfect, modern JavaScript syntax dey apply | Canvas API used correct, code dey run but get small issues, basic implementation | Canvas API try but code get errors or e no run |
|
||||
| **Creativity and Design** | Very original idea with fine visual, show say you explore di Canvas feature well well | Good use of Canvas features with some creative tins, visual solid | Basic implementation, little creativity or visual appeal |
|
||||
| **Code Quality** | Code well arranged, comments dey follow best practices, efficient algorithms | Clean code with some comments, follow basic coding rules | Code no dey organized, few comments, inefficient implementation |
|
||||
|
||||
## Reflection Questions
|
||||
|
||||
After you finish your project, think about these questions:
|
||||
|
||||
1. **Which Canvas API feature you choose and why?**
|
||||
2. **Which challenges you face as you dey build your project?**
|
||||
3. **How you fit extend dis project to become bigger app or game?**
|
||||
4. **Which other Canvas API features you go like explore next?**
|
||||
|
||||
> 💡 **Pro Tip**: Start with simple tori come add complexity small by small. Simple project wey you do well better pass big project wey no work well!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Wetin I wan talk**:
|
||||
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate. Even though we try make e correct, abeg sabi say automated translation fit get mistake or no too correct well. The original document wey e dey for im own language na im be the correct one. If na serious matter, better make pipo wey sabi translate am well well do am. We no go responsible if anybody misunderstand or mix up tins because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,38 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c162b3b3a1cafc1483c8015e9b266f0d",
|
||||
"translation_date": "2026-01-08T14:48:24+00:00",
|
||||
"source_file": "6-space-game/3-moving-elements-around/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Comment Your Code
|
||||
|
||||
## Instructions
|
||||
|
||||
Clean, well-documented code na important thing to maintain and share your projects. For this assignment, you go practice one of the most important habits of professional developers: to write clear, helpful comments wey go explain wetin your code dey do and how e dey work.
|
||||
|
||||
Make you check your current `app.js` file for your game folder, find how you go fit comment am and tidy am up. E easy for code to scatter, and now na good chance to add comments to make sure say your code dey readable so you fit use am later.
|
||||
|
||||
**Your task include:**
|
||||
- **Add comments** wey go explain wetin each major section of code dey do
|
||||
- **Document functions** with clear description of their purpose and parameters
|
||||
- **Organize code** into logical blocks with section headers
|
||||
- **Remove** any code wey no dey used or wey dey repeat
|
||||
- **Use consistent** naming style for variables and functions
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **Code Documentation** | `app.js` code full with comments wey clear and helpful to explain all major sections and functions | `app.js` code get enough comments with basic explanations for most sections | `app.js` code no get enough comments and explanations no clear |
|
||||
| **Code Organization** | Code organize well into logical blocks with clear section headers and consistent structure | Code get some organization with basic grouping for related functionality | Code disorganized small and e hard to follow |
|
||||
| **Code Quality** | All variables and functions get descriptive names, no unused code, dey follow consistent conventions | Most code dey follow good naming practice with small-unused code | Variable names no clear, get unused code, style no consistent |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate. Even though we dey try make am correct, abeg sabi say automated translation fit get mistakes or no too correct. The original document wey e write for im own language na the correct one. If na important matter, make person wey sabi translate am do am well. We no go take responsibility if person no understand or misunderstand from this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,776 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "039b4d8ce65f5edd82cf48d9c3e6728c",
|
||||
"translation_date": "2026-01-08T13:25:54+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Space Game Part 4: Adding A Laser and Detect Collisions
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Collision Detection Journey
|
||||
section Physics Foundation
|
||||
Understand rectangles: 3: Student
|
||||
Learn intersection math: 4: Student
|
||||
Grasp coordinate systems: 4: Student
|
||||
section Game Mechanics
|
||||
Implement laser firing: 4: Student
|
||||
Add object lifecycle: 5: Student
|
||||
Create collision rules: 5: Student
|
||||
section System Integration
|
||||
Build collision detection: 5: Student
|
||||
Optimize performance: 5: Student
|
||||
Test interaction systems: 5: Student
|
||||
```
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/35)
|
||||
|
||||
Think about the moment in Star Wars wen Luke proton torpedoes hit di Death Star exhaust port. Dat exact collision detection change di fate of di galaxy! Inside games, collision detection dey work di same way - e dey determine wen objects dey interact and wetin go happen next.
|
||||
|
||||
For dis lesson, you go add laser weapons for your space game and put collision detection. Just like NASA mission planners dey calculate spacecraft trajectory to avoid debris, you go learn to detect wen game objects dey intersect. We go break am down into small steps wey go build once after the other.
|
||||
|
||||
By di end, you go get working combat system wey lasers go fit destroy enemies and collisions go trigger game events. Dis same collision principles dey used for everything from physics simulations to interactive web interfaces.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Collision Detection))
|
||||
Physics Concepts
|
||||
Rectangle Boundaries
|
||||
Intersection Testing
|
||||
Coordinate Systems
|
||||
Separation Logic
|
||||
Game Objects
|
||||
Laser Projectiles
|
||||
Enemy Ships
|
||||
Hero Character
|
||||
Collision Zones
|
||||
Lifecycle Management
|
||||
Object Creation
|
||||
Movement Updates
|
||||
Destruction Marking
|
||||
Memory Cleanup
|
||||
Event Systems
|
||||
Keyboard Input
|
||||
Collision Events
|
||||
Game State Changes
|
||||
Audio/Visual Effects
|
||||
Performance
|
||||
Efficient Algorithms
|
||||
Frame Rate Optimization
|
||||
Memory Management
|
||||
Spatial Partitioning
|
||||
```
|
||||
✅ Do small research on di very first computer game wey anybody write. Wetin e fit do?
|
||||
|
||||
## Collision detection
|
||||
|
||||
Collision detection dey work like proximity sensors wey dey Apollo lunar module - e dey always check distance and dey trigger alerts wen objects get too close. For games, dis system dey determine wen objects dey interact and wetin suppose happen next.
|
||||
|
||||
Di approach wey we go use na sey every game object be rectangle, like how air traffic control systems dey use simplified geometric shapes to track aircraft. Dis rectangular method fit look basic, but e dey efficient for computer plus e dey work well for most game situations.
|
||||
|
||||
### Rectangle representation
|
||||
|
||||
Every game object need coordinate boundaries, like how Mars Pathfinder rover map im location for Mars surface. Dis na how we dey define boundary coordinates:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🎯 Game Object"] --> B["📍 Position (x, y)"]
|
||||
A --> C["📏 Dimensions (width, height)"]
|
||||
|
||||
B --> D["Top: y"]
|
||||
B --> E["Left: x"]
|
||||
|
||||
C --> F["Bottom: y + height"]
|
||||
C --> G["Right: x + width"]
|
||||
|
||||
D --> H["🔲 Rectangle Bounds"]
|
||||
E --> H
|
||||
F --> H
|
||||
G --> H
|
||||
|
||||
H --> I["Collision Detection Ready"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style H fill:#e8f5e8
|
||||
style I fill:#fff3e0
|
||||
```
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Make we break am down:**
|
||||
- **Top edge**: Na just where your object start vertically (na im y position be dat)
|
||||
- **Left edge**: Where e start horizontally (na im x position be dat)
|
||||
- **Bottom edge**: Add height to y position - now you know where e end!
|
||||
- **Right edge**: Add width to x position - and now you get full boundary
|
||||
|
||||
### Intersection algorithm
|
||||
|
||||
To detect rectangle intersections na like how Hubble Space Telescope dey figure if celestial objects dey overlap for im field of view. Di algorithm dey check for separation:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["Rectangle 1"] --> B{"Separation Tests"}
|
||||
C["Rectangle 2"] --> B
|
||||
|
||||
B --> D["R2 left pass R1 right?"]
|
||||
B --> E["R2 right no reach R1 left?"]
|
||||
B --> F["R2 top pass R1 bottom?"]
|
||||
B --> G["R2 bottom no reach R1 top?"]
|
||||
|
||||
D --> H{"Any True?"}
|
||||
E --> H
|
||||
F --> H
|
||||
G --> H
|
||||
|
||||
H -->|Yes| I["❌ No Collision"]
|
||||
H -->|No| J["✅ Collision Detected"]
|
||||
|
||||
style B fill:#e3f2fd
|
||||
style I fill:#ffebee
|
||||
style J fill:#e8f5e8
|
||||
```
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top);
|
||||
}
|
||||
```
|
||||
|
||||
**Di separation test dey work like radar systems:**
|
||||
- E go check if rectangle 2 dey completely for right side of rectangle 1?
|
||||
- E go check if rectangle 2 dey completely for left side of rectangle 1?
|
||||
- E go check if rectangle 2 dey completely below rectangle 1?
|
||||
- E go check if rectangle 2 dey completely above rectangle 1?
|
||||
|
||||
If none of dis conditions true, di rectangles go dey overlapping. Dis kind approach na like how radar operators dey determine if two aircraft dey at safe distance.
|
||||
|
||||
## Managing object lifecycles
|
||||
|
||||
Wen laser hit enemy, both objects go need comot from game. But to delete objects for middle of loop fit cause crash - na lesson dem learn hard way for early computer systems like Apollo Guidance Computer. Instead, we go use "mark for deletion" wey dey remove objects safely between frames.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Active: Object Create
|
||||
Active --> Collided: Collision Detect
|
||||
Collided --> MarkedDead: Set dead = true
|
||||
MarkedDead --> Filtered: Next Frame
|
||||
Filtered --> [*]: Object Remov
|
||||
|
||||
Active --> OutOfBounds: Comot Screen
|
||||
OutOfBounds --> MarkedDead
|
||||
|
||||
note right of MarkedDead
|
||||
Safe to continue
|
||||
current frame
|
||||
end note
|
||||
|
||||
note right of Filtered
|
||||
Objects remov
|
||||
between frames
|
||||
end note
|
||||
```
|
||||
Dis na how we dey mark somtin for removal:
|
||||
|
||||
```javascript
|
||||
// Mark objek for komot
|
||||
enemy.dead = true;
|
||||
```
|
||||
|
||||
**Why dis approach work:**
|
||||
- We go mark di object as "dead" but no go delete am immediately
|
||||
- Dis one go allow di current game frame finish well
|
||||
- No crashes for trying to use object wey don already go!
|
||||
|
||||
Then filter out objects wey we mark before next render cycle:
|
||||
|
||||
```javascript
|
||||
gameObjects = gameObjects.filter(go => !go.dead);
|
||||
```
|
||||
|
||||
**Wetin dis filtering dey do:**
|
||||
- E go create fresh list wey get only "living" objects
|
||||
- E go throway anything wey mark as dead
|
||||
- E go keep your game dey run smoothly
|
||||
- E go prevent memory bloat from plenty destroyed objects wey dey pile up
|
||||
|
||||
## Implementing laser mechanics
|
||||
|
||||
Laser projectiles for games dey work like photon torpedoes for Star Trek - dem be separate objects wey dey travel straight line till dem hit somtin. Every time you press spacebar, e go create new laser object wey go move across screen.
|
||||
|
||||
To make dis one work, we need arrange few things:
|
||||
|
||||
**Key components to implement:**
|
||||
- **Create** laser objects wey go come from hero position
|
||||
- **Handle** keyboard input to trigger laser creation
|
||||
- **Manage** laser movement and lifecycle
|
||||
- **Implement** visual representation for laser projectiles
|
||||
|
||||
## Implementing firing rate control
|
||||
|
||||
To fire unlimited times go overwhelm di game engine and make di game too easy. Real weapon systems dey face dis kind wahala too - even USS Enterprise phasers need time to recharge between shots.
|
||||
|
||||
We go implement cooldown system wey go prevent rapid-fire spam but still keep controls responsive:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Player
|
||||
participant Weapon
|
||||
participant Cooldown
|
||||
participant Game
|
||||
|
||||
Player->>Weapon: Press Spacebar
|
||||
Weapon->>Cooldown: Check if cool
|
||||
|
||||
alt Weapon dey Ready
|
||||
Cooldown->>Weapon: cool = true
|
||||
Weapon->>Game: Create Laser
|
||||
Weapon->>Cooldown: Start new cooldown
|
||||
Cooldown->>Cooldown: cool = false
|
||||
|
||||
Note over Cooldown: Wait 500ms
|
||||
|
||||
Cooldown->>Cooldown: cool = true
|
||||
else Weapon dey Cool
|
||||
Cooldown->>Weapon: cool = false
|
||||
Weapon->>Player: No action
|
||||
end
|
||||
```
|
||||
```javascript
|
||||
class Cooldown {
|
||||
constructor(time) {
|
||||
this.cool = false;
|
||||
setTimeout(() => {
|
||||
this.cool = true;
|
||||
}, time);
|
||||
}
|
||||
}
|
||||
|
||||
class Weapon {
|
||||
constructor() {
|
||||
this.cooldown = null;
|
||||
}
|
||||
|
||||
fire() {
|
||||
if (!this.cooldown || this.cooldown.cool) {
|
||||
// Mak laser projectile
|
||||
this.cooldown = new Cooldown(500);
|
||||
} else {
|
||||
// Weapon dey still cool down
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**How di cooldown dey work:**
|
||||
- Wen e first create, weapon start "hot" (no fit fire yet)
|
||||
- After timeout period, e become "cool" (ready to fire)
|
||||
- Before firing, we go check: "Weapon cool?"
|
||||
- Dis one go prevent spam clicking but keep control responsive
|
||||
|
||||
✅ Refer to lesson 1 for di space game series to remind yourself about cooldowns.
|
||||
|
||||
## Building the collision system
|
||||
|
||||
You go extend your space game code to add collision detection system. Like di International Space Station automated collision avoidance system, your game go dey monitor object position dey go respond to intersections.
|
||||
|
||||
Starting from your previous lesson code, you go add collision detection with specific rules to control object interactions.
|
||||
|
||||
> 💡 **Pro Tip**: Di laser sprite dey inside your assets folder and e dey referenced in your code, ready for use.
|
||||
|
||||
### Collision rules to implement
|
||||
|
||||
**Game mechanics to add:**
|
||||
1. **Laser hit enemy**: Enemy object go destroy wen laser projectile hit am
|
||||
2. **Laser hit screen boundary**: Laser go remove wen e reach top edge of screen
|
||||
3. **Enemy and hero collision**: Both objects go destroy wen dem intersect
|
||||
4. **Enemy reach bottom**: Game over if enemies reach screen bottom
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Collision Detection Foundation**: Before you implement, make sure you sabi:
|
||||
- ✅ How rectangle boundaries dey define collision zones
|
||||
- ✅ Why separation test better than intersection calcuation
|
||||
- ✅ Importance of object lifecycle management for game loops
|
||||
- ✅ How event-driven systems dey coordinate collision response
|
||||
|
||||
**Quick Self-Test**: Wetin go happen if you delete objects immediately instead of marking dem?
|
||||
*Answer: Mid-loop deletion fit cause crash or skip objects during iteration*
|
||||
|
||||
**Physics Understanding**: Now you understand:
|
||||
- **Coordinate Systems**: How position and size create boundaries
|
||||
- **Intersection Logic**: Maths principles behind collision detection
|
||||
- **Performance Optimization**: Why efficient algorithms important for real-time systems
|
||||
- **Memory Management**: Safe object lifecycle patterns for stability
|
||||
|
||||
## Setting up your development environment
|
||||
|
||||
Better news - we don set most ground for you already! All your game assets and basic structure dey inside `your-work` subfolder, ready for you to add di cool collision features.
|
||||
|
||||
### Project structure
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
**Understand file structure:**
|
||||
- **Contains** all sprite images needed for game objects
|
||||
- **Includes** main HTML document and JavaScript app file
|
||||
- **Provides** package config for local development server
|
||||
|
||||
### Starting the development server
|
||||
|
||||
Go your project folder and start local server:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
**Dis command dem do:**
|
||||
- **Change** directory to your project folder
|
||||
- **Start** local HTTP server at `http://localhost:5000`
|
||||
- **Serve** your game files for testing and development
|
||||
- **Enable** live development with automatic reload
|
||||
|
||||
Open your browser and go `http://localhost:5000` to see your current game state with hero and enemies on screen.
|
||||
|
||||
### Step-by-step implementation
|
||||
|
||||
Like how NASA take program Voyager spacecraft systematically, we go implement collision detection methodically, building each part step by step.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["1. Rectangle Bounds"] --> B["2. Intersection Detection"]
|
||||
B --> C["3. Laser System"]
|
||||
C --> D["4. Event Handling"]
|
||||
D --> E["5. Collision Rules"]
|
||||
E --> F["6. Cooldown System"]
|
||||
|
||||
G["Object Boundaries"] --> A
|
||||
H["Physics Algorithm"] --> B
|
||||
I["Projectile Creation"] --> C
|
||||
J["Keyboard Input"] --> D
|
||||
K["Game Logic"] --> E
|
||||
L["Rate Limiting"] --> F
|
||||
|
||||
F --> M["🎮 Complete Game"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
style M fill:#e1f5fe
|
||||
```
|
||||
#### 1. Add rectangle collision bounds
|
||||
|
||||
First, make we teach our game objects how to describe their boundaries. Add dis method to your `GameObject` class:
|
||||
|
||||
```javascript
|
||||
rectFromGameObject() {
|
||||
return {
|
||||
top: this.y,
|
||||
left: this.x,
|
||||
bottom: this.y + this.height,
|
||||
right: this.x + this.width,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
**Dis method dey do:**
|
||||
- **Create** rectangle object with exact boundary coordinates
|
||||
- **Calculate** bottom and right edges using position plus dimensions
|
||||
- **Return** object ready for collision detection algorithm
|
||||
- **Provide** standardized interface for all game objects
|
||||
|
||||
#### 2. Implement intersection detection
|
||||
|
||||
Make we create our collision detective - function wey fit tell when two rectangles dey overlap:
|
||||
|
||||
```javascript
|
||||
function intersectRect(r1, r2) {
|
||||
return !(
|
||||
r2.left > r1.right ||
|
||||
r2.right < r1.left ||
|
||||
r2.top > r1.bottom ||
|
||||
r2.bottom < r1.top
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Dis algorithm dey work by:**
|
||||
- **Test** four separation conditions between rectangles
|
||||
- **Return** `false` if any separation condition true
|
||||
- **Indicate** collision when no separation dey
|
||||
- **Use** negation logic for efficient intersection testing
|
||||
|
||||
#### 3. Implement laser firing system
|
||||
|
||||
Na here dia action dey start! Make we setup laser firing system.
|
||||
|
||||
##### Message constants
|
||||
|
||||
First, define some message types so different parts of our game fit talk with each other:
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
||||
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
||||
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
||||
```
|
||||
|
||||
**These constants provide:**
|
||||
- **Standardize** event names across application
|
||||
- **Enable** consistent communication between game systems
|
||||
- **Prevent** typo for event handler registration
|
||||
|
||||
##### Keyboard input handling
|
||||
|
||||
Add space key detection to your key event listener:
|
||||
|
||||
```javascript
|
||||
} else if(evt.keyCode === 32) {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
||||
}
|
||||
```
|
||||
|
||||
**Dis input handler:**
|
||||
- **Detect** space key press with keyCode 32
|
||||
- **Emit** standardized event message
|
||||
- **Allow** decoupled firing logic
|
||||
|
||||
##### Event listener setup
|
||||
|
||||
Register firing behavior inside your `initGame()` function:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
||||
if (hero.canFire()) {
|
||||
hero.fire();
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
**Dis event listener:**
|
||||
- **Respond** to space key events
|
||||
- **Check** firing cooldown status
|
||||
- **Trigger** laser creation when allowed
|
||||
|
||||
Add collision handling for laser-enemy interaction:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
});
|
||||
```
|
||||
|
||||
**Dis collision handler:**
|
||||
- **Receive** collision event data with both objects
|
||||
- **Mark** both objects for removal
|
||||
- **Ensure** proper cleanup after collision
|
||||
|
||||
#### 4. Create the Laser class
|
||||
|
||||
Implement laser projectile wey go move upward and handle im own lifecycle:
|
||||
|
||||
```javascript
|
||||
class Laser extends GameObject {
|
||||
constructor(x, y) {
|
||||
super(x, y);
|
||||
this.width = 9;
|
||||
this.height = 33;
|
||||
this.type = 'Laser';
|
||||
this.img = laserImg;
|
||||
|
||||
let id = setInterval(() => {
|
||||
if (this.y > 0) {
|
||||
this.y -= 15;
|
||||
} else {
|
||||
this.dead = true;
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Dis class implementation:**
|
||||
- **Extend** GameObject to inherit basic functionality
|
||||
- **Set** proper dimensions for laser sprite
|
||||
- **Create** automatic upward movement using `setInterval()`
|
||||
- **Handle** self-destruction wen e reach screen top
|
||||
- **Manage** its own animation timing and cleanup
|
||||
|
||||
#### 5. Implement collision detection system
|
||||
|
||||
Create complete collision detection function:
|
||||
|
||||
```javascript
|
||||
function updateGameObjects() {
|
||||
const enemies = gameObjects.filter(go => go.type === 'Enemy');
|
||||
const lasers = gameObjects.filter(go => go.type === "Laser");
|
||||
|
||||
// Test laser and enemy dem collision
|
||||
lasers.forEach((laser) => {
|
||||
enemies.forEach((enemy) => {
|
||||
if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
|
||||
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
||||
first: laser,
|
||||
second: enemy,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Comot objects wey dem don destroy
|
||||
gameObjects = gameObjects.filter(go => !go.dead);
|
||||
}
|
||||
```
|
||||
|
||||
**Dis collision system:**
|
||||
- **Filter** game objects by type to test efficiently
|
||||
- **Test** every laser against every enemy for intersections
|
||||
- **Emit** collision events wen intersections detect
|
||||
- **Clean** destroyed objects after collision process
|
||||
|
||||
> ⚠️ **Important**: Add `updateGameObjects()` to your main game loop inside `window.onload` to enable collision detection.
|
||||
|
||||
#### 6. Add cooldown system to Hero class
|
||||
|
||||
Improve Hero class with firing mechanics and rate limiting:
|
||||
|
||||
```javascript
|
||||
class Hero extends GameObject {
|
||||
constructor(x, y) {
|
||||
super(x, y);
|
||||
this.width = 99;
|
||||
this.height = 75;
|
||||
this.type = "Hero";
|
||||
this.speed = { x: 0, y: 0 };
|
||||
this.cooldown = 0;
|
||||
}
|
||||
|
||||
fire() {
|
||||
gameObjects.push(new Laser(this.x + 45, this.y - 10));
|
||||
this.cooldown = 500;
|
||||
|
||||
let id = setInterval(() => {
|
||||
if (this.cooldown > 0) {
|
||||
this.cooldown -= 100;
|
||||
} else {
|
||||
clearInterval(id);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
canFire() {
|
||||
return this.cooldown === 0;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Understand enhanced Hero class:**
|
||||
- **Initialize** cooldown timer at zero (ready to fire)
|
||||
- **Create** laser objects wey position above hero ship
|
||||
- **Set** cooldown time to prevent rapid firing
|
||||
- **Decrement** cooldown timer using interval updates
|
||||
- **Provide** firing status check with `canFire()` method
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Complete System Understanding**: Make sure you sabi how di collision system work:
|
||||
- ✅ How rectangle boundaries fit enable efficient collision detection?
|
||||
- ✅ Why object lifecycle management dey critical for game stability?
|
||||
- ✅ How cooldown system dey prevent performance wahala?
|
||||
- ✅ Wetin event-driven architecture role be for collision handling?
|
||||
|
||||
**System Integration**: Your collision detection dey show:
|
||||
- **Mathematical Precision**: Rectangle intersection algorithm
|
||||
- **Performance Optimization**: Efficient collision testing pattern
|
||||
- **Memory Management**: Safe object creation and destruction
|
||||
- **Event Coordination**: Decoupled system communication
|
||||
- **Real-time Processing**: Frame-based update cycles
|
||||
|
||||
**Professional Patterns**: You don implement:
|
||||
- **Separation of Concerns**: Physics, rendering, input separate
|
||||
- **Object-Oriented Design**: Inheritance and polymorphism
|
||||
- **State Management**: Object lifecycle and game state tracking
|
||||
- **Performance Optimization**: Efficient algorithm for real-time use
|
||||
|
||||
### Testing your implementation
|
||||
|
||||
Your space game now get complete collision detection and combat mechanics. 🚀 Test these new features:
|
||||
- **Move** wit arrow keys to check movement controls
|
||||
- **Fire lasers** with spacebar - see how cooldown stop spam click
|
||||
- **Watch collision** wen lasers hit enemies and remove dem
|
||||
- **Check cleanup** as destroyed objects disappear from game
|
||||
|
||||
You don successfully implement collision detection system with same maths principles wey guide spacecraft navigation and robotics.
|
||||
|
||||
### ⚡ **Wetn You Fit Do for Di Next 5 Minutes**
|
||||
- [ ] Open browser DevTools and set breakpoint for your collision detection function
|
||||
- [ ] Try change laser speed or enemy movement to see collision effects
|
||||
- [ ] Experiment with different cooldown values to test firing rates
|
||||
- [ ] Add `console.log` statements to track collision events for real-time
|
||||
|
||||
### 🎯 **Wetin You Fit Achieve Dis Hour**
|
||||
- [ ] Finish di post-lesson quiz and sabi di collision detection algorithms
|
||||
- [ ] Add visual effects like explosions wen collisions happen
|
||||
- [ ] Implement different kain projectiles wey get different properties
|
||||
- [ ] Create power-ups wey go boost player abilities for small time
|
||||
- [ ] Add sound effects to make collisions dey more satisfying
|
||||
|
||||
### 📅 **Your Week-Long Physics Programming**
|
||||
- [ ] Complete di full space game wey get polished collision systems
|
||||
- [ ] Implement advanced collision shapes beyond rectangles (circles, polygons)
|
||||
- [ ] Add particle systems for realistic explosion effects
|
||||
- [ ] Create complex enemy behaviour with collision avoidance
|
||||
- [ ] Optimize collision detection for better performance with plenty objects
|
||||
- [ ] Add physics simulation like momentum and realistic movement
|
||||
|
||||
### 🌟 **Your Month-Long Game Physics Mastery**
|
||||
- [ ] Build games with advanced physics engines and realistic simulations
|
||||
- [ ] Learn 3D collision detection and spatial partitioning algorithms
|
||||
- [ ] Contribute to open source physics libraries and game engines
|
||||
- [ ] Master performance optimization for graphics-intensive applications
|
||||
- [ ] Create educational content about game physics and collision detection
|
||||
- [ ] Build a portfolio wey show advanced physics programming skills
|
||||
|
||||
## 🎯 Your Collision Detection Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Collision Detection & Game Physics Learning Progression
|
||||
|
||||
section Foundation (10 minutes)
|
||||
Rectangle Math: Coordinate systems
|
||||
: Boundary calculations
|
||||
: Position tracking
|
||||
: Dimension management
|
||||
|
||||
section Algorithm Design (20 minutes)
|
||||
Intersection Logic: Separation testing
|
||||
: Overlap detection
|
||||
: Performance optimization
|
||||
: Edge case handling
|
||||
|
||||
section Game Implementation (30 minutes)
|
||||
Object Systems: Lifecycle management
|
||||
: Event coordination
|
||||
: State tracking
|
||||
: Memory cleanup
|
||||
|
||||
section Interactive Features (40 minutes)
|
||||
Combat Mechanics: Projectile systems
|
||||
: Weapon cooldowns
|
||||
: Damage calculation
|
||||
: Visual feedback
|
||||
|
||||
section Advanced Physics (50 minutes)
|
||||
Real-time Systems: Frame rate optimization
|
||||
: Spatial partitioning
|
||||
: Collision response
|
||||
: Physics simulation
|
||||
|
||||
section Professional Techniques (1 week)
|
||||
Game Engine Concepts: Component systems
|
||||
: Physics pipelines
|
||||
: Performance profiling
|
||||
: Cross-platform optimization
|
||||
|
||||
section Industry Applications (1 month)
|
||||
Production Skills: Large-scale optimization
|
||||
: Team collaboration
|
||||
: Engine development
|
||||
: Platform deployment
|
||||
```
|
||||
### 🛠️ Your Game Physics Toolkit Summary
|
||||
|
||||
After you don finish dis lesson, you don master:
|
||||
- **Collision Mathematics**: Rectangle intersection algorithms and coordinate systems
|
||||
- **Performance Optimization**: Efficient collision detection for real-time applications
|
||||
- **Object Lifecycle Management**: Safe creation, updating, and destruction patterns
|
||||
- **Event-Driven Architecture**: Decoupled systems for collision response
|
||||
- **Game Loop Integration**: Frame-based physics updates and rendering coordination
|
||||
- **Input Systems**: Responsive controls with rate limiting and feedback
|
||||
- **Memory Management**: Efficient object pooling and cleanup strategies
|
||||
|
||||
**Real-World Applications**: Your collision detection skills fit apply straight to:
|
||||
- **Interactive Simulations**: Scientific modeling and educational tools
|
||||
- **User Interface Design**: Drag-and-drop interactions and touch detection
|
||||
- **Data Visualization**: Interactive charts and clickable elements
|
||||
- **Mobile Development**: Touch gesture recognition and collision handling
|
||||
- **Robotics Programming**: Path planning and obstacle avoidance
|
||||
- **Computer Graphics**: Ray tracing and spatial algorithms
|
||||
|
||||
**Professional Skills Gained**: Now you fit:
|
||||
- **Design** efficient algorithms for real-time collision detection
|
||||
- **Implement** physics systems wey fit scale with object complexity
|
||||
- **Debug** complex interaction systems with mathematical principles
|
||||
- **Optimize** performance for different hardware and browser capabilities
|
||||
- **Architect** maintainable game systems with proven design patterns
|
||||
|
||||
**Game Development Concepts Mastered**:
|
||||
- **Physics Simulation**: Real-time collision detection and response
|
||||
- **Performance Engineering**: Optimized algorithms for interactive applications
|
||||
- **Event Systems**: Decoupled communication between game components
|
||||
- **Object Management**: Efficient lifecycle patterns for dynamic content
|
||||
- **Input Handling**: Responsive controls with correct feedback
|
||||
|
||||
**Next Level**: You ready to explore advanced physics engines like Matter.js, implement 3D collision detection, or build complex particle systems!
|
||||
|
||||
🌟 **Achievement Unlocked**: You don build complete physics-based interaction system with professional-grade collision detection!
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use the Agent mode to complete dis challenge:
|
||||
|
||||
**Description:** Improve di collision detection system by adding power-ups wey go spawn randomly and give temporary abilities when hero ship collect dem.
|
||||
|
||||
**Prompt:** Create PowerUp class wey extend GameObject and implement collision detection between di hero and power-ups. Add at least two types of power-ups: one wey dey increase fire rate (reduce cooldown) and another wey create temporary shield. Include spawn logic wey go create power-ups at random intervals and positions.
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Add explosion! Check di game assets inside [the Space Art repo](../../../../6-space-game/solution/spaceArt/readme.txt) and try add explosion wen di laser hit alien
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/36)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Try play with di intervals for your game so far. Wetin happen wen you change dem? Read more about [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
|
||||
|
||||
## Assignment
|
||||
|
||||
[Explore collisions](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate by AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or wrong yan. Di original document wey e original language na di main correct source. For important tori dem, make person wey sabi human translator do am. We no go take responsibility if person no understand or dem interpret am wrong because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "124efddbb65166cddb38075ad6dae324",
|
||||
"translation_date": "2026-01-08T13:35:26+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Explore Collisions
|
||||
|
||||
## Instructions
|
||||
|
||||
Apply your collision detection knowledge by creating a custom mini-game wey show different kain object interactions. Dis assignment go help you sabi collision mechanics through creative implementation and experiment.
|
||||
|
||||
### Project requirements
|
||||
|
||||
**Make small interactive game wey get:**
|
||||
- **Plenty moving objects** wey person fit control with keyboard or mouse input
|
||||
- **Collision detection system** wey use rectangle intersection principles from the lesson
|
||||
- **Visual feedback** when collisions happen (object destruction, color changes, effects)
|
||||
- **Game rules** wey make collisions get meaning and dey interesting
|
||||
|
||||
### Creative suggestions
|
||||
|
||||
**Try do one of these scenarios:**
|
||||
- **Asteroid field**: Steer ship through dangerous space debris
|
||||
- **Bumper cars**: Build physics-based collision arena
|
||||
- **Meteor defense**: Protect Earth from incoming space rocks
|
||||
- **Collection game**: Gather items and avoid obstacles
|
||||
- **Territory control**: Objects wey dey compete to claim space
|
||||
|
||||
### Technical implementation
|
||||
|
||||
**Your solution suppose show:**
|
||||
- Correct use of rectangle-based collision detection
|
||||
- Event-driven programming for user input
|
||||
- Object lifecycle management (creation and destruction)
|
||||
- Clean code organization wit proper class structure
|
||||
|
||||
### Bonus challenges
|
||||
|
||||
**Make your game better with extra features:**
|
||||
- **Particle effects** when collisions happen
|
||||
- **Sound effects** for different collision types
|
||||
- **Scoring system** based on collision results
|
||||
- **Multiple collision types** with different behaviors
|
||||
- **Progressive difficulty** wey increase over time
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
|----------|-----------|----------|-------------------|
|
||||
| **Collision Detection** | Implements accurate rectangle-based collision detection with multiple object types and sophisticated interaction rules | Basic collision detection dey work correct with simple object interactions | Collision detection get wahala or no dey work consistent |
|
||||
| **Code Quality** | Clean, well-organized code wit proper class structure, meaningful variable names, and correct comments | Code dey work but fit dey better organized or documented | Code hard to understand or no well structured |
|
||||
| **User Interaction** | Responsive controls wit smooth gameplay, clear visual feedback, and engaging mechanics | Basic controls dey work wit enough feedback | Controls no dey respond or dey confusing |
|
||||
| **Creativity** | Original concept wit unique features, visual polish, and innovative collision behaviors | Standard implementation wit some creative parts | Basic functionality without creative improvements |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg know say automated translation fit get mistakes or no too correct. Di original document wey e dey for im own language na di correct one wey you suppose refer. If na serious tins, make you use professional human translator. We no go responsible for any kian mis-understanding or wrong meaning wey fit come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T14:59:43+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, wey I lef blank on purpose
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automated translation fit get errors or no too correct. Di original document wey dem write for im original language na di correct one to trust. For important info, e better make human professional translate am. We no go responsible if person misundastand or wrong interpret dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T14:58:58+00:00",
|
||||
"source_file": "6-space-game/4-collision-detection/your-work/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, e left blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automated translation fit get mistakes or no too correct. The original document wey dem write for im own language na the main authority. For important info, make person wey sabi do proper human translation do am. We no go responsible for any wrong understanding or mistake wey fit come from to use dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,510 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "2ed9145a16cf576faa2a973dff84d099",
|
||||
"translation_date": "2026-01-08T14:07:40+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Space Game Part 5: Scoring and Lives
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Game Design Journey
|
||||
section Player Feedback
|
||||
Understand scoring psychology: 3: Student
|
||||
Learn visual communication: 4: Student
|
||||
Design reward systems: 4: Student
|
||||
section Technical Implementation
|
||||
Canvas text rendering: 4: Student
|
||||
State management: 5: Student
|
||||
Event-driven updates: 5: Student
|
||||
section Game Polish
|
||||
User experience design: 5: Student
|
||||
Balance challenge and reward: 5: Student
|
||||
Create engaging gameplay: 5: Student
|
||||
```
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/37)
|
||||
|
||||
You ready to make your space game feel like real game? Make we add scoring points and managing lives - na the main kian thing wey change early arcade games like Space Invaders from simple play into addictive entertainment. Na here your game go start to dey really playable.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Game Feedback Systems))
|
||||
Visual Communication
|
||||
Text Rendering
|
||||
Icon Display
|
||||
Color Psychology
|
||||
Layout Design
|
||||
Scoring Mechanics
|
||||
Point Values
|
||||
Reward Timing
|
||||
Progress Tracking
|
||||
Achievement Systems
|
||||
Life Management
|
||||
Risk vs Reward
|
||||
Player Agency
|
||||
Difficulty Balance
|
||||
Recovery Mechanics
|
||||
User Experience
|
||||
Immediate Feedback
|
||||
Clear Information
|
||||
Emotional Response
|
||||
Engagement Loops
|
||||
Implementation
|
||||
Canvas API
|
||||
State Management
|
||||
Event Systems
|
||||
Performance
|
||||
```
|
||||
## Drawing Text on Screen - Your Game's Voice
|
||||
|
||||
To show your score, we need learn how to put text for canvas. The `fillText()` method na your main tool for dis - na the same way wey dem dey use for old school arcade games to show scores and status information.
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A["📝 Text Content"] --> B["🎨 Styling"]
|
||||
B --> C["📍 Positioning"]
|
||||
C --> D["🖼️ Canvas Render"]
|
||||
|
||||
E["Font Family"] --> B
|
||||
F["Font Size"] --> B
|
||||
G["Color"] --> B
|
||||
H["Alignment"] --> B
|
||||
|
||||
I["X Coordinate"] --> C
|
||||
J["Y Coordinate"] --> C
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
```
|
||||
You fit control everything for how the text go look:
|
||||
|
||||
```javascript
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = "red";
|
||||
ctx.textAlign = "right";
|
||||
ctx.fillText("show this on the screen", 0, 0);
|
||||
```
|
||||
|
||||
✅ Dive deep inside [adding text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - you fit surprise yourself how you fit get creative with fonts and style!
|
||||
|
||||
## Lives - More Than Just a Number
|
||||
|
||||
For game design, "life" mean how many chance player get to make mistake. Dis idea come from pinball machines, where you go get many balls to play with. For early video games like Asteroids, lives mean say player fit take chance, learn from mistakes.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🎮 Player Action"] --> B{"Risk Assessment"}
|
||||
|
||||
B --> C["High Risk, High Reward"]
|
||||
B --> D["Safe Strategy"]
|
||||
|
||||
C --> E{"Outcome"}
|
||||
D --> F["Steady Progress"]
|
||||
|
||||
E -->|Success| G["🏆 Big Points"]
|
||||
E -->|Failure| H["💔 Lose Life"]
|
||||
|
||||
H --> I{"Lives Remaining?"}
|
||||
I -->|Yes| J["🔄 Try Again"]
|
||||
I -->|No| K["💀 Game Over"]
|
||||
|
||||
J --> B
|
||||
G --> B
|
||||
F --> B
|
||||
|
||||
style C fill:#ffebee
|
||||
style D fill:#e8f5e8
|
||||
style G fill:#e3f2fd
|
||||
style H fill:#fff3e0
|
||||
```
|
||||
How e go show matter well well - to show ship icons instead of just "Lives: 3" dey give quick visual understanding, just like how early arcade machines use icon to talk across language wahala.
|
||||
|
||||
## Building Your Game's Reward System
|
||||
|
||||
Now we go put the main feedback systems wey dey keep players interested:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Player
|
||||
participant GameEngine
|
||||
participant ScoreSystem
|
||||
participant LifeSystem
|
||||
participant Display
|
||||
|
||||
Player->>GameEngine: Shoot Enemy
|
||||
GameEngine->>ScoreSystem: Comot Points
|
||||
ScoreSystem->>ScoreSystem: +100 points
|
||||
ScoreSystem->>Display: Change Score
|
||||
|
||||
Player->>GameEngine: Jam Enemy
|
||||
GameEngine->>LifeSystem: Lose Life
|
||||
LifeSystem->>LifeSystem: -1 life
|
||||
LifeSystem->>Display: Change Lives
|
||||
|
||||
alt Lives > 0
|
||||
LifeSystem->>Player: Continue Playin
|
||||
else Lives = 0
|
||||
LifeSystem->>GameEngine: Game Done
|
||||
end
|
||||
```
|
||||
- **Scoring system**: Every enemy ship wey you destroy go give you 100 points (round numbers easy for players to calculate inside their head). The score go show for bottom left corner.
|
||||
- **Life counter**: Your hero start with three lives - na standard wey early arcade games set to balance challenge and playability. Every time you crash with enemy, you lose one life. We go show the lives left for bottom right with ship icons .
|
||||
|
||||
## Make We Start Build!
|
||||
|
||||
First, arrange your workspace. Go your `your-work` sub folder. You supposed see these files:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
To test your game, start the development server from the `your_work` folder:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Dis one go run local server for `http://localhost:5000`. Open dis address for your browser to see your game. Try the controls with arrow keys and try shoot enemy to confirm everything dey work.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["1. Asset Loading"] --> B["2. Game Variables"]
|
||||
B --> C["3. Collision Detection"]
|
||||
C --> D["4. Hero Enhancement"]
|
||||
D --> E["5. Display Functions"]
|
||||
E --> F["6. Event Handlers"]
|
||||
|
||||
G["Life Icon Image"] --> A
|
||||
H["Score & Lives Tracking"] --> B
|
||||
I["Hero-Enemy Intersections"] --> C
|
||||
J["Points & Life Methods"] --> D
|
||||
K["Text & Icon Rendering"] --> E
|
||||
L["Reward & Penalty Logic"] --> F
|
||||
|
||||
F --> M["🎮 Complete Game"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
style M fill:#e1f5fe
|
||||
```
|
||||
### Time to Code!
|
||||
|
||||
1. **Collect the visual assets wey you need**. Copy the `life.png` asset from `solution/assets/` folder go your `your-work` folder. Then add the lifeImg to your window.onload function:
|
||||
|
||||
```javascript
|
||||
lifeImg = await loadTexture("assets/life.png");
|
||||
```
|
||||
|
||||
1. No forget to add the `lifeImg` to your assets list:
|
||||
|
||||
```javascript
|
||||
let heroImg,
|
||||
...
|
||||
lifeImg,
|
||||
...
|
||||
eventEmitter = new EventEmitter();
|
||||
```
|
||||
|
||||
2. **Setup your game variables**. Add code to track your total score (we start from 0) and lives wey remain (we start with 3). We go show dis for screen make players always sabi how e be.
|
||||
|
||||
3. **Implement collision detection**. Extend your `updateGameObjects()` function to find when enemy crash your hero:
|
||||
|
||||
```javascript
|
||||
enemies.forEach(enemy => {
|
||||
const heroRect = hero.rectFromGameObject();
|
||||
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
|
||||
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
4. **Add life and point tracking to your Hero**.
|
||||
1. **Start the counters**. Under `this.cooldown = 0` inside your `Hero` class, set life and points:
|
||||
|
||||
```javascript
|
||||
this.life = 3;
|
||||
this.points = 0;
|
||||
```
|
||||
|
||||
1. **Show these values to player**. Make functions wey go draw these for screen:
|
||||
|
||||
```javascript
|
||||
function drawLife() {
|
||||
// TODO, 35, 27
|
||||
const START_POS = canvas.width - 180;
|
||||
for(let i=0; i < hero.life; i++ ) {
|
||||
ctx.drawImage(
|
||||
lifeImg,
|
||||
START_POS + (45 * (i+1) ),
|
||||
canvas.height - 37);
|
||||
}
|
||||
}
|
||||
|
||||
function drawPoints() {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = "red";
|
||||
ctx.textAlign = "left";
|
||||
drawText("Points: " + hero.points, 10, canvas.height-20);
|
||||
}
|
||||
|
||||
function drawText(message, x, y) {
|
||||
ctx.fillText(message, x, y);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
1. **Connect everything enter your game loop**. Add these functions to your window.onload function just after `updateGameObjects()`:
|
||||
|
||||
```javascript
|
||||
drawPoints();
|
||||
drawLife();
|
||||
```
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Game Design Understanding**: Before you put consequences, make sure you understand:
|
||||
- ✅ How visual feedback dey tell players how game be
|
||||
- ✅ Why to place UI elements same place dey help usability
|
||||
- ✅ The mindset behind point values and managing life
|
||||
- ✅ How canvas text drawing different from HTML text
|
||||
|
||||
**Quick Self-Test**: Why arcade games dey usually use round numbers for points?
|
||||
*Answer: Round numbers easier for players calculate inside their head and e dey give satisfying psychological reward*
|
||||
|
||||
**User Experience Principles**: Now you dey apply:
|
||||
- **Visual Hierarchy**: Important info dey show well
|
||||
- **Immediate Feedback**: Player action dey update quick quick
|
||||
- **Cognitive Load**: Simple, clear info presentation
|
||||
- **Emotional Design**: Icons and colors wey connect player
|
||||
|
||||
1. **Implement game consequences and rewards**. Now we go add feedback systems wey make player actions get meaning:
|
||||
|
||||
1. **Collisions dey cost lives**. Anytime your hero jam enemy, you go lose one life.
|
||||
|
||||
Add this method to your `Hero` class:
|
||||
|
||||
```javascript
|
||||
decrementLife() {
|
||||
this.life--;
|
||||
if (this.life === 0) {
|
||||
this.dead = true;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. **Shooting enemies dey give points**. Every hit wey land well go give 100 points, na quick positive feedback for good shooting.
|
||||
|
||||
Expand your Hero class with this increment method:
|
||||
|
||||
```javascript
|
||||
incrementPoints() {
|
||||
this.points += 100;
|
||||
}
|
||||
```
|
||||
|
||||
Now connect these functions to your collision events:
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
})
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
});
|
||||
```
|
||||
|
||||
✅ You wan know other games wey JavaScript and Canvas dey build? Go explore - you go shock how e fit dey!
|
||||
|
||||
After you add these, test your game to see the complete feedback system dey work. You go see life icons for bottom right, score for bottom left, and watch as crash reduce lives and correct shoot increase your score.
|
||||
|
||||
Your game now get the main mechanics that make old arcade games fun - clear goals, immediate feedback, and consequences wey matter to player actions.
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Complete Game Design System**: Check you sabi player feedback system well:
|
||||
- ✅ How scoring mechanics dey create motivation and player engagement?
|
||||
- ✅ Why visual consistency important for UI design?
|
||||
- ✅ How life system balance challenge with player retention?
|
||||
- ✅ Wetin immediate feedback dey do to make gameplay satisfy?
|
||||
|
||||
**System Integration**: Your feedback system dey show:
|
||||
- **User Experience Design**: Clear visual info and hierarchy
|
||||
- **Event-Driven Architecture**: Quick updates to player actions
|
||||
- **State Management**: Track and show changing game data
|
||||
- **Canvas Mastery**: Text drawing and sprite placement
|
||||
- **Game Psychology**: Know player motivation and engagement
|
||||
|
||||
**Professional Patterns**: You don implement:
|
||||
- **MVC Architecture**: Separate game logic, data, and presentation
|
||||
- **Observer Pattern**: Event-driven updates for game state
|
||||
- **Component Design**: Reusable functions for drawing and logic
|
||||
- **Performance Optimization**: Efficient drawing for game loops
|
||||
|
||||
### ⚡ **Wetin You Fit Do for Next 5 Minutes**
|
||||
- [ ] Try different font sizes and colors for the score display
|
||||
- [ ] Try change point values and feel how e affect gameplay
|
||||
- [ ] Add console.log to trace when points and lives change
|
||||
- [ ] Test edge cases like when lives finish or you get high scores
|
||||
|
||||
### 🎯 **Wetin You Fit Do This Hour**
|
||||
- [ ] Complete post-lesson quiz and understand game design psychology
|
||||
- [ ] Add sound effects for scoring and losing lives
|
||||
- [ ] Implement high score system using localStorage
|
||||
- [ ] Add different point values for different enemy types
|
||||
- [ ] Add visual effects like screen shake when life lose
|
||||
|
||||
### 📅 **Your One Week Game Design Journey**
|
||||
- [ ] Complete full space game with solid feedback systems
|
||||
- [ ] Add advanced scoring mechanics like combo multipliers
|
||||
- [ ] Add achievements and unlockable content
|
||||
- [ ] Create difficulty progression and balance systems
|
||||
- [ ] Design user interfaces for menus and game over screens
|
||||
- [ ] Study other games to understand engagement ways
|
||||
|
||||
### 🌟 **Your One Month Game Development Mastery**
|
||||
- [ ] Build full games with complex progression systems
|
||||
- [ ] Learn game analytics and player behavior measuring
|
||||
- [ ] Contribute to open source game dev projects
|
||||
- [ ] Master advanced game design patterns and monetization
|
||||
- [ ] Make educational content about game design and user experience
|
||||
- [ ] Build portfolio showing your game design and development skills
|
||||
|
||||
## 🎯 Your Game Design Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Game Design & Player Feedback Learning Progression
|
||||
|
||||
section Foundation (10 minutes)
|
||||
Visual Communication: Text rendering
|
||||
: Icon design
|
||||
: Layout principles
|
||||
: Color psychology
|
||||
|
||||
section Player Psychology (20 minutes)
|
||||
Motivation Systems: Point values
|
||||
: Risk vs reward
|
||||
: Progress feedback
|
||||
: Achievement design
|
||||
|
||||
section Technical Implementation (30 minutes)
|
||||
Canvas Mastery: Text positioning
|
||||
: Sprite rendering
|
||||
: State management
|
||||
: Performance optimization
|
||||
|
||||
section Game Balance (40 minutes)
|
||||
Difficulty Design: Life management
|
||||
: Scoring curves
|
||||
: Player retention
|
||||
: Accessibility
|
||||
|
||||
section User Experience (50 minutes)
|
||||
Interface Design: Information hierarchy
|
||||
: Responsive feedback
|
||||
: Emotional design
|
||||
: Usability testing
|
||||
|
||||
section Advanced Systems (1 week)
|
||||
Game Mechanics: Progression systems
|
||||
: Analytics integration
|
||||
: Monetization design
|
||||
: Community features
|
||||
|
||||
section Industry Skills (1 month)
|
||||
Professional Development: Team collaboration
|
||||
: Design documentation
|
||||
: Player research
|
||||
: Platform optimization
|
||||
```
|
||||
### 🛠️ Your Game Design Toolkit Summary
|
||||
|
||||
After this lesson, you don sabi:
|
||||
- **Player Psychology**: Understanding motivation, risk/reward, engagement loops
|
||||
- **Visual Communication**: Good UI design with text, icons, and layout
|
||||
- **Feedback Systems**: Real-time reaction to player action and game events
|
||||
- **State Management**: Track and show dynamic game data well
|
||||
- **Canvas Text Rendering**: Professional text display with style and position
|
||||
- **Event Integration**: Connect user action to real game consequences
|
||||
- **Game Balance**: Design difficulty curve and player progression systems
|
||||
|
||||
**Real-World Applications**: Your game design skills fit:
|
||||
- **User Interface Design**: Make engaging and easy interface
|
||||
- **Product Development**: Understand user motivation and feedback loops
|
||||
- **Educational Technology**: Gamification and learning systems
|
||||
- **Data Visualization**: Make complex info simple and engaging
|
||||
- **Mobile App Development**: Retention mechanics and UX design
|
||||
- **Marketing Technology**: Understand user behavior and conversion optimize
|
||||
|
||||
**Professional Skills Gained**: You fit now:
|
||||
- **Design** user experiences wey motivate and engage users
|
||||
- **Implement** feedback systems wey guide user behavior well
|
||||
- **Balance** challenge and accessibility for interactive systems
|
||||
- **Create** visual communication wey work across user groups
|
||||
- **Analyze** user behavior and improve design
|
||||
|
||||
**Game Development Concepts Mastered**:
|
||||
- **Player Motivation**: Understanding wetin make player engage and stay
|
||||
- **Visual Design**: Create clear, nice, and functional interface
|
||||
- **System Integration**: Connect many game systems for one correct experience
|
||||
- **Performance Optimization**: Efficient drawing and state management
|
||||
- **Accessibility**: Design for all skill levels and player needs
|
||||
|
||||
**Next Level**: You fit waka go advanced game design patterns, put analytics systems, or learn game monetization and player retention strategies!
|
||||
|
||||
🌟 **Achievement Unlocked**: You don build solid player feedback system with professional game design principles!
|
||||
|
||||
---
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use Agent mode to complete this challenge:
|
||||
|
||||
**Description:** Make your space game scoring system better by putting high score feature wey save in persistent storage plus bonus scoring mechanics.
|
||||
|
||||
**Prompt:** Create high score system wey save player best score to localStorage. Add bonus points for many enemy kill in row (combo system) and put different point values for different enemy types. Show visual sign when player get new high score and show current high score on game screen.
|
||||
|
||||
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Your game don dey work with scoring and lives. Think about wetin other features fit make player experience beta.
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/38)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
You wan explore more? Research different ways for game scoring and life systems. Plenty better game engines dey like [PlayFab](https://playfab.com) wey dey handle scoring, leaderboard, and player progress. How to put something like dat for your game go make am next level?
|
||||
|
||||
## Assignment
|
||||
|
||||
[Build a Scoring Game](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automatic translation fit get yawa or no correct well-well. The original document wey dem write for im own language na im be the correct one. If na important matter, e good make human wey sabi translate am well do am. We no go take any blame if pesin miss-understand or interpret am wrong because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "81f292dbda01685b91735e0398dc0504",
|
||||
"translation_date": "2026-01-08T14:14:03+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Scoring Game
|
||||
|
||||
## Instructions
|
||||
|
||||
Create game wey go show life and points for one correct way. One idea na to show life as hearts and points as big number for the bottom center part of the screen. Check here for [Free game resources](https://www.kenney.nl/)
|
||||
|
||||
# Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | full game is presented | game is partially presented | partial game contains bugs |
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translations fit get some mistake or no too correct. The original document wey dey inside im ogbonge language na im be di correct source. If na serious matter, make person wey sabi translation translate am humanly. We no dey responsible for any wahala or wrong understanding wey fit come from di use of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:02:52+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, dem lef am blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, abeg sabi say automated translations fit get errors or wahala. The original document wey e dey for im own language na im be the correct one. If na serious matter, e good make human professional translate am. We no go take responsibility for any misunderstanding or wrong meaning wey fit come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:02:05+00:00",
|
||||
"source_file": "6-space-game/5-keeping-score/your-work/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, e lef blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Warning**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey dem use translate am. Even though we try to make am correct, abeg understand say automated translation fit get some mistake or no too correct. The original document wey dem write for the original language na the correct one. If na serious information, better make professional human translation do am. We no go bear any yawa wey fit happen because of how you take use dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,684 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a4b78043f4d64bf3ee24e0689b8b391d",
|
||||
"translation_date": "2026-01-08T13:49:10+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Space Game Part 6: End and Restart
|
||||
|
||||
```mermaid
|
||||
journey
|
||||
title Your Game Completion Journey
|
||||
section End Conditions
|
||||
Define win/lose states: 3: Student
|
||||
Implement condition checking: 4: Student
|
||||
Handle state transitions: 4: Student
|
||||
section Player Experience
|
||||
Design feedback systems: 4: Student
|
||||
Create restart mechanics: 5: Student
|
||||
Polish user interface: 5: Student
|
||||
section System Integration
|
||||
Manage game lifecycle: 5: Student
|
||||
Handle memory cleanup: 5: Student
|
||||
Create complete experience: 5: Student
|
||||
```
|
||||
Every great game dey need clear end conditions and smooth restart mechanism. You don build correct space game wey get movement, combat, and scoring - now na time to add the last pieces wey go make am complete.
|
||||
|
||||
Your game dey run forever now, like the Voyager probes wey NASA launch for 1977 - still dey travel space even after many years. E good for space exploration but games need set endpoints to make the experience satisfy.
|
||||
|
||||
Today, we go implement correct win/lose conditions plus restart system. By end of this lesson, you go get polished game wey people fit complete and play again, just like classic arcade games wey define the medium.
|
||||
|
||||
```mermaid
|
||||
mindmap
|
||||
root((Game Completion))
|
||||
End Conditions
|
||||
Victory States
|
||||
Defeat Conditions
|
||||
Progress Tracking
|
||||
State Validation
|
||||
Player Feedback
|
||||
Visual Messages
|
||||
Color Psychology
|
||||
Clear Communication
|
||||
Emotional Response
|
||||
State Management
|
||||
Game Loop Control
|
||||
Memory Cleanup
|
||||
Object Lifecycle
|
||||
Event Handling
|
||||
Restart Systems
|
||||
Input Handling
|
||||
State Reset
|
||||
Fresh Initialization
|
||||
User Experience
|
||||
Polish Elements
|
||||
Message Display
|
||||
Smooth Transitions
|
||||
Error Prevention
|
||||
Accessibility
|
||||
```
|
||||
## Pre-Lecture Quiz
|
||||
|
||||
[Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/39)
|
||||
|
||||
## Understanding Game End Conditions
|
||||
|
||||
When your game suppose end? Dis question na the foundation wey don shape game design since early arcade days. Pac-Man go end when ghosts catch you or you clear all dots, Space Invaders go end when aliens reach bottom or you destroy dem all.
|
||||
|
||||
As game creator, na you define how player go win or lose. For our space game, here na wetin dey proven to create engaging gameplay:
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["🎮 Game Don Start"] --> B{"Check Conditions"}
|
||||
|
||||
B --> C["Enemy Count"]
|
||||
B --> D["Hero Lives"]
|
||||
B --> E["Score Threshold"]
|
||||
B --> F["Level Progress"]
|
||||
|
||||
C --> C1{"Enemies = 0?"}
|
||||
D --> D1{"Lives = 0?"}
|
||||
E --> E1{"Score ≥ Target?"}
|
||||
F --> F1{"Objectives Complete?"}
|
||||
|
||||
C1 -->|Yes| G["🏆 Victory"]
|
||||
D1 -->|Yes| H["💀 Defeat"]
|
||||
E1 -->|Yes| G
|
||||
F1 -->|Yes| G
|
||||
|
||||
C1 -->|No| B
|
||||
D1 -->|No| B
|
||||
E1 -->|No| B
|
||||
F1 -->|No| B
|
||||
|
||||
G --> I["🔄 Restart Option"]
|
||||
H --> I
|
||||
|
||||
style G fill:#e8f5e8
|
||||
style H fill:#ffebee
|
||||
style I fill:#e3f2fd
|
||||
```
|
||||
- **`N` Enemy ships don destroy**: E common if you divide game into levels wey you need destroy `N` Enemy ships to finish one level
|
||||
- **Your ship don destroy**: E get games wey you lose if your ship destroy. Another way na to get lives concept: every time your ship destroy, e go reduce one life. When all lives done, na lose game be dat.
|
||||
- **You don collect `N` points**: Another common way to end game na to collect points. How you take gather points na your choice but e dey common to assign points for things like destroying enemy ships or collecting items wey dem drop after you destroy dem.
|
||||
- **Complete one level**: Dis fit require many conditions like `X` enemy ships destroy, `Y` points collect or collect some specific item.
|
||||
|
||||
## Implementing Game Restart Functionality
|
||||
|
||||
Good games dey encourage make player play again through smooth restart methods. When player finish game (or lose), dem go want try again sharp-sharp - either to beat their score or do better.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Playing: Game Start
|
||||
Playing --> Victory: All enemies destroyed
|
||||
Playing --> Defeat: Lives = 0
|
||||
|
||||
Victory --> MessageDisplay: Show win message
|
||||
Defeat --> MessageDisplay: Show lose message
|
||||
|
||||
MessageDisplay --> WaitingRestart: Press Enter prompt
|
||||
WaitingRestart --> Resetting: Enter key pressed
|
||||
|
||||
Resetting --> CleanupMemory: Clear intervals
|
||||
CleanupMemory --> ClearEvents: Remove listeners
|
||||
ClearEvents --> InitializeGame: Fresh start
|
||||
InitializeGame --> Playing: New game begins
|
||||
|
||||
note right of MessageDisplay
|
||||
Color-coded feedback:
|
||||
Green = Victory
|
||||
Red = Defeat
|
||||
end note
|
||||
|
||||
note right of Resetting
|
||||
Complete state reset
|
||||
prevents memory leaks
|
||||
end note
|
||||
```
|
||||
Tetris na example for dis well well: when blocks reach top, you fit begin new game anytime without go through complex menu. We go build similar restart system wey go clear game state well and make players quick enter action again.
|
||||
|
||||
✅ **Reflection**: Think about games wey you don play. Under wetin conditions dem go end? How dem dey make you restart? Wetin make restart experience smooth or frustrating?
|
||||
|
||||
## Wetin You Go Build
|
||||
|
||||
You go add final features wey go turn your project to complete game experience. These things separate polished games from basic prototypes.
|
||||
|
||||
**Na wetin we dey add today:**
|
||||
|
||||
1. **Victory condition**: Blast all enemies then get correct celebration (you deserve am!)
|
||||
2. **Defeat condition**: When life finish, face defeat screen
|
||||
3. **Restart mechanism**: Press Enter to start again - one game no ever enough
|
||||
4. **State management**: Clean start every time - no enemies wey remain or funny glitches from previous game
|
||||
|
||||
## Getting Started
|
||||
|
||||
Make we prepare your development environment. You suppose get all your space game files from previous lessons ready.
|
||||
|
||||
**Your project suppose look like dis:**
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| laserRed.png
|
||||
-| life.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
**Start your development server:**
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
**This command:**
|
||||
- Dey run local server for `http://localhost:5000`
|
||||
- Dey serve your files well well
|
||||
- Automatically dey refresh anytime you make changes
|
||||
|
||||
Open `http://localhost:5000` for your browser and confirm say your game dey run. You suppose fit move, shoot and interact with enemies. Once you confirm am, we fit continue with implementation.
|
||||
|
||||
> 💡 **Pro Tip**: To avoid warnings for Visual Studio Code, declare `gameLoopId` for top of your file as `let gameLoopId;` instead of declaring am inside `window.onload`. Dis na better JavaScript variable declaration practice.
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A["1. Condition Tracking"] --> B["2. Event Handlers"]
|
||||
B --> C["3. Message Constants"]
|
||||
C --> D["4. Restart Controls"]
|
||||
D --> E["5. Message Display"]
|
||||
E --> F["6. Reset System"]
|
||||
|
||||
G["isHeroDead()\nisEnemiesDead()"] --> A
|
||||
H["Collision Events\nEnd Game Events"] --> B
|
||||
I["GAME_END_WIN\nGAME_END_LOSS"] --> C
|
||||
J["Enter Key\nRestart Trigger"] --> D
|
||||
K["Victory/Defeat\nColor-coded Text"] --> E
|
||||
L["State Cleanup\nFresh Initialization"] --> F
|
||||
|
||||
F --> M["🎮 Complete Game"]
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#e8f5e8
|
||||
style C fill:#fff3e0
|
||||
style D fill:#f3e5f5
|
||||
style E fill:#e0f2f1
|
||||
style F fill:#fce4ec
|
||||
style M fill:#e1f5fe
|
||||
```
|
||||
## Implementation Steps
|
||||
|
||||
### Step 1: Create End Condition Tracking Functions
|
||||
|
||||
We need functions wey go dey watch when game suppose end. Like sensors for International Space Station wey dey monitor systems every time, these functions go dey check game state non stop.
|
||||
|
||||
```javascript
|
||||
function isHeroDead() {
|
||||
return hero.life <= 0;
|
||||
}
|
||||
|
||||
function isEnemiesDead() {
|
||||
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||
return enemies.length === 0;
|
||||
}
|
||||
```
|
||||
|
||||
**Na wetin dey happen for under the hood:**
|
||||
- **Check** if our hero don finish life (ouch!)
|
||||
- **Count** how many enemies still dey alive and dey fight
|
||||
- **Return** `true` when battlefield clear of enemies
|
||||
- **Use** simple true/false logic to keep am easy
|
||||
- **Filter** through all game objects to find survivors
|
||||
|
||||
### Step 2: Update Event Handlers for End Conditions
|
||||
|
||||
Now we go connect these condition checks to game event system. Every time collision happen, game go check if na end condition. Dis one go create immediate feedback for important events.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Collision
|
||||
participant GameLogic
|
||||
participant Conditions
|
||||
participant EventSystem
|
||||
participant Display
|
||||
|
||||
Collision->>GameLogic: Laser hit enemy
|
||||
GameLogic->>GameLogic: Destroy objects
|
||||
GameLogic->>Conditions: Check isEnemiesDead()
|
||||
|
||||
alt All di enemy don kpai
|
||||
Conditions->>EventSystem: Emit GAME_END_WIN
|
||||
EventSystem->>Display: Show victory message
|
||||
else Still get enemy
|
||||
Conditions->>GameLogic: Continue game
|
||||
end
|
||||
|
||||
Collision->>GameLogic: Enemy hit hero
|
||||
GameLogic->>GameLogic: Reduce lives
|
||||
GameLogic->>Conditions: Check isHeroDead()
|
||||
|
||||
alt Lives = 0
|
||||
Conditions->>EventSystem: Emit GAME_END_LOSS
|
||||
EventSystem->>Display: Show defeat message
|
||||
else Lives still dey
|
||||
GameLogic->>Conditions: Check isEnemiesDead()
|
||||
alt All di enemy don kpai
|
||||
Conditions->>EventSystem: Emit GAME_END_WIN
|
||||
end
|
||||
end
|
||||
```
|
||||
```javascript
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||
first.dead = true;
|
||||
second.dead = true;
|
||||
hero.incrementPoints();
|
||||
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||
enemy.dead = true;
|
||||
hero.decrementLife();
|
||||
if (isHeroDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||
return; // los before win
|
||||
}
|
||||
if (isEnemiesDead()) {
|
||||
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||
}
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||
endGame(true);
|
||||
});
|
||||
|
||||
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||
endGame(false);
|
||||
});
|
||||
```
|
||||
|
||||
**Na wetin dey happen here:**
|
||||
- **Laser hit enemy**: both disappear, you gain points, and we check if you don win
|
||||
- **Enemy hit you**: you lose life, and we check if you still dey alive
|
||||
- **Smart ordering**: we check for defeat first (no one wan win and lose at same time!)
|
||||
- **Instant reaction**: as soon as something important happen, game go sabi am
|
||||
|
||||
### Step 3: Add New Message Constants
|
||||
|
||||
You need add new message types to your `Messages` constant object. These constants dey help keep things consistent and avoid typing mistakes for your event system.
|
||||
|
||||
```javascript
|
||||
GAME_END_LOSS: "GAME_END_LOSS",
|
||||
GAME_END_WIN: "GAME_END_WIN",
|
||||
```
|
||||
|
||||
**For the above, we:**
|
||||
- **Add** constants for game end events to keep am consistent
|
||||
- **Use** descriptive names wey clearly show wetin event mean
|
||||
- **Follow** existing naming style for message types
|
||||
|
||||
### Step 4: Implement Restart Controls
|
||||
|
||||
Now you go add keyboard controls wey go let players restart game. Enter key na natural choice because e dey associated with confirming actions and starting new games.
|
||||
|
||||
**Add Enter key detection for your current keydown event listener:**
|
||||
|
||||
```javascript
|
||||
else if(evt.key === "Enter") {
|
||||
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||
}
|
||||
```
|
||||
|
||||
**Add the new message constant:**
|
||||
|
||||
```javascript
|
||||
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||
```
|
||||
|
||||
**Wetin you need sabi:**
|
||||
- **Extend** your existing keyboard event handling system
|
||||
- **Use** Enter key as restart trigger for easy understanding
|
||||
- **Emit** custom event wey other parts of game fit listen
|
||||
- **Maintain** same pattern as other keyboard controls
|
||||
|
||||
### Step 5: Create the Message Display System
|
||||
|
||||
Your game need talk to players clearly. We go create message system wey go show victory and defeat states with colored text, like old computer terminals where green mean success and red mean error.
|
||||
|
||||
**Create `displayMessage()` function:**
|
||||
|
||||
```javascript
|
||||
function displayMessage(message, color = "red") {
|
||||
ctx.font = "30px Arial";
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||
}
|
||||
```
|
||||
|
||||
**Step by step, na wetin dey happen:**
|
||||
- **Set** font size and family for clear text
|
||||
- **Apply** color parameter with "red" as default for warning
|
||||
- **Center** text horizontal and vertical for canvas
|
||||
- **Use** modern JavaScript default parameters for flexible colors
|
||||
- **Leverage** canvas 2D context to directly draw text
|
||||
|
||||
**Create `endGame()` function:**
|
||||
|
||||
```javascript
|
||||
function endGame(win) {
|
||||
clearInterval(gameLoopId);
|
||||
|
||||
// Set delay make sure say any pending renders go complete
|
||||
setTimeout(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
if (win) {
|
||||
displayMessage(
|
||||
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||
"green"
|
||||
);
|
||||
} else {
|
||||
displayMessage(
|
||||
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||
);
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
```
|
||||
|
||||
**Wetin this function dey do:**
|
||||
- **Freeze** everything — no more moving ships or lasers
|
||||
- **Pause small** (200ms) to let last frame draw finish
|
||||
- **Clear** screen and paint am black for dramatic effect
|
||||
- **Show** different messages for winners and losers
|
||||
- **Color code** message - green for success, red for wahala
|
||||
- **Tell** players how to jump back in
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Game State Management**: Before you implement reset, make sure you understand:
|
||||
- ✅ How end conditions create clear gameplay goals
|
||||
- ✅ Why visual feedback important for player understanding
|
||||
- ✅ Why proper cleanup dey prevent memory wahala
|
||||
- ✅ How event-driven design allow clean state switches
|
||||
|
||||
**Quick Self-Test**: Wetin go happen if you no clear event listeners during reset?
|
||||
*Answer: Memory leaks and double event handlers go cause waka we no fit predict*
|
||||
|
||||
**Game Design Principles**: You don implement:
|
||||
- **Clear Goals**: Players sabi exactly when dem win or lose
|
||||
- **Immediate Feedback**: Game state changes dey show sharp sharp
|
||||
- **User Control**: Players fit restart anytime dem ready
|
||||
- **System Reliability**: Proper cleanup stop bugs and improve performance
|
||||
|
||||
### Step 6: Implement Game Reset Functionality
|
||||
|
||||
Reset system need fully clear current game state and start new game session. This one go ensure clean start without old data from previous game.
|
||||
|
||||
**Create `resetGame()` function:**
|
||||
|
||||
```javascript
|
||||
function resetGame() {
|
||||
if (gameLoopId) {
|
||||
clearInterval(gameLoopId);
|
||||
eventEmitter.clear();
|
||||
initGame();
|
||||
gameLoopId = setInterval(() => {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillStyle = "black";
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
drawPoints();
|
||||
drawLife();
|
||||
updateGameObjects();
|
||||
drawGameObjects(ctx);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Make we understand each part:**
|
||||
- **Check** if game loop dey run before reset
|
||||
- **Clear** existing game loop to stop everything
|
||||
- **Remove** all event listeners to avoid memory leaks
|
||||
- **Reinitialize** game state with fresh objects and variables
|
||||
- **Start** new game loop with important game functions
|
||||
- **Use** 100ms interval for consistent game flow
|
||||
|
||||
**Add Enter key event handler to your `initGame()` function:**
|
||||
|
||||
```javascript
|
||||
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||
resetGame();
|
||||
});
|
||||
```
|
||||
|
||||
**Add `clear()` method to your EventEmitter class:**
|
||||
|
||||
```javascript
|
||||
clear() {
|
||||
this.listeners = {};
|
||||
}
|
||||
```
|
||||
|
||||
**Key points to remember:**
|
||||
- **Connect** Enter key press to reset game
|
||||
- **Register** this listener during game init
|
||||
- **Give** easy way to remove all listeners when resetting
|
||||
- **Prevent** memory leaks by clearing handlers between games
|
||||
- **Reset** listener object to empty for fresh start
|
||||
|
||||
## Congratulations! 🎉
|
||||
|
||||
👽 💥 🚀 You don build complete game from start to finish. Just like programmers wey create first video games for 1970s, you don turn code lines to interactive experience wey get correct game mechanics and user feedback. 🚀 💥 👽
|
||||
|
||||
**You don achieve:**
|
||||
- **Implement** complete win and lose conditions with user feedback
|
||||
- **Create** smooth restart system for continuous play
|
||||
- **Design** clear visual communication for game states
|
||||
- **Manage** complex state transitions and cleanup
|
||||
- **Put together** all parts into one strong playable game
|
||||
|
||||
### 🔄 **Pedagogical Check-in**
|
||||
**Complete Game Development System**: Celebrate your skill for full game development:
|
||||
- ✅ How end conditions create satisfying player experience?
|
||||
- ✅ Why correct state management dey critical for game stability?
|
||||
- ✅ How visual feedback improve player understanding?
|
||||
- ✅ Wetin restart system mean to player stay?
|
||||
|
||||
**System Mastery**: Your complete game show:
|
||||
- **Full-Stack Game Development**: From graphics to input to state management
|
||||
- **Professional Architecture**: Event-driven system with proper cleanup
|
||||
- **User Experience Design**: Clear feedback and easy controls
|
||||
- **Performance Optimization**: Efficient rendering and memory handling
|
||||
- **Polish and Completion**: All details wey make game feel finished
|
||||
|
||||
**Industry-Ready Skills**: You don implement:
|
||||
- **Game Loop Architecture**: Real-time system with steady performance
|
||||
- **Event-Driven Programming**: Decoupled system wey fit scale well
|
||||
- **State Management**: Complex data handling and lifecycle control
|
||||
- **UI Design**: Clear communication and responsive input
|
||||
- **Testing and Debugging**: Iterate and solve problems well
|
||||
|
||||
### ⚡ **Wetin You Fit Do for Next 5 Minutes**
|
||||
- [ ] Play your full game and test all win and lose conditions
|
||||
- [ ] Try different end condition parameters
|
||||
- [ ] Add console.log statements to follow game state changes
|
||||
- [ ] Share your game with friends and collect their feedback
|
||||
|
||||
### 🎯 **Wetin You Fit Achieve Dis Hour**
|
||||
- [ ] Complete post-lesson quiz and reflect on game journey
|
||||
- [ ] Add sound effects for win and lose states
|
||||
- [ ] Implement extra end conditions like time limits or bonus goals
|
||||
- [ ] Create different difficulty levels with more enemies
|
||||
- [ ] Polish visuals with better fonts and colors
|
||||
|
||||
### 📅 **Your Week-Long Game Development Mastery**
|
||||
- [ ] Complete enhanced space game with multiple levels and progress
|
||||
- [ ] Add advanced features like power-ups, different enemies, special weapons
|
||||
- [ ] Create high score system with persistent storage
|
||||
- [ ] Design user interfaces for menus, settings, game options
|
||||
- [ ] Optimize performance for different devices and browsers
|
||||
- [ ] Deploy game online and share with community
|
||||
### 🌟 **Your Month-Long Game Development Career**
|
||||
- [ ] Build multiple complete games exploring different genres and mechanics
|
||||
- [ ] Learn advanced game development frameworks like Phaser or Three.js
|
||||
- [ ] Contribute to open source game development projects
|
||||
- [ ] Study game design principles and player psychology
|
||||
- [ ] Create a portfolio showcasing your game development skills
|
||||
- [ ] Connect with the game development community and continue learning
|
||||
|
||||
## 🎯 Your Complete Game Development Mastery Timeline
|
||||
|
||||
```mermaid
|
||||
timeline
|
||||
title Complete Game Development Learning Progression
|
||||
|
||||
section Foundation (Lessons 1-2)
|
||||
Game Architecture: Project structure
|
||||
: Asset management
|
||||
: Canvas basics
|
||||
: Event systems
|
||||
|
||||
section Interaction Systems (Lessons 3-4)
|
||||
Player Control: Input handling
|
||||
: Movement mechanics
|
||||
: Collision detection
|
||||
: Physics simulation
|
||||
|
||||
section Game Mechanics (Lesson 5)
|
||||
Feedback Systems: Scoring mechanisms
|
||||
: Life management
|
||||
: Visual communication
|
||||
: Player motivation
|
||||
|
||||
section Game Completion (Lesson 6)
|
||||
Polish & Flow: End conditions
|
||||
: State management
|
||||
: Restart systems
|
||||
: User experience
|
||||
|
||||
section Advanced Features (1 week)
|
||||
Enhancement Skills: Audio integration
|
||||
: Visual effects
|
||||
: Level progression
|
||||
: Performance optimization
|
||||
|
||||
section Professional Development (1 month)
|
||||
Industry Readiness: Framework mastery
|
||||
: Team collaboration
|
||||
: Portfolio development
|
||||
: Community engagement
|
||||
|
||||
section Career Advancement (3 months)
|
||||
Specialization: Advanced game engines
|
||||
: Platform deployment
|
||||
: Monetization strategies
|
||||
: Industry networking
|
||||
```
|
||||
### 🛠️ Your Complete Game Development Toolkit Summary
|
||||
|
||||
After completing this entire space game series, you now don master:
|
||||
- **Game Architecture**: Event-driven systems, game loops, and state management
|
||||
- **Graphics Programming**: Canvas API, sprite rendering, and visual effects
|
||||
- **Input Systems**: Keyboard handling, collision detection, and responsive controls
|
||||
- **Game Design**: Player feedback, progression systems, and engagement mechanics
|
||||
- **Performance Optimization**: Efficient rendering, memory management, and frame rate control
|
||||
- **User Experience**: Clear communication, intuitive controls, and polish details
|
||||
- **Professional Patterns**: Clean code, debugging techniques, and project organization
|
||||
|
||||
**Real-World Applications**: Your game development skills fit directly for:
|
||||
- **Interactive Web Applications**: Dynamic interfaces and real-time systems
|
||||
- **Data Visualization**: Animated charts and interactive graphics
|
||||
- **Educational Technology**: Gamification and engaging learning experiences
|
||||
- **Mobile Development**: Touch-based interactions and performance optimization
|
||||
- **Simulation Software**: Physics engines and real-time modeling
|
||||
- **Creative Industries**: Interactive art, entertainment, and digital experiences
|
||||
|
||||
**Professional Skills Gained**: You fit now:
|
||||
- **Architect** complex interactive systems from scratch
|
||||
- **Debug** real-time applications using systematic approaches
|
||||
- **Optimize** performance for smooth user experiences
|
||||
- **Design** engaging user interfaces and interaction patterns
|
||||
- **Collaborate** well on technical projects with proper code organization
|
||||
|
||||
**Game Development Concepts Mastered**:
|
||||
- **Real-time Systems**: Game loops, frame rate management, and performance
|
||||
- **Event-Driven Architecture**: Decoupled systems and message passing
|
||||
- **State Management**: Complex data handling and lifecycle management
|
||||
- **User Interface Programming**: Canvas graphics and responsive design
|
||||
- **Game Design Theory**: Player psychology and engagement mechanics
|
||||
|
||||
**Next Level**: You ready to test advanced game frameworks, 3D graphics, multiplayer systems, or move enter professional game development roles!
|
||||
|
||||
🌟 **Achievement Unlocked**: You don complete full game development journey and build professional-quality interactive experience from scratch!
|
||||
|
||||
**Welcome to the game development community!** 🎮✨
|
||||
|
||||
## GitHub Copilot Agent Challenge 🚀
|
||||
|
||||
Use the Agent mode to complete this challenge:
|
||||
|
||||
**Description:** Make the space game better by putting level progression system wey get increasing difficulty and bonus features.
|
||||
|
||||
**Prompt:** Build multi-level space game system wey every level get more enemy ships wey dey faster and get more health. Add scoring multiplier wey dey increase with each level, also put power-ups (like rapid fire or shield) wey go randomly appear when enemies spoil. Add level completion bonus and show the current level for screen plus the score and lives wey dey already.
|
||||
|
||||
Learn more about [agent mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) here.
|
||||
|
||||
## 🚀 Optional Enhancement Challenge
|
||||
|
||||
**Add Audio to Your Game**: Make your game better by adding sound effects! Think to add audio for:
|
||||
|
||||
- **Laser shots** wen player fire
|
||||
- **Enemy destruction** wen ship dem chop
|
||||
- **Hero damage** wen player dey hit
|
||||
- **Victory music** wen player win game
|
||||
- **Defeat sound** wen player lose game
|
||||
|
||||
**Audio implementation example:**
|
||||
|
||||
```javascript
|
||||
// Make audio ogbonge objects
|
||||
const laserSound = new Audio('assets/laser.wav');
|
||||
const explosionSound = new Audio('assets/explosion.wav');
|
||||
|
||||
// Play sound dem wen game tins happen
|
||||
function playLaserSound() {
|
||||
laserSound.currentTime = 0; // Start from the beginning once again
|
||||
laserSound.play();
|
||||
}
|
||||
```
|
||||
|
||||
**Wetyn you need sabi:**
|
||||
- **Creates** Audio objects for different sound effects
|
||||
- **Reset** di `currentTime` so that rapid-fire sound effects fit run quick
|
||||
- **Handles** browser autoplay rules by making sounds come from user actions
|
||||
- **Manages** audio volume and timing to make game experience better
|
||||
|
||||
> 💡 **Learning Resource**: Check dis [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn more how to put audio for JavaScript games.
|
||||
|
||||
## Post-Lecture Quiz
|
||||
|
||||
[Post-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/40)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Your assignment na to create fresh sample game, so go explore some interesting games wey dey so to see which kain game you fit build.
|
||||
|
||||
## Assignment
|
||||
|
||||
[Build a Sample Game](assignment.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even as we dey try make am correct, abeg sabi say automated translation fit get some errors or wahala. Di original document for dia own language na di correct one dem suppose trust. If na serious info, e better make professional human translation do am. We no go responsible if person misunderstand or comot wrong meaning from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,173 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "232d592791465c1678cab3a2bb6cd3e8",
|
||||
"translation_date": "2026-01-08T13:58:33+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Sample Game
|
||||
|
||||
## Assignment Overview
|
||||
|
||||
Now wey you don sabi how game go end and how restart dey work for your space game, na time to take these ideas do another new game. You go design and build your own game wey go show different ways wey game fit end and how restart go work.
|
||||
|
||||
Dis assignment go make you think well well about how to design game and also practice the technical skills wey you don learn. You go try different ways wey person fit win or lose, make player fit progress, and make the restart experience sweet.
|
||||
|
||||
## Project Requirements
|
||||
|
||||
### Core Game Features
|
||||
|
||||
Your game gats get these important things:
|
||||
|
||||
**End Condition Variety**: Make sure say game fit end for at least two different ways:
|
||||
- **Point-based victory**: Player reach target score or collect special items
|
||||
- **Life-based defeat**: Player lose all e lives or health points
|
||||
- **Objective completion**: All enemies don die, or specific items don collect, or goals don achieve
|
||||
- **Time-based**: Game end after certain time or timer reach zero
|
||||
|
||||
**Restart Functionality**:
|
||||
- **Clear game state**: Remove all old game objects and reset variables
|
||||
- **Reinitialize systems**: Start fresh with new player stats, enemies, and objectives
|
||||
- **User-friendly controls**: Make instructions clear for how to restart the game
|
||||
|
||||
**Player Feedback**:
|
||||
- **Victory messages**: Celebrate player achievement with better feedback
|
||||
- **Defeat messages**: Give encouraging messages wey go make player wan play again
|
||||
- **Progress indicators**: Show current score, lives, or objective status
|
||||
|
||||
### Game Ideas and Inspiration
|
||||
|
||||
Choose one game idea from these or create your own:
|
||||
|
||||
#### 1. Console Adventure Game
|
||||
Make text-based adventure wey get fight mechanics:
|
||||
|
||||
```
|
||||
Hero> Strikes with broadsword - orc takes 3p damage
|
||||
Orc> Hits with club - hero takes 2p damage
|
||||
Hero> Kicks - orc takes 1p damage
|
||||
Game> Orc is defeated - Hero collects 2 coins
|
||||
Game> ****No more monsters, you have conquered the evil fortress****
|
||||
```
|
||||
|
||||
**Key features to implement:**
|
||||
- **Turn-based combat** with different attack options
|
||||
- **Health points** for both player and enemies
|
||||
- **Inventory system** for collecting coins or items
|
||||
- **Multiple enemy types** with different difficulty levels
|
||||
- **Victory condition** when all enemies done kill
|
||||
|
||||
#### 2. Collection Game
|
||||
- **Objective**: Collect specific items and avoid obstacles
|
||||
- **End conditions**: Reach the collection target or lose all your lives
|
||||
- **Progression**: Items go dey harder to reach as game dey go
|
||||
|
||||
#### 3. Puzzle Game
|
||||
- **Objective**: Solve puzzles wey go dey harder every level
|
||||
- **End conditions**: Finish all levels or run out of moves/time
|
||||
- **Restart**: Reset go first level with everything cleared
|
||||
|
||||
#### 4. Defense Game
|
||||
- **Objective**: Protect your base from waves of enemies
|
||||
- **End conditions**: Survive all waves (win) or base get destroy (lose)
|
||||
- **Progression**: Enemy waves go harder and more
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### Getting Started
|
||||
|
||||
1. **Plan your game design**:
|
||||
- Sketch the basic gameplay loop
|
||||
- Define your end conditions clearly
|
||||
- Know which data gats reset when you restart
|
||||
|
||||
2. **Set up your project structure**:
|
||||
```
|
||||
my-game/
|
||||
├── index.html
|
||||
├── style.css
|
||||
├── game.js
|
||||
└── README.md
|
||||
```
|
||||
|
||||
3. **Create your core game loop**:
|
||||
- Initialize game state
|
||||
- Handle user input
|
||||
- Update game logic
|
||||
- Check end conditions
|
||||
- Render current state
|
||||
|
||||
### Technical Requirements
|
||||
|
||||
**Use Modern JavaScript**:
|
||||
- Use `const` and `let` for variable declarations
|
||||
- Use arrow functions where e go fit
|
||||
- Use ES6+ features like template literals and destructuring
|
||||
|
||||
**Event-Driven Architecture**:
|
||||
- Create event handlers for user actions
|
||||
- Change game state through events
|
||||
- Use event listeners for restart functionality
|
||||
|
||||
**Clean Code Practices**:
|
||||
- Write functions with one responsibility
|
||||
- Use clear variable and function names
|
||||
- Add comments wey explain game logic and rules
|
||||
- Organize code in proper sections
|
||||
|
||||
## Submission Requirements
|
||||
|
||||
### Deliverables
|
||||
|
||||
1. **Complete game files**: All HTML, CSS, and JavaScript files wey you need to run your game
|
||||
2. **README.md**: Documentation wey explain:
|
||||
- How to play your game
|
||||
- The end conditions you put for the game
|
||||
- Instructions for restarting
|
||||
- Any special features or game mechanics
|
||||
3. **Code comments**: Clear explanations of your game logic and algorithms
|
||||
|
||||
### Testing Checklist
|
||||
|
||||
Before you submit, make sure say your game:
|
||||
|
||||
- [ ] **Runs without errors** inside the browser console
|
||||
- [ ] **Implements multiple end conditions** as the assignment talk
|
||||
- [ ] **Restarts properly** with clean reset state
|
||||
- [ ] **Provides clear feedback** to players about game status
|
||||
- [ ] **Uses modern JavaScript** syntax and good practices
|
||||
- [ ] **Includes complete documentation** for README.md
|
||||
|
||||
## Assessment Rubric
|
||||
|
||||
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|
||||
|----------|---------------|----------------|----------------|--------------|
|
||||
| **Game Functionality** | Complete game wey get plenty end conditions, smooth restart, and polished gameplay | Full game with basic end conditions and working restart | Partial game with some end conditions, restart get small wahala | Incomplete game with limited functionality and big bugs |
|
||||
| **Code Quality** | Clean, well-organized code using modern JavaScript, good comments, and excellent structure | Good code organization with modern syntax and enough comments | Basic code organization with some modern practices and little comments | Poor code organization, old syntax, missing comments and structure |
|
||||
| **User Experience** | Gameplay easy to use with clear instructions, good feedback, and nice end/restart vibe | Good gameplay with enough instructions and feedback, working end/restart | Basic gameplay with few instructions and little feedback | Confusing gameplay with bad instructions and poor user feedback |
|
||||
| **Technical Implementation** | Shows clear skill for game development concepts, event handling, and state management | Shows good understanding of game concepts with correct implementation | Basic understanding with okay implementation | Poor understanding with bad implementation |
|
||||
| **Documentation** | Complete README with clear instructions, well commented code, and thorough tests | Good documentation with clear instructions and enough comments | Basic documentation with few instructions | Poor or missing documentation |
|
||||
|
||||
### Grading Scale
|
||||
- **Exemplary (16-20 points)**: Passes better than expected with creative features and neat implementation
|
||||
- **Proficient (12-15 points)**: Meets all requirements with solid work
|
||||
- **Developing (8-11 points)**: Meets most requirements but get small issues
|
||||
- **Beginning (4-7 points)**: Meet some things but need plenty improvement
|
||||
|
||||
## Additional Learning Resources
|
||||
|
||||
- [MDN Game Development Guide](https://developer.mozilla.org/en-US/docs/Games)
|
||||
- [JavaScript Game Development Tutorials](https://developer.mozilla.org/en-US/docs/Games/Tutorials)
|
||||
- [Canvas API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
|
||||
- [Game Design Principles](https://www.gamasutra.com/blogs/)
|
||||
|
||||
> 💡 **Pro Tip**: Start simple and add features small small. A well-polished simple game better pass complex game wey get plenty bugs!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Warning**:
|
||||
Dis document dem translate am wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make e accurate, abeg sabi say automated translation fit get errors or wahala. Di original document for im own language na di correct source. If na serious tin you dey find, better make person wey sabi do professional human translation do am. We no go be responsible if person no understand or misinterpret anything wey come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:01:19+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, e lef blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we try make am correct, abeg sabi say automated translation fit get some errors or mistakes. Di original document for im own language na di correct one wey you suppose trust. If na important tori, better make person wey sabi translate am do am. We no go responsible for any misunderstanding or wahala wey fit show because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T15:00:29+00:00",
|
||||
"source_file": "6-space-game/6-end-condition/your-work/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, dem lef am blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Wetin I go talk first**:
|
||||
Dis document na translation wey AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) do. Even though we try make am correct, abeg note say machine translation fit get mistake or no too correct well. Di original document for im original language na di correct source. If e important well well, e better make person wey sabi do proper human translation do am. We no go take any wahala if person no understand well or mistake come because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,47 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "c40a698395ee5102715f7880bba3f2e7",
|
||||
"translation_date": "2026-01-08T11:09:40+00:00",
|
||||
"source_file": "6-space-game/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Build a Space Game
|
||||
|
||||
Space game wey go teach una more advanced JavaScript fundamentals
|
||||
|
||||
For dis lesson, you go learn how to build your own space game. If you don ever play di game "Space Invaders", dis game get di same idea: to control spaceship and shoot monsters wey dey come down from above. Dis na wetin di finished game go be like:
|
||||
|
||||
|
||||
|
||||
For dis six lessons, you go learn di following:
|
||||
|
||||
- **Interact** with di Canvas element to draw things for screen
|
||||
- **Understand** di cartesian coordinate system
|
||||
- **Learn** di Pub-Sub pattern to create sound game architecture wey go easy to maintain and extend
|
||||
- **Leverage** Async/Await to load game resources
|
||||
- **Handle** keyboard events
|
||||
|
||||
## Overview
|
||||
|
||||
- Theory
|
||||
- [Introduction to building games with JavaScript](1-introduction/README.md)
|
||||
- Practice
|
||||
- [Drawing to canvas](2-drawing-to-canvas/README.md)
|
||||
- [Moving elements around the screen](3-moving-elements-around/README.md)
|
||||
- [Collision detection](4-collision-detection/README.md)
|
||||
- [Keeping score](5-keeping-score/README.md)
|
||||
- [Ending and restarting the game](6-end-condition/README.md)
|
||||
|
||||
## Credits
|
||||
|
||||
Di assets wey dem use for dis na from https://www.kenney.nl/.
|
||||
If you dey interested for building games, dem get fine assets, plenty free and some na paid.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/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 dey di original language na di correct one to trust. If na important thing, e better make human professional translate am. We no go responsible if person no understand well or mix tori because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,17 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "068cbb9b3c10a96d503f6cdd6c9ace8c",
|
||||
"translation_date": "2026-01-08T14:36:15+00:00",
|
||||
"source_file": "6-space-game/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Dis na placeholder, left blank on purpose.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automatic translations fit get mistake or small error. Di original document wey e come from e proper language na di correct one. If na serious mata, better make human professional translate am. We no go responsible for any misunderstanding or wrong meaning wey fit happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,166 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "efb01fcafd2ef40c593a6e662fc938a8",
|
||||
"translation_date": "2026-01-08T16:34:34+00:00",
|
||||
"source_file": "7-bank-project/2-forms/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Style Your Bank App wit Modern CSS
|
||||
|
||||
## Project Overview
|
||||
|
||||
Change your functional banking application to one wey fine to look, professional web app using modern CSS techniques. You go create one system wey go make design dey solid, improve user experience plus still keep accessibility and responsive design principles.
|
||||
|
||||
Dis assignment dey make you use contemporary web design style, do consistent visual identity, and create interface wey users go find attractive and easy to waka.
|
||||
|
||||
## Instructions
|
||||
|
||||
### Step 1: Setup Your Stylesheet
|
||||
|
||||
**Create your CSS foundation:**
|
||||
|
||||
1. **Create** one new file wey go be `styles.css` for your project root
|
||||
2. **Link** the stylesheet inside your `index.html` file:
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
```
|
||||
3. **Start** with CSS reset and modern defaults:
|
||||
```css
|
||||
/* Modern CSS reset and base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
```
|
||||
|
||||
### Step 2: Design System Requirements
|
||||
|
||||
**Put these important design elements:**
|
||||
|
||||
#### Color Palette
|
||||
- **Primary color**: Choose one professional color for buttons and highlights
|
||||
- **Secondary color**: Complementary color for accents and secondary actions
|
||||
- **Neutral colors**: Grays for text, borders, and backgrounds
|
||||
- **Success/Error colors**: Green for success states, red for errors
|
||||
|
||||
#### Typography
|
||||
- **Heading hierarchy**: Clear difference between H1, H2, and H3 elements
|
||||
- **Body text**: Font size wey you fit read well (minimum 16px) and correct line height
|
||||
- **Form labels**: Clear, accessible text styling
|
||||
|
||||
#### Layout and Spacing
|
||||
- **Consistent spacing**: Use one spacing scale (8px, 16px, 24px, 32px)
|
||||
- **Grid system**: Organized layout for forms and content sections
|
||||
- **Responsive design**: Mobile-first approach with breakpoints
|
||||
|
||||
### Step 3: Component Styling
|
||||
|
||||
**Style these particular components:**
|
||||
|
||||
#### Forms
|
||||
- **Input fields**: Professional borders, focus states, and validation styling
|
||||
- **Buttons**: Hover effects, disabled states, and loading indicators
|
||||
- **Labels**: Clear positioning and required field indicators
|
||||
- **Error messages**: Visible error styling and helpful messaging
|
||||
|
||||
#### Navigation
|
||||
- **Header**: Clean, branded navigation area
|
||||
- **Links**: Clear hover states and active indicators
|
||||
- **Logo/Title**: Distinctive branding element
|
||||
|
||||
#### Content Areas
|
||||
- **Sections**: Clear visual separation between different areas
|
||||
- **Cards**: If you dey use card-based layouts, include shadows and borders
|
||||
- **Backgrounds**: Correct use of white space and subtle backgrounds
|
||||
|
||||
### Step 4: Enhanced Features (Optional)
|
||||
|
||||
**Think about adding these advanced features:**
|
||||
- **Dark mode**: Toggle between light and dark themes
|
||||
- **Animations**: Subtle transitions and micro-interactions
|
||||
- **Loading states**: Visual feedback during form submissions
|
||||
- **Responsive images**: Optimized images for different screen sizes
|
||||
|
||||
## Design Inspiration
|
||||
|
||||
**Modern banking app characteristics:**
|
||||
- **Clean, minimal design** wit plenty white space
|
||||
- **Professional color schemes** (blues, greens, or sophisticated neutrals)
|
||||
- **Clear visual hierarchy** wit prominent call-to-action buttons
|
||||
- **Accessible contrast ratios** wey meet WCAG guidelines
|
||||
- **Mobile-responsive layouts** wey work well on all devices
|
||||
|
||||
## Technical Requirements
|
||||
|
||||
### CSS Organization
|
||||
```css
|
||||
/* 1. CSS Custom Properties (Variables) */
|
||||
:root {
|
||||
--primary-color: #007bff;
|
||||
--secondary-color: #6c757d;
|
||||
/* Add more variables */
|
||||
}
|
||||
|
||||
/* 2. Base Styles */
|
||||
/* Reset, typography, general elements */
|
||||
|
||||
/* 3. Layout */
|
||||
/* Grid, flexbox, positioning */
|
||||
|
||||
/* 4. Components */
|
||||
/* Forms, buttons, cards */
|
||||
|
||||
/* 5. Utilities */
|
||||
/* Helper classes, responsive utilities */
|
||||
|
||||
/* 6. Media Queries */
|
||||
/* Responsive breakpoints */
|
||||
```
|
||||
|
||||
### Accessibility Requirements
|
||||
- **Color contrast**: Make sure say e get at least 4.5:1 ratio for normal text
|
||||
- **Focus indicators**: Visible focus states for keyboard navigation
|
||||
- **Form labels**: Properly linked with inputs
|
||||
- **Responsive design**: Fit work for screens from 320px to 1920px wide
|
||||
|
||||
## Evaluation Rubric
|
||||
|
||||
| Criteria | Exemplary (A) | Proficient (B) | Developing (C) | Needs Improvement (F) |
|
||||
|----------|---------------|----------------|----------------|----------------------|
|
||||
| **Design System** | Implements comprehensive design system with consistent colors, typography, and spacing throughout | Uses consistent styling with clear design patterns and good visual hierarchy | Basic styling applied with some consistency issues or missing design elements | Minimal styling with inconsistent or conflicting design choices |
|
||||
| **User Experience** | Creates intuitive, professional interface with excellent usability and visual appeal | Provides good user experience with clear navigation and readable content | Basic usability with some UX improvements needed | Poor usability, difficult to navigate or read |
|
||||
| **Technical Implementation** | Uses modern CSS techniques, organized code structure, and follows best practices | Implements CSS effectively with good organization and appropriate techniques | CSS works correctly but may lack organization or modern approaches | Poor CSS implementation with technical issues or browser compatibility problems |
|
||||
| **Responsive Design** | Fully responsive design that works beautifully across all device sizes | Good responsive behavior with minor issues on some screen sizes | Basic responsive implementation with some layout issues | Not responsive or significant problems on mobile devices |
|
||||
| **Accessibility** | Meets WCAG guidelines with excellent keyboard navigation and screen reader support | Good accessibility practices with proper contrast and focus indicators | Basic accessibility considerations with some missing elements | Poor accessibility, difficult for users with disabilities |
|
||||
|
||||
## Submission Guidelines
|
||||
|
||||
**Put inside your submission:**
|
||||
- **styles.css**: Your complete stylesheet
|
||||
- **Updated HTML**: Any HTML changes wey you do
|
||||
- **Screenshots**: Images wey dey show your design for desktop and mobile
|
||||
- **README**: Brief description of your design choices and color palette
|
||||
|
||||
**Bonus points for:**
|
||||
- **CSS custom properties** for mother way you fit maintain theming
|
||||
- **Advanced CSS features** like Grid, Flexbox, or CSS animations
|
||||
- **Performance considerations** like optimized CSS and small file size
|
||||
- **Cross-browser testing** to make sure e fit work for different browsers
|
||||
|
||||
> 💡 **Pro Tip**: Start wit mobile design first, then improve for bigger screens. Dis mobile-first approach dey make sure your app work well for all devices and follow modern web development best practices.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na wetin AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate. Even though we try make am correct, abeg sabi say automated translation fit get wahala or mistakes. The original document for im own language na the correct one wey you suppose trust. If na important info, better make human professional translate am. We no go take blame if person no understand well or if dem use am wrong.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,144 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
|
||||
"translation_date": "2026-01-08T17:28:04+00:00",
|
||||
"source_file": "7-bank-project/3-data/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Code Refactoring and Documentation Assignment
|
||||
|
||||
## Learning Objectives
|
||||
|
||||
By completing dis assignment, you go practice important software development skills wey professional developers dey use every day. You go learn how to organize code make e dey easy to maintain, reduce repetition through abstraction, and write documentation for your work so future developers (including yourself!) fit understand.
|
||||
|
||||
Clean, well-documented code dey very important for real-world web development projects wey multiple developers dey collaborate and codebases dey change over time.
|
||||
|
||||
## Assignment Overview
|
||||
|
||||
Your banking app `app.js` file don grow well well with login, registration, and dashboard functionalities. Na time to refactor this code using professional development methods to improve how e dey read, maintain, and to reduce duplication.
|
||||
|
||||
## Instructions
|
||||
|
||||
Transform your current `app.js` code by implementing these three core refactoring techniques:
|
||||
|
||||
### 1. Extract Configuration Constants
|
||||
|
||||
**Task**: Create one configuration section for the top of your file with reusable constants.
|
||||
|
||||
**Implementation guidance:**
|
||||
- Extract the server API base URL (wey you don hardcode for multiple places)
|
||||
- Make constants for error messages wey dey appear for many functions
|
||||
- Fit consider extracting route paths and element IDs wey you dey use too many times
|
||||
|
||||
**Example structure:**
|
||||
```javascript
|
||||
// Konfigureshon konstants
|
||||
const API_BASE_URL = 'http://localhost:5000/api';
|
||||
const ROUTES = {
|
||||
LOGIN: '/login',
|
||||
DASHBOARD: '/dashboard'
|
||||
};
|
||||
```
|
||||
|
||||
### 2. Create a Unified Request Function
|
||||
|
||||
**Task**: Build one reusable function wey be `sendRequest()` wey go kill duplicate code between `createAccount()` and `getAccount()`.
|
||||
|
||||
**Requirements:**
|
||||
- Fit handle both GET and POST requests
|
||||
- Get proper error handling
|
||||
- Support different URL endpoints
|
||||
- Accept optional request body data
|
||||
|
||||
**Function signature guidance:**
|
||||
```javascript
|
||||
async function sendRequest(endpoint, method = 'GET', data = null) {
|
||||
// Your implementation dey here
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Add Professional Code Documentation
|
||||
|
||||
**Task**: Make documentation for your code with clear, helpful comments wey go explain the "why" behind your logic.
|
||||
|
||||
**Documentation standards:**
|
||||
- Add function documentation wey explain purpose, parameters, and return values
|
||||
- Put inline comments for complex logic or business rules
|
||||
- Group related functions together with section headers
|
||||
- Explain any code wey no obvious or browser-specific workarounds
|
||||
|
||||
**Example documentation style:**
|
||||
```javascript
|
||||
/**
|
||||
* Authenticates user and redirects to dashboard
|
||||
* @param {Event} event - Form submission event
|
||||
* @returns {Promise<void>} - Resolves when login process completes
|
||||
*/
|
||||
async function login(event) {
|
||||
// Make e no submit form automatically, make JavaScript handle am
|
||||
event.preventDefault();
|
||||
|
||||
// How you go do am...
|
||||
}
|
||||
```
|
||||
|
||||
## Success Criteria
|
||||
|
||||
Your refactored code suppose show these professional development practices:
|
||||
|
||||
### Exemplary Implementation
|
||||
- ✅ **Constants**: All magic strings and URLs don extract into clearly named constants
|
||||
- ✅ **DRY Principle**: Common request logic don consolidate inside one reusable `sendRequest()` function
|
||||
- ✅ **Documentation**: Functions get clear JSDoc comments wey explain purpose and parameters
|
||||
- ✅ **Organization**: Code dey logically grouped with section headers and consistent formatting
|
||||
- ✅ **Error Handling**: Improved error handling through the new request function
|
||||
|
||||
### Adequate Implementation
|
||||
- ✅ **Constants**: Most repeated values don extract, but small hardcoded values still dey
|
||||
- ✅ **Factorization**: Basic `sendRequest()` function don create but maybe e no cover all edge cases
|
||||
- ✅ **Comments**: Key functions get documentation, but some explanations fit dey more detailed
|
||||
- ✅ **Readability**: Code generally well-organized but some areas fit improve
|
||||
|
||||
### Needs Improvement
|
||||
- ❌ **Constants**: Plenty magic strings and URLs still hardcode everywhere inside the file
|
||||
- ❌ **Duplication**: Plenty code duplication still dey between similar functions
|
||||
- ❌ **Documentation**: Comments dey missing or no clear to explain code purpose
|
||||
- ❌ **Organization**: Code no get clear structure or logical grouping
|
||||
|
||||
## Testing Your Refactored Code
|
||||
|
||||
After you don refactor, make sure say your banking app still dey work well:
|
||||
|
||||
1. **Test all user flows**: Registration, login, dashboard display, and error handling
|
||||
2. **Verify API calls**: Confirm say your `sendRequest()` function dey work for both account creation and retrieval
|
||||
3. **Check error scenarios**: Test with invalid credentials and network errors
|
||||
4. **Review console output**: Make sure no new errors don appear during refactoring
|
||||
|
||||
## Submission Guidelines
|
||||
|
||||
Submit your refactored `app.js` file with:
|
||||
- Clear section headers wey organize different functionality
|
||||
- Consistent code formatting and indentation
|
||||
- Complete JSDoc documentation for all functions
|
||||
- One short comment for the top wey explain your refactoring approach
|
||||
|
||||
**Bonus Challenge**: Create one simple code documentation file (`CODE_STRUCTURE.md`) wey go explain your app architecture and how different functions dey work together.
|
||||
|
||||
## Real-World Connection
|
||||
|
||||
This assignment na like the kind code maintenance wey professional developers dey do regularly. For industry:
|
||||
- **Code reviews** dey check readability and maintainability like dis assignment
|
||||
- **Technical debt** dey increase when code no dey refactor and document regularly
|
||||
- **Team collaboration** depend on clear, well-documented code wey new team members fit understand
|
||||
- **Bug fixes** easy well well for well-organized codebase wey get proper abstraction
|
||||
|
||||
The skills you dey practice here - extracting constants, killing duplication, and writing clear documentation - na the basic things for professional software development.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get mistake or no too correct. Di original document wey dey dia for e original language na di correct one. If na serious tin, e better make human professional translate am. We no go take blame if pesin no understand well or misinterpret tins from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,164 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
||||
"translation_date": "2026-01-08T17:52:51+00:00",
|
||||
"source_file": "7-bank-project/4-state-management/assignment.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Implement "Add Transaction" Dialog
|
||||
|
||||
## Overview
|
||||
|
||||
Your banking app don get solid state management and data persistence, but e miss one important feature wey real banking apps need: make users fit add dia own transactions. For this assignment, you go implement complete "Add Transaction" dialog wey go connect well with your current state management system.
|
||||
|
||||
Dis assignment combine all wetin you don learn for the four banking lessons: HTML templating, form handling, API integration, and state management.
|
||||
|
||||
## Learning Objectives
|
||||
|
||||
When you finish dis assignment, you go fit:
|
||||
- **Create** user-friendly dialog interface for data entry
|
||||
- **Implement** accessible form design wey support keyboard and screen reader
|
||||
- **Integrate** new features with your existing state management system
|
||||
- **Practice** API communication and how to handle errors
|
||||
- **Apply** modern web development patterns for real-world feature
|
||||
|
||||
## Instructions
|
||||
|
||||
### Step 1: Add Transaction Button
|
||||
|
||||
**Create** "Add Transaction" button for your dashboard page wey users fit find and use easily.
|
||||
|
||||
**Requirements:**
|
||||
- **Place** the button for correct place for dashboard
|
||||
- **Use** clear action dey for the button text
|
||||
- **Style** the button to match your current UI design
|
||||
- **Ensure** the button dey accessible with keyboard
|
||||
|
||||
### Step 2: Dialog Implementation
|
||||
|
||||
Choose one of these two ways to implement your dialog:
|
||||
|
||||
**Option A: Separate Page**
|
||||
- **Create** new HTML template for the transaction form
|
||||
- **Add** new route to your routing system
|
||||
- **Implement** navigation to and from the form page
|
||||
|
||||
**Option B: Modal Dialog (Recommended)**
|
||||
- **Use** JavaScript to show/hide the dialog without comot for the dashboard
|
||||
- **Implement** using the [`hidden` property](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) or CSS classes
|
||||
- **Create** smooth user experience with proper focus management
|
||||
|
||||
### Step 3: Accessibility Implementation
|
||||
|
||||
**Ensure** say your dialog meet [accessibility standards for modal dialogs](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/):
|
||||
|
||||
**Keyboard Navigation:**
|
||||
- **Support** Escape key to close the dialog
|
||||
- **Trap** focus inside the dialog when e open
|
||||
- **Return** focus to the trigger button when e close
|
||||
|
||||
**Screen Reader Support:**
|
||||
- **Add** correct ARIA labels and roles
|
||||
- **Announce** dialog open/close to screen readers
|
||||
- **Provide** clear labels for form fields and error messages
|
||||
|
||||
### Step 4: Form Creation
|
||||
|
||||
**Design** HTML form wey go collect transaction data:
|
||||
|
||||
**Required Fields:**
|
||||
- **Date**: When transaction happen
|
||||
- **Description**: Wetin transaction be for
|
||||
- **Amount**: Transaction value (positive for income, negative for expenses)
|
||||
|
||||
**Form Features:**
|
||||
- **Validate** user input before you submit am
|
||||
- **Provide** clear error messages for invalid data
|
||||
- **Include** helpful placeholder text and labels
|
||||
- **Style** am same way as your current design
|
||||
|
||||
### Step 5: API Integration
|
||||
|
||||
**Connect** your form to backend API:
|
||||
|
||||
**Implementation Steps:**
|
||||
- **Review** the [server API specifications](../api/README.md) for correct endpoint and data format
|
||||
- **Create** JSON data from your form inputs
|
||||
- **Send** the data to the API with correct error handling
|
||||
- **Display** success or failure messages to the user
|
||||
- **Handle** network errors well
|
||||
|
||||
### Step 6: State Management Integration
|
||||
|
||||
**Update** your dashboard with the new transaction:
|
||||
|
||||
**Integration Requirements:**
|
||||
- **Refresh** the account data after transaction add finish well
|
||||
- **Update** dashboard display without needing page reload
|
||||
- **Ensure** the new transaction show immediately
|
||||
- **Maintain** correct state consistency during the whole process
|
||||
|
||||
## Technical Specifications
|
||||
|
||||
**API Endpoint Details:**
|
||||
Refer to the [server API documentation](../api/README.md) for:
|
||||
- Required JSON format for transaction data
|
||||
- HTTP method and endpoint URL
|
||||
- Expected response format
|
||||
- Error response handling
|
||||
|
||||
**Expected Result:**
|
||||
After you finish this assignment, your banking app suppose get fully working "Add Transaction" feature wey look and behave professionally:
|
||||
|
||||
|
||||
|
||||
## Testing Your Implementation
|
||||
|
||||
**Functional Testing:**
|
||||
1. **Verify** "Add Transaction" button dey clearly visible and accessible
|
||||
2. **Test** say the dialog open and close properly
|
||||
3. **Confirm** form validation dey work for all required fields
|
||||
4. **Check** say successful transactions show immediately for dashboard
|
||||
5. **Ensure** error handling dey work for invalid data and network wahala
|
||||
|
||||
**Accessibility Testing:**
|
||||
1. **Navigate** through the whole flow with keyboard only
|
||||
2. **Test** with screen reader to confirm correct announcements
|
||||
3. **Verify** focus management dey work well
|
||||
4. **Check** say all form elements get correct labels
|
||||
|
||||
## Evaluation Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| **Functionality** | Add transaction feature dey work perfectly with excellent user experience and follow all best practices from lessons | Add transaction feature dey work correctly but fit no follow some best practices or get small usability wahala | Add transaction feature dey partly work or get serious usability problems |
|
||||
| **Code Quality** | Code well-organized, follow correct patterns, get proper error handling, and integrate well with existing state management | Code dey work but maybe dey disorganized or no consistent with existing codebase patterns | Code get big structural issues or no integrate well with existing patterns |
|
||||
| **Accessibility** | Full keyboard navigation support, screen reader compatible, and follow WCAG guidelines with excellent focus management | Basic accessibility features dey but some keyboard navigation or screen reader features fit dey missing | Limited or no accessibility considerations implement |
|
||||
| **User Experience** | Intuitive, polished interface with clear feedback, smooth interactions, and professional look | Good user experience with small room to improve feedback or visual design | Poor user experience with confusing interface or no user feedback |
|
||||
|
||||
## Additional Challenges (Optional)
|
||||
|
||||
Once you don finish the basic requirements, consider these enhancements:
|
||||
|
||||
**Enhanced Features:**
|
||||
- **Add** transaction categories (food, transportation, entertainment, etc.)
|
||||
- **Implement** input validation with real-time feedback
|
||||
- **Create** keyboard shortcuts for power users
|
||||
- **Add** transaction editing and deletion abilities
|
||||
|
||||
**Advanced Integration:**
|
||||
- **Implement** undo function for recently added transactions
|
||||
- **Add** bulk transaction import from CSV files
|
||||
- **Create** transaction search and filtering abilities
|
||||
- **Implement** data export function
|
||||
|
||||
These optional features go help you practice more advanced web development ideas and build more complete banking app!
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate with AI translation service wey dem dey call [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg sabi say automated translation fit get some mistakes or no too correct. The original document wey dem write for im own language na im get proper authority. If na serious matter, e better make human professional translate am. We no go responsible if person misunderstand or arrange the meaning wrong because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,37 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "830359535306594b448db6575ce5cdee",
|
||||
"translation_date": "2026-01-08T11:29:58+00:00",
|
||||
"source_file": "7-bank-project/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# :dollar: Build Bank
|
||||
|
||||
For dis project, you go learn how to build one fictional bank. Dem lessons go show you how to layout web app and provide routes, build forms, manage state, plus how to fetch data from API wey you fit use take get di bank data.
|
||||
|
||||
|  |  |
|
||||
|--------------------------------|--------------------------------|
|
||||
|
||||
## Lessons
|
||||
|
||||
1. [HTML Templates and Routes in a Web App](1-template-route/README.md)
|
||||
2. [Build Login and Registration Form](2-forms/README.md)
|
||||
3. [Methods for Fetching and Using Data](3-data/README.md)
|
||||
4. [Concepts for State Management](4-state-management/README.md)
|
||||
|
||||
### Credits
|
||||
|
||||
Dem lessons na wetin :hearts: [Yohan Lasorsa](https://twitter.com/sinedied) write.
|
||||
|
||||
If you wan learn how to build di [server API](/7-bank-project/api/README.md) wey dem use for dis lessons, you fit follow [dis series of videos](https://aka.ms/NodeBeginner) (specially video 17 to 21).
|
||||
|
||||
You fit also check [dis interactive Learn tutorial](https://aka.ms/learn/express-api).
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) translate am. Though we dey try make am correct, abeg sabi say automatic translations fit get mistake or no too clear. The original document wey dey im own language na di correct one. If na serious matter, e better make professional human translator check am. We no go take any blame if pesin no understand or miss-interpret because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,50 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "9884f8c8a61cf56214450f8b16a094ce",
|
||||
"translation_date": "2026-01-08T16:38:52+00:00",
|
||||
"source_file": "7-bank-project/api/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Bank API
|
||||
|
||||
> Bank API wey dem build with [Node.js](https://nodejs.org) + [Express](https://expressjs.com/).
|
||||
|
||||
The API don already don build for you and no be part of the exercise.
|
||||
|
||||
But if you want learn how to build API like dis one, you fit follow dis kind video series: https://aka.ms/NodeBeginner (videos 17 reach 21 na dem cover dis exact API).
|
||||
|
||||
You fit also check dis interactive tutorial: https://aka.ms/learn/express-api
|
||||
|
||||
## Running the server
|
||||
|
||||
Make sure say you get [Node.js](https://nodejs.org) installed.
|
||||
|
||||
1. Git clone dis repo [The Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners).
|
||||
2. Open your terminal come waka inside `Web-Dev-For-Beginners/7-bank-project/api` folder
|
||||
2. Run `npm install` come wait make packages install finish (e fit take small time depend on your internet speed).
|
||||
3. After installation finish, run `npm start` come you ready.
|
||||
|
||||
The server suppose start dey listen for port `5000`.
|
||||
*Dis server go dey run together wit di main bank app server terminal (wey dey for port `3000`), no close am.*
|
||||
|
||||
> Note: all di data dey saved na for memory, no dey permanent, so once server stop all data go lost.
|
||||
|
||||
## API details
|
||||
|
||||
Route | Description
|
||||
---------------------------------------------|------------------------------------
|
||||
GET /api/ | Collect info about di server
|
||||
POST /api/accounts/ | Create account, ex: `{ user: 'Yohan', description: 'My budget', currency: 'EUR', balance: 100 }`
|
||||
GET /api/accounts/:user | Collect all info for di specified account
|
||||
DELETE /api/accounts/:user | Delete di specified account
|
||||
POST /api/accounts/:user/transactions | Add transaction, ex: `{ date: '2020-07-23T18:25:43.511Z', object: 'Bought a book', amount: -20 }`
|
||||
DELETE /api/accounts/:user/transactions/:id | Delete di specified transaction
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis dokument don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we try make am correct, make you sabi say automated translation fit get mistakes or no too clear. Di original dokument for im own language na di real correct one. If na important information, e better make professional human translator do am. We no go responsible for any wahala or wrong understanding wey fit show because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,28 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "461aa4fc74c6b1789c3a13b5d82c0cd9",
|
||||
"translation_date": "2026-01-08T18:06:31+00:00",
|
||||
"source_file": "7-bank-project/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Bank app
|
||||
|
||||
> Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used).
|
||||
|
||||
## Running the app
|
||||
|
||||
First make sure say you get the [API server](../api/README.md) wey dey run.
|
||||
|
||||
Any web server fit run the app, but as you suppose get [Node.js](https://nodejs.org) install anyhow to run the API, you fit:
|
||||
|
||||
1. Git clone this repo.
|
||||
2. Open terminal, waka enter this directory, then run `npx lite-server .`. E go start one development web server for port `3000`
|
||||
3. Open `http://localhost:3000` for browser to run the app.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**: Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg no forget say automated translations fit get mistakes or no too clear. Di original document wey e dey for im own language na di correct one. If na serious mata, better make human professional translate am. We no go take responsibility for any wahala or wrong understanding wey fit happen because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "cb549dcad8eea3221cb89793aeaa3bb3",
|
||||
"translation_date": "2026-01-08T20:38:16+00:00",
|
||||
"source_file": "9-chat-project/solution/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Run solution
|
||||
|
||||
1. Start up di [backend](./backend/README.md)
|
||||
1. Now start di [fronten](./frontend/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even though we dey try make am correct, abeg make you sabi say automatic translation fit get some mistakes or wrong tins. Di original document for im own language na di correct source. If na serious matter, make pipo wey sabi translate am well translate am. We no go responsible if person no understand well or if dem misunderstand because of dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,19 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "bcd2c2bbaae71151b1ed1b9170aa78af",
|
||||
"translation_date": "2026-01-08T20:44:19+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
Choose your runtime
|
||||
|
||||
- [Python](./python/README.md)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document don translate wit AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). Even tho we dey try make am correct, abeg sabi say automatic translation fit get some mistakes or wrong tins. Di original document wey dem write for im own language na im be di correct one. If na serious tins, better make human professional translate am. We no go responsible for any wahala or wrong understanding wey fit come from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,63 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "0aaa930f076f2d83cc872ad157f8ffd3",
|
||||
"translation_date": "2026-01-08T20:44:58+00:00",
|
||||
"source_file": "9-chat-project/solution/backend/python/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Run code
|
||||
|
||||
## Set up
|
||||
|
||||
Create virtual environment
|
||||
|
||||
```sh
|
||||
python -m venv venv
|
||||
source ./venv/bin/activate
|
||||
```
|
||||
|
||||
## Install dependencies
|
||||
|
||||
```sh
|
||||
pip install openai fastapi uvicorn python-dotenv
|
||||
```
|
||||
|
||||
## Run API
|
||||
|
||||
```sh
|
||||
# Method 1: Run am direct
|
||||
python api.py
|
||||
|
||||
# Method 2: Use uvicorn
|
||||
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
||||
```
|
||||
|
||||
## Test API
|
||||
|
||||
Visit di interactive API documentation for: `http://localhost:5000/docs`
|
||||
|
||||
## Run frontend
|
||||
|
||||
Make sure say you dey for di frontend folder
|
||||
|
||||
Find *app.js*, change `BASE_URL` to ur backend URL
|
||||
|
||||
Run am
|
||||
|
||||
```
|
||||
npx http-server -p 8000
|
||||
```
|
||||
|
||||
Try type message for di chat, you go see response (if you dey run am for Codespace or you don set up access token).
|
||||
|
||||
## Set up access token (if you no run dis for Codespace)
|
||||
|
||||
See [Set up PAT](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**: Dis document na AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) wey translate am. Even though we try make am correct, abeg sabi say automated translation fit get mistakes or no too correct. Di original document for e own language na di real correct one. If na serious matter, e better make person wey sabi human translation do am. We no go hold ourselves responsible if person no understand or misinterpret from dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,23 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "7746a470be8fc7f736eb1b43ebb710ee",
|
||||
"translation_date": "2026-01-08T20:39:02+00:00",
|
||||
"source_file": "9-chat-project/solution/frontend/README.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# Run the code
|
||||
|
||||
```sh
|
||||
npx http-server -p 3000
|
||||
```
|
||||
|
||||
Find the `BASE_URL` for `app.js` and change am to match the URL of the backend.
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**:
|
||||
Dis document na wetin AI translation service wey dem call [Co-op Translator](https://github.com/Azure/co-op-translator) don translate. Even though we dey try make am correct, abeg sabi say automatic translation fit get some mistakes or no too clear. The original document wey dem write for im own language na im be the real correct one. If na serious matter, better make human professional translate am. We no go take any blame if person no understand well or person carry mistake come because of this translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
@ -0,0 +1,416 @@
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
|
||||
"translation_date": "2026-01-08T10:21:06+00:00",
|
||||
"source_file": "AGENTS.md",
|
||||
"language_code": "pcm"
|
||||
}
|
||||
-->
|
||||
# AGENTS.md
|
||||
|
||||
## Project Overview
|
||||
|
||||
Dis na one educational curriculum repository wey dey teach web development basics to beginners dem. Di curriculum na full 12-week course wey Microsoft Cloud Advocates develop, get 24 practical lessons wey cover JavaScript, CSS, and HTML.
|
||||
|
||||
### Key Components
|
||||
|
||||
- **Educational Content**: 24 organized lessons put inside project-based modules
|
||||
- **Practical Projects**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, and AI Chat Assistant
|
||||
- **Interactive Quizzes**: 48 quizzes get 3 questions each (before and after lesson assessments)
|
||||
- **Multi-language Support**: Automatic translations for more than 50 languages with GitHub Actions
|
||||
- **Technologies**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI projects)
|
||||
|
||||
### Architecture
|
||||
|
||||
- Educational repository wey get lesson-based structure
|
||||
- Each lesson folder get README, code examples, and solutions
|
||||
- Standalone projects dey different directories (quiz-app, different lesson projects)
|
||||
- Translation system dey use GitHub Actions (co-op-translator)
|
||||
- Documentation dey serve with Docsify and e dey available as PDF
|
||||
|
||||
## Setup Commands
|
||||
|
||||
Dis repository na mostly for educational content use. If you wan work with specific projects:
|
||||
|
||||
### Main Repository Setup
|
||||
|
||||
```bash
|
||||
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
|
||||
cd Web-Dev-For-Beginners
|
||||
```
|
||||
|
||||
### Quiz App Setup (Vue 3 + Vite)
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm install
|
||||
npm run dev # Start di development server
|
||||
npm run build # Build for production
|
||||
npm run lint # Run ESLint
|
||||
```
|
||||
|
||||
### Bank Project API (Node.js + Express)
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm install
|
||||
npm start # Start di API server
|
||||
npm run lint # Run ESLint
|
||||
npm run format # Make e fine wit Prettier
|
||||
```
|
||||
|
||||
### Browser Extension Projects
|
||||
|
||||
```bash
|
||||
cd 5-browser-extension/solution
|
||||
npm install
|
||||
# Follow di browser-specific extension loading instructions
|
||||
```
|
||||
|
||||
### Space Game Projects
|
||||
|
||||
```bash
|
||||
cd 6-space-game/solution
|
||||
npm install
|
||||
# Open index.html for browser or use Live Server
|
||||
```
|
||||
|
||||
### Chat Project (Python Backend)
|
||||
|
||||
```bash
|
||||
cd 9-chat-project/solution/backend/python
|
||||
pip install openai
|
||||
# Set GITHUB_TOKEN environment variable
|
||||
python api.py
|
||||
```
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### For Content Contributors
|
||||
|
||||
1. **Fork di repository** go your GitHub account
|
||||
2. **Clone your fork** for your local machine
|
||||
3. **Create new branch** for your changes dem
|
||||
4. Change lesson content or code examples
|
||||
5. Test any code changes for project directories wey concern am
|
||||
6. Submit pull requests based on how to contribute guideline dem
|
||||
|
||||
### For Learners
|
||||
|
||||
1. Fork or clone di repository
|
||||
2. Enter lesson directories one by one
|
||||
3. Read README files wey dey each lesson
|
||||
4. Finish pre-lesson quizzes for https://ff-quizzes.netlify.app/web/
|
||||
5. Work through code examples wey dey lesson folders
|
||||
6. Finish assignments and challenges dem
|
||||
7. Do post-lesson quizzes
|
||||
|
||||
### Live Development
|
||||
|
||||
- **Documentation**: Run `docsify serve` for root (port 3000)
|
||||
- **Quiz App**: Run `npm run dev` inside quiz-app directory
|
||||
- **Projects**: Use VS Code Live Server extension for HTML projects
|
||||
- **API Projects**: Run `npm start` inside correct API directories
|
||||
|
||||
## Testing Instructions
|
||||
|
||||
### Quiz App Testing
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run lint # Check for code style wahala
|
||||
npm run build # Make sure say build work fine
|
||||
```
|
||||
|
||||
### Bank API Testing
|
||||
|
||||
```bash
|
||||
cd 7-bank-project/api
|
||||
npm run lint # Check for code style wahala
|
||||
node server.js # Make sure server start no get error
|
||||
```
|
||||
|
||||
### General Testing Approach
|
||||
|
||||
- Dis na educational repository wey no get full automated tests
|
||||
- Manual testing focus on:
|
||||
- Code examples dey run without wahala
|
||||
- Links inside documentation dey work well
|
||||
- Project get successful builds
|
||||
- Examples dey follow correct way dem
|
||||
|
||||
### Pre-submission Checks
|
||||
|
||||
- Run `npm run lint` inside directories wey get package.json
|
||||
- Check say markdown links valid
|
||||
- Test code examples for browser or Node.js
|
||||
- Check say translations still keep proper structure
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### JavaScript
|
||||
|
||||
- Use modern ES6+ syntax
|
||||
- Follow standard ESLint configs wey projects give
|
||||
- Use meaningful variable and function names so e go dey clear for learners
|
||||
- Add comments to explain concepts for learners
|
||||
- Format with Prettier if e dey set
|
||||
|
||||
### HTML/CSS
|
||||
|
||||
- Use semantic HTML5 elements
|
||||
- Responsive design principles
|
||||
- Clear class naming style
|
||||
- Comments to explain CSS techniques for learners
|
||||
|
||||
### Python
|
||||
|
||||
- PEP 8 style
|
||||
- Clear, educational code examples
|
||||
- Type hints where e fit help learners
|
||||
|
||||
### Markdown Documentation
|
||||
|
||||
- Clear heading order
|
||||
- Code blocks with language specification
|
||||
- Links to more resources
|
||||
- Screenshots and images dey `images/` directories
|
||||
- Alt text for images for accessibility
|
||||
|
||||
### File Organization
|
||||
|
||||
- Lessons get number sequence (1-getting-started-lessons, 2-js-basics, etc.)
|
||||
- Each project get `solution/` and sometimes `start/` or `your-work/` directories
|
||||
- Images dey inside lesson-specific `images/` folders
|
||||
- Translations dey `translations/{language-code}/` folders
|
||||
|
||||
## Build and Deployment
|
||||
|
||||
### Quiz App Deployment (Azure Static Web Apps)
|
||||
|
||||
Quiz-app don set up for Azure Static Web Apps deployment:
|
||||
|
||||
```bash
|
||||
cd quiz-app
|
||||
npm run build # Dey create dist/ folder
|
||||
# Dey deploy through GitHub Actions workflow wen e push go main
|
||||
```
|
||||
|
||||
Azure Static Web Apps configuration:
|
||||
- **App location**: `/quiz-app`
|
||||
- **Output location**: `dist`
|
||||
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
|
||||
|
||||
### Documentation PDF Generation
|
||||
|
||||
```bash
|
||||
npm install # Install docsify-to-pdf
|
||||
npm run convert # Make PDF from docs
|
||||
```
|
||||
|
||||
### Docsify Documentation
|
||||
|
||||
```bash
|
||||
npm install -g docsify-cli # Install Docsify everywhere for system
|
||||
docsify serve # Run am for localhost:3000
|
||||
```
|
||||
|
||||
### Project-specific Builds
|
||||
|
||||
Every project directory fit get their own build process:
|
||||
- Vue projects: `npm run build` go create production bundles
|
||||
- Static projects: No build step, serve files direct
|
||||
|
||||
## Pull Request Guidelines
|
||||
|
||||
### Title Format
|
||||
|
||||
Use clear, descriptive titles wey talk which area you change:
|
||||
- `[Quiz-app] Add new quiz for lesson X`
|
||||
- `[Lesson-3] Fix typo for terrarium project`
|
||||
- `[Translation] Add Spanish translation for lesson 5`
|
||||
- `[Docs] Update setup instructions`
|
||||
|
||||
### Required Checks
|
||||
|
||||
Before you submit PR:
|
||||
|
||||
1. **Code Quality**:
|
||||
- Run `npm run lint` for project directories wey you change
|
||||
- Fix all lint errors and warnings
|
||||
|
||||
2. **Build Verification**:
|
||||
- Run `npm run build` if e concern you
|
||||
- Confirm say no build error
|
||||
|
||||
3. **Link Validation**:
|
||||
- Test all markdown links
|
||||
- Confirm image references dey work
|
||||
|
||||
4. **Content Review**:
|
||||
- Proofread spelling and grammar
|
||||
- Confirm code examples correct and educational
|
||||
- Confirm translations keep original meaning
|
||||
|
||||
### Contribution Requirements
|
||||
|
||||
- You must agree to Microsoft CLA (automatic check on your first PR)
|
||||
- Follow the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
|
||||
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for full guidelines
|
||||
- Put issue numbers for PR description if e concern am
|
||||
|
||||
### Review Process
|
||||
|
||||
- Maintainers and community go review PRs
|
||||
- Educational clarity na priority
|
||||
- Code examples must follow correct best practices
|
||||
- Translations go get accuracy and cultural check
|
||||
|
||||
## Translation System
|
||||
|
||||
### Automated Translation
|
||||
|
||||
- Uses GitHub Actions with co-op-translator workflow
|
||||
- Translate to over 50 languages automatically
|
||||
- Source files dey main directories
|
||||
- Translated files dey `translations/{language-code}/` folders
|
||||
|
||||
### Adding Manual Translation Improvements
|
||||
|
||||
1. Find file for `translations/{language-code}/`
|
||||
2. Make improvements but keep structure proper
|
||||
3. Make sure code examples still dey work
|
||||
4. Test any localized quiz content
|
||||
|
||||
### Translation Metadata
|
||||
|
||||
Translated files get metadata header:
|
||||
```markdown
|
||||
<!--
|
||||
CO_OP_TRANSLATOR_METADATA:
|
||||
{
|
||||
"original_hash": "...",
|
||||
"translation_date": "...",
|
||||
"source_file": "...",
|
||||
"language_code": "..."
|
||||
}
|
||||
-->
|
||||
```
|
||||
|
||||
## Debugging and Troubleshooting
|
||||
|
||||
### Common Issues
|
||||
|
||||
**Quiz app no fit start**:
|
||||
- Check Node.js version (v14+ na better)
|
||||
- Delete `node_modules` and `package-lock.json`, then run `npm install` again
|
||||
- Check if port dey busy (Vite dey use port 5173 by default)
|
||||
|
||||
**API server no start**:
|
||||
- Check Node.js version >=10
|
||||
- Make sure port no busy
|
||||
- Ensure all dependencies dey install with `npm install`
|
||||
|
||||
**Browser extension no load**:
|
||||
- Confirm manifest.json correct format
|
||||
- Check browser console for errors
|
||||
- Follow browser-specific extension install instruction
|
||||
|
||||
**Python chat project wahala**:
|
||||
- Make sure OpenAI package install: `pip install openai`
|
||||
- Confirm GITHUB_TOKEN environment variable set
|
||||
- Check GitHub Models access permissions
|
||||
|
||||
**Docsify no dey serve docs**:
|
||||
- Install docsify-cli globally: `npm install -g docsify-cli`
|
||||
- Run from root directory of repo
|
||||
- Confirm `docs/_sidebar.md` dey
|
||||
|
||||
### Development Environment Tips
|
||||
|
||||
- Use VS Code with Live Server extension for HTML projects
|
||||
- Install ESLint and Prettier extensions for consistent format
|
||||
- Use browser DevTools for debug JavaScript
|
||||
- For Vue projects, install Vue DevTools browser extension
|
||||
|
||||
### Performance Considerations
|
||||
|
||||
- Plenty translated files (50+ languages) mean big full clones
|
||||
- Use shallow clone if you dey work only on content: `git clone --depth 1`
|
||||
- Exclude translations from searches if you dey work on English content
|
||||
- Build fit slow first time (npm install, Vite build)
|
||||
|
||||
## Security Considerations
|
||||
|
||||
### Environment Variables
|
||||
|
||||
- No put API keys for repository commit
|
||||
- Use `.env` files (dem dey already `.gitignore`)
|
||||
- Document needed environment variables for project READMEs
|
||||
|
||||
### Python Projects
|
||||
|
||||
- Use virtual environments: `python -m venv venv`
|
||||
- Keep dependencies updated
|
||||
- GitHub tokens get to get minimal permissions
|
||||
|
||||
### GitHub Models Access
|
||||
|
||||
- Personal Access Tokens (PAT) needed for GitHub Models
|
||||
- Store tokens as environment variables
|
||||
- Never commit tokens or credentials
|
||||
|
||||
## Additional Notes
|
||||
|
||||
### Target Audience
|
||||
|
||||
- Complete beginners for web development
|
||||
- Students and self-learners
|
||||
- Teachers use this curriculum for classroom
|
||||
- Content designed for accessibility and gradual skill build up
|
||||
|
||||
### Educational Philosophy
|
||||
|
||||
- Project-based learning way
|
||||
- Frequent knowledge checks (quizzes)
|
||||
- Hands-on coding exercises
|
||||
- Real-world application examples
|
||||
- Focus on fundamentals before frameworks
|
||||
|
||||
### Repository Maintenance
|
||||
|
||||
- Active community of learners and contributors
|
||||
- Regular updates to dependencies and content
|
||||
- Maintainers dey monitor issues and discussions
|
||||
- Translation updates automatic with GitHub Actions
|
||||
|
||||
### Related Resources
|
||||
|
||||
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
|
||||
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
|
||||
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommended for learners
|
||||
- Additional courses: Generative AI, Data Science, ML, IoT curricula available
|
||||
|
||||
### Working with Specific Projects
|
||||
|
||||
For detailed instructions for each project, check README files inside:
|
||||
- `quiz-app/README.md` - Vue 3 quiz application
|
||||
- `7-bank-project/README.md` - Banking app with authentication
|
||||
- `5-browser-extension/README.md` - Browser extension development
|
||||
- `6-space-game/README.md` - Canvas-based game development
|
||||
- `9-chat-project/README.md` - AI chat assistant project
|
||||
|
||||
### Monorepo Structure
|
||||
|
||||
Though e no be traditional monorepo, dis repository get many independent projects:
|
||||
- Each lesson dey self-contained
|
||||
- Projects no dey share dependencies
|
||||
- You fit work for one project without disturb others
|
||||
- Clone whole repo if you want full curriculum experience
|
||||
|
||||
---
|
||||
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
||||
**Disclaimer**: Dis document na translation we dem use AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator) do am. Even though we dey try make am correct, abeg sabi say machine translation fit get some errors or mistakes. The original document wey dey im own language na di correct one to trust. If na important info, make you use professional human translation. We no go responsible for any wahala or misunderstanding wey fit happen because you use dis translation.
|
||||
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
|
||||
Loading…
Reference in new issue