BRAINBIT INFOTECH · RANCHI

COMPLETE JAVASCRIPT COURSE · PART 4 OF 4

OOP, Pro Skills & Capstone Apps

Organise big programs with classes and modules, debug like a pro, use browser APIs and build five complete apps.

3 modules~14.5 hours15 examples + 5 appsNeeds Parts 1-3

By the end of this part you can build

A bank account and cart with classes
Geolocation, clipboard, canvas and speech demos
To-Do, Quiz, Expense Tracker, Weather and Shopping Cart apps

Every example opens in a live browser preview. Click ✎ Edit on any preview, or press L, to open the Code Lab.

ROADMAP FOR THIS PART

Module 18Classes, OOP & Modules3.5 h

Module 19Debugging, Browser APIs & Best Practices3 h

Module 20Capstone Apps8+ h

JavaScriptBefore we begin

How to Use This Part

Every module has

1
A "Where is it used?" diagram of a real web page
2
Concept slides with code + live preview + console
3
Step-through animations: watch variables change
4
A Live Lab: edit code, see the result instantly
5
5 practice examples with solutions
6
An animated recap + quiz

Controls→ next, ← back, M menu, L Code Lab, F fullscreen. Click ✎ Edit on any preview to change its code.

MODULE 18

Classes, OOP & Modules

⏱ 3.5 hours5 practice examplesLive code lab

You will learn

Why big apps need classes
class, constructor, this and methods
Getters, setters, static and #private fields
Inheritance with extends and super
Splitting code into files with import / export

You will build

A bank account that protects its balance
A shopping cart class that renders a page
A reusable toast-notification component

Module 18Real-world use

Where Is This Used in Real Websites and Apps?

You will find it here

Cart, User, Order objects in every shopping app
Game characters: each enemy is an object made from one class
UI components: a Modal, Toast or Slider class used on many pages
Libraries like Chart.js: new Chart(...)
Modules: every React / Node.js project is split into files

OOPObject-Oriented Programming = organise code as objects that hold data (properties) and actions (methods) together.

Module 18Why classes?

One Blueprint, Many Objects

why.jsJS

Like a cookie cutterThe class is the cutter. Each object (instance) is a cookie made from it, with its own data.

Module 18First class

class, constructor, this and Methods

script.jsJS

D:/js-practice/script.js

Console output appears here

Part	Job
`class Student`	the blueprint (name starts with a capital)
`constructor()`	runs once for every `new`
`this.name = name`	saves data inside the object
`grade()`	a method: an action every student has

Module 18Step through

Watch new and this Build an Object

script.jsJS

Press Next step to run the program one line at a time.

Memory (variables)

(empty)

Console output

Module 18Protect data

Getters, Setters, static and #private Fields

script.jsJS

D:/js-practice/script.js

Console output appears here

Feature	Use it for
`#field`	data nobody outside may change (balance, password hash)
`get x()`	read-only or calculated values
`set x(v)`	check a value before saving it
`static`	belongs to the class, not each object

Module 18Inheritance

extends and super: Build on an Existing Class

script.jsJS

D:/js-practice/script.js

Console output appears here

Module 184 big ideas

The 4 Pillars of OOP in Simple Words

🔒

Encapsulation

Keep data and the functions that change it together, and hide the rest. #balance can only change through deposit() and withdraw().

👪

Inheritance

A new class reuses a parent class. Teacher extends Person gets name and age for free.

🎭

Polymorphism

Same method name, different behaviour. shape.area() works for Circle, Square and Triangle.

🎛

Abstraction

Users of your class only see simple methods. cart.checkout() hides 50 lines of work.

Real exampleA ride app (Ola, Uber, Rapido): Ride is the parent; AutoRide, CabRide, BikeRide each override fare().

Module 18Under the hood

Classes Are Built on Prototypes

script.jsJS

D:/js-practice/script.js

Console output appears here

Why it mattersMethods are stored once on the prototype and shared by every object, so 10,000 objects do not make 10,000 copies of bark().

Before 2015People wrote function Dog(name) {...} and Dog.prototype.bark = .... You will still see this in old code.

Module 18Modules

Modules: Split Your App into Files

Needs a serverModules do not work from file://. Open the folder with VS Code Live Server (or any local server).

modulesJS

Module 18Export types

Named vs Default Exports

	Named export	Default export
Write	`export const tax = 0.18;`	`export default class Cart {}`
Import	`import { tax } from "./x.js"`	`import Cart from "./cart.js"`
How many per file	many	one
Rename on import	`import { tax as GST }`	any name you like
Typical use	helper functions, constants	the main class or component

BenefitsEach file has one job, variables do not leak into the global scope, and teams can work on different files.

In ReactEvery component is a module: export default function Navbar() {...}, then import Navbar from "./Navbar.js".

Module 18Live Lab

Live Lab: A Cart Class Behind a Real Page

cart-class.html – edit me!

Live preview

TryAdd a remove(name) method and a Remove button. Add a get discount() that gives 10% off above Rs. 500. Try cart.#items in the console and read the error.

Module 18Practice Example 1 of 5

Bank Account with Private Balance

BeginnerModel a savings account for a bank app. Nobody should be able to change the balance directly.

Your tasks

class SavingsAccount with owner and #balance
deposit() and withdraw() with checks (throw errors)
get balance (read-only)
A transaction history array with type, amount, date
addInterest(rate) adds yearly interest

Where this is used: Banking, wallets (Paytm, PhonePe), game coins.

Expected result – build this yourself first, then check the solution

D:/js-practice/bank.js

Console output appears here

bank.jsJS

Module 18Practice Example 2 of 5

Report Cards with a Student Class

BeginnerA school ERP stores each student as an object. Generate report cards for a class.

Your tasks

class Student(name, rollNo, marks object)
get total and get percentage
grade() using the percentage
static topper(students) returns the best student
Print every report card with toFixed(1)

Where this is used: School ERPs, result portals, HR systems.

Expected result – build this yourself first, then check the solution

D:/js-practice/report-card.js

Console output appears here

report-card.jsJS

Module 18Practice Example 3 of 5

Ride Fare Calculator (Polymorphism)

IntermediateA Ranchi ride app offers Bike, Auto and Cab. Each type calculates its fare differently.

Your tasks

Parent class Ride(km) with fare() and summary()
BikeRide, AutoRide, CabRide extend Ride
Each overrides fare() (base + per km, cab adds night charge)
Loop over a mixed array and call summary()
Find the cheapest option for 8 km

HintEvery object has the same method name fare(), so the loop does not care which type it is. That is polymorphism.

Where this is used: Ride apps, payment methods, game characters.

Expected result – build this yourself first, then check the solution

D:/js-practice/rides.js

Console output appears here

rides.jsJS

Module 18Practice Example 4 of 5

Reusable Toast Notification Component

IntermediateMany pages need small pop-up messages ("Saved!", "Error"). Build one Toast class used everywhere.

Your tasks

class Toast with a container created in the constructor
show(message, type = "info", ms = 2500)
Colours for success, error, info
Auto-remove after ms with a fade-out
Buttons that show the three types

Where this is used: Every web app: Gmail "Message sent", shopping "Added to cart".

Expected result – build this yourself first, then check the solution

D:/js-practice/toast.html

Console output appears here

toast.htmlHTML

Module 18Practice Example 5 of 5

Library System with Inheritance

AdvancedA school library lends books and magazines. Magazines have shorter loan periods and different fines.

Your tasks

class Item(title) with issue(), returnItem(daysLate) and fine()
Book extends Item: 14 days, Rs. 2 per late day
Magazine extends Item: 7 days, Rs. 1 per late day
class Library holds items, issues by title, tracks fines
Throw an error if the item is already issued

Where this is used: Library, hotel booking and rental systems.

Expected result – build this yourself first, then check the solution

D:/js-practice/library.js

Console output appears here

library.jsJS

Module 18Module complete

Recap: What You Completed in Module 18

✓A class is a blueprint; new makes objects
✓constructor and this
✓Methods shared on the prototype
✓get / set, static, #private
✓extends, super and overriding
✓The 4 pillars of OOP
✓import / export modules

Coming next

Module 19: Debugging, browser APIs (location, clipboard, canvas, speech) and best practices.

Quick quiz – click an answer

Q1. What runs automatically when you write new Student()?

The constructor sets up each new object.

Q2. What must a child constructor call before using this?

super() runs the parent constructor.

Q3. #balance means the field is:

Only code inside the class can read or change it.

MODULE 19

Debugging, Browser APIs & Best Practices

⏱ 3 hours5 practice examplesLive code lab

You will learn

The 3 kinds of bugs and how to find them
DevTools: Console, Sources, Network, Application
Breakpoints and the debugger keyword
Browser APIs: location, clipboard, canvas, speech, observers
Clean, safe and fast code habits

You will build

A copy-UPI-ID button and a "nearest place" finder
A canvas chart and a drawing pad
A scroll progress bar with reveal animations

Module 19Real-world use

Where Is This Used in Real Websites and Apps?

You will find it here

Debugging is 50% of a developer's day, in every company
Copy buttons for UPI IDs, coupon codes, share links
Location: "restaurants near you", delivery address, maps
Canvas: charts, games, photo editors, signatures
Speech: read-aloud buttons, voice search, accessibility

Module 193 kinds of bugs

Every Bug Is One of These Three

✍

1. Syntax error

JS cannot even read the code. console.log("Hi" — missing ).
Clue: red error in the Console with a line number; nothing runs.

💥

2. Runtime error

Code is valid but crashes while running. user.name when user is null.
Clue: TypeError / ReferenceError in the Console.

🤔

3. Logic error

No error at all, but the answer is wrong. total = price + qty instead of *.
Clue: wrong output. The hardest to find!

Read the error!Uncaught TypeError: Cannot read properties of null (reading 'name') at app.js:14 tells you what (TypeError), why (null) and where (line 14).

Rubber duckExplain your code line by line to a friend (or a toy duck). You will often spot the bug yourself while explaining.

Module 19DevTools

Browser DevTools: Your Debugging Toolbox

1
Console: read errors first, always
2
Elements: is the element there? Is the class added?
3
Network: did the fetch return 200? What data came back?
4
Application: what is saved in localStorage?
5
Sources: pause code and look at every variable

Module 19Console power

More Than console.log

script.jsJS

D:/js-practice/script.js

Console output appears here

Method	Use it for
`console.table`	arrays of objects, API data
`console.warn / error`	yellow / red messages, easy to spot
`console.time`	how long code takes
`console.log({ x })`	shows the name AND the value

Module 19Find a logic bug

Step Through to Find a Logic Bug

script.jsJS

Press Next step to run the program one line at a time.

Memory (variables)

(empty)

Console output

debugger;Write debugger; on any line. With DevTools open, the browser pauses there automatically.

Module 19Recipe

The 6-Step Debugging Recipe

1. Reproduce it➜2. Read the error➜3. Find the line➜4. Check values (log / breakpoint)➜5. Fix one thing➜6. Test again

Symptom	First thing to check
Button does nothing	Console errors; is the listener attached? Is the id correct?
undefined on screen	console.log the object; check spelling of the property
Data not loading	Network tab: status code and response
Works once, then breaks	Is something added twice (listeners, intervals)?

Module 19Geolocation

Geolocation API: "Find Places Near Me"

D:/js-practice/location.html

Console output appears here

Permission + HTTPSThe user must click Allow, and the page must use https (or localhost). Always handle the error case.

location.jsJS

Used bySwiggy / Zomato address, Ola pickup point, "ATMs near me", weather for your city.

Module 19Clipboard

Clipboard API: One-Tap Copy Buttons

D:/js-practice/copy-upi.html

Console output appears here

copy.jsJS

Good UXAlways change the button to "Copied!" so the user knows it worked.

Module 19Canvas

Canvas API: Draw Charts, Games and Graphics with Code

D:/js-practice/chart.html

Console output appears here

Command	Draws
`getContext("2d")`	gets the pen
`fillStyle = "red"`	chooses the colour
`fillRect(x, y, w, h)`	a filled rectangle
`fillText(t, x, y)`	text
`beginPath, arc, lineTo, stroke`	circles and lines
`clearRect`	erase (before each animation frame)

WhereChart.js, Google Maps tiles, online games, signature pads and photo filters all use canvas.

Module 19Speech & more

Speech and Other Useful Browser APIs

D:/js-practice/speak.html

Console output appears here

AccessibilityA "Listen" button helps young readers, elderly users and people with low vision.

API	What it does	Real use
`speechSynthesis`	text → voice	read-aloud news
`IntersectionObserver`	is an element on screen?	lazy images, scroll animations
`navigator.share`	phone share sheet	"Share on WhatsApp"
`Notification`	system pop-ups	new message alerts
`navigator.onLine`	online / offline	"You are offline" banner
`matchMedia`	media queries in JS	dark-mode detection

Module 19Clean code

Best Practices: Code Others Can Read

bad.jsJS

good.jsJS

Meaningful names const by default One job per function Early return Do not repeat yourself (DRY) Format with Prettier Comment WHY, not what

Module 19Safe & fast

Security and Performance Checklist

Security

Show user text with textContent, not innerHTML (stops XSS attacks)
Never put secret API keys or passwords in front-end JS: anyone can read it with F12
Validate on the server too: browser checks can be bypassed
Do not store tokens or personal data in localStorage carelessly

XSSIf a comment like <img src=x onerror=alert(1)> is shown with innerHTML, it runs as code on every visitor's browser.

Performance

Update the DOM once (build a string or fragment), not inside a loop
Debounce search and resize handlers
Lazy-load images below the fold (loading="lazy")
Remove intervals and listeners you no longer need
Put scripts at the end of body or use defer

MeasureDevTools → Lighthouse gives your page a score out of 100 with tips.

Module 19Live Lab

Live Lab: A Drawing / Signature Pad

drawing-pad.html – edit me!

Live preview

TryAdd an eraser button (draw in white). Add a "Undo" by saving pad.toDataURL() after each stroke. Use it as a signature box on a form.

Module 19Practice Example 1 of 5

Bug Hunt: Fix 4 Bugs

BeginnerA trainee wrote a fee calculator, but it gives wrong answers. Find and fix every bug using the Console.

Your tasks

Run the starter: read the error message first
Bug 1: a typo in a variable name (ReferenceError)
Bug 2: string + number joined instead of added
Bug 3: loop skips the first student
Bug 4: discount applied as 10 instead of 10%

HintFix one bug at a time and run again. The first error stops the program, hiding the next bugs.

Where this is used: Every day of a developer's job.

Expected result – build this yourself first, then check the solution

D:/js-practice/fee-bugs.js

Console output appears here

fee-bugs.jsJS

Module 19Practice Example 2 of 5

Copy Coupon Code Button

BeginnerA Ranchi Mart offer banner shows coupon codes. One tap copies the code, the button says "Copied!".

Your tasks

Three coupon cards with code and offer text
One click handler for all cards (event delegation)
navigator.clipboard.writeText with a try / catch fallback
Button text "Copied!" for 1.5 s
Highlight the copied card

Where this is used: Shopping offers, UPI IDs, referral links, code snippets on docs sites.

Expected result – build this yourself first, then check the solution

D:/js-practice/coupons.html

Console output appears here

coupons.htmlHTML

Module 19Practice Example 3 of 5

Nearest Tourist Spot Finder

IntermediateFind which Jharkhand tourist spot is nearest to the user, using GPS (or Ranchi as a fallback).

Your tasks

Array of spots with lat and lng
getCurrentPosition with success and error callbacks
distanceKm(a, b) using the Haversine formula
Sort spots by distance and show the list
Fallback to Ranchi (23.3441, 85.3096) if location is denied

Where this is used: Store locators, "ATMs near me", cab and delivery apps.

Expected result – build this yourself first, then check the solution

D:/js-practice/nearest.html

Console output appears here

nearest.htmlHTML

Module 19Practice Example 4 of 5

Animated Pie Chart on Canvas

IntermediateShow how a family in Ranchi spends its monthly budget as an animated pie chart with a legend.

Your tasks

Data: [label, amount, colour] for 5 categories
Total with reduce, angle = amount / total * 2π
Draw each slice with arc() from the last end angle
Animate from 0 to 100% with requestAnimationFrame
Legend with percentage for each category

Where this is used: Dashboards, expense apps, school result analysis.

Expected result – build this yourself first, then check the solution

D:/js-practice/pie-chart.html

Console output appears here

pie-chart.htmlHTML

Module 19Practice Example 5 of 5

Scroll Progress Bar and Reveal Animations

AdvancedA blog article shows a reading-progress bar at the top and sections that fade in when they scroll into view.

Your tasks

Fixed bar at the top; width = scrolled / (scrollHeight - innerHeight)
Listen to the scroll event (passive)
IntersectionObserver watches every .reveal section
Add class "show" when 20% visible, then unobserve
Log which section appeared

HintIntersectionObserver is much faster than checking positions inside a scroll listener.

Where this is used: Blogs, landing pages, news sites, portfolios.

Expected result – build this yourself first, then check the solution

D:/js-practice/scroll-reveal.html

Console output appears here

scroll-reveal.htmlHTML

Module 19Module complete

Recap: What You Completed in Module 19

✓Syntax, runtime and logic bugs
✓DevTools: Console, Elements, Network, Application, Sources
✓console.table, time, warn; breakpoints; debugger
✓Geolocation and Clipboard APIs
✓Canvas drawing and animation
✓Speech, IntersectionObserver and more
✓Clean, secure and fast code

Coming next

Module 20: put everything together in 5 complete capstone apps.

Quick quiz – click an answer

Q1. Which DevTools tab shows whether a fetch returned 404?

Network lists every request with its status.

Q2. Showing user comments safely uses:

textContent never runs HTML or scripts.

Q3. Where should a secret API key live?

Front-end code is visible to everyone.

MODULE 20

Capstone Apps

⏱ 8+ hours5 practice examplesLive code lab

You will learn

Planning an app: screens, data and functions
The data → render → event → save loop
Combining DOM, events, storage, fetch and classes
Testing every state: empty, loading, error
Publishing apps for your portfolio

You will build

A To-Do list and a Quiz app
An Expense Tracker with a chart
A Weather app and a Shopping Cart

Module 20Real-world use

Where Is This Used in Real Websites and Apps?

You will find it here

Each app is a complete, working product like the ones on your phone
Together they use every module of this course
Build first, compare with the solution, then make it your own: new features, your design
Publish at least two on GitHub Pages and put them in your CV

Module 20How apps work

The App Loop: State, Render, Event, Save

Step	Tip
Plan	Draw the screens on paper. List the data (what is in the array?) and the functions.
State	Keep ALL data in one array or object.
Render	One function draws everything from the data.
Events	Change the data, then call render(). Never patch the screen by hand.
Save	save() after every change, load on start.
Test	Empty list, wrong input, slow or failed network, refresh.

Module 20Evaluation

How Your Apps Will Be Marked

1
Works: every "must have" in the brief
2
Clean code: good names, small functions, no repeated code
3
UI / UX: clear, mobile-friendly, feedback on every action
4
Edge cases: empty, invalid, error and loading states
5
Extra: one feature of your own idea

WorkflowUse the Code Lab (press L) or VS Code + Live Server in D:\js-practice\capstone.

Module 20Capstone App 1 of 5 – Brief

Smart To-Do List

Screen plan

Client: Students preparing for board exams (and any busy person)
Goal: Never forget a task: add, complete, filter and keep tasks after closing the browser.

Must have

Add with Enter or button; empty text not allowed
Tick to complete (strike-through), delete button
Filters and "3 tasks left" counter
High-priority tasks shown in red and on top
Saved in localStorage

todos[]➜render()➜click / submit➜save()

Skills used: ArraysObjectsDOMEventsDelegationlocalStorage

Module 20Practice Example 1 of 5

App 1: Smart To-Do List

IntermediateBuild the full To-Do app from the brief. Test it: add 3 tasks, complete one, filter, then press Run to reload: the tasks must still be there.

Your tasks

State: todos = [{id, text, done, high}] and filter
render() shows the filtered, sorted list and the counter
Form submit adds a task (trim, no empty)
One click listener on the list: toggle or delete by data-id
save() to localStorage after every change

HintExtra feature ideas: due dates, edit on double-click, drag to reorder, dark mode.

Where this is used: Google Tasks, Todoist, Trello and every project tool.

Expected result – build this yourself first, then check the solution

D:/js-practice/todo-app.html

Console output appears here

todo-app.htmlHTML

Module 20Capstone App 2 of 5 – Brief

Timed Quiz App

Screen plan

Client: BrainBit Infotech (weekly class tests)
Goal: Load questions from the server, give 15 seconds per question, show the score and save the best score.

Must have

Questions from /api/quiz with a loading state
15-second timer per question (auto-next on 0)
Green / red feedback, buttons locked after an answer
Result screen with percentage and a message
Best score saved; "Play again" button

fetch quiz➜show(q)➜answer / timeout➜score + best

Skills used: fetchasync/awaitsetIntervalEventsClasseslocalStorage

Module 20Practice Example 2 of 5

App 2: Timed Quiz App

AdvancedBuild the quiz from the brief. The practice server returns 4 questions from /api/quiz as {q, options, answer}.

Your tasks

A Quiz class holds questions, index, score
Start: fetch questions (show "Loading...")
showQuestion() draws the question, options and progress
Timer with setInterval; clear it on answer
Result screen and best score in localStorage

HintExtra feature ideas: shuffle questions and options, categories, a review screen of wrong answers.

Where this is used: Online tests, coaching apps, Kahoot-style games.

Expected result – build this yourself first, then check the solution

D:/js-practice/quiz-app.html

Console output appears here

quiz-app.htmlHTML

Module 20Capstone App 3 of 5 – Brief

Expense Tracker with Chart

Screen plan

Client: A family or a hostel student in Ranchi
Goal: Record income and expenses, see the balance instantly and understand where the money goes.

Must have

Balance, total income and total expense cards
Form validation (title, amount > 0)
History list with colour by type and delete
Bar chart of expenses by category (canvas)
Amounts in Indian format: Rs. 1,25,000

entries[]➜totals + chart➜submit / delete➜save()

Skills used: FormsValidationreduceCanvasIntl formatlocalStorage

Module 20Practice Example 3 of 5

App 3: Expense Tracker with Chart

AdvancedBuild the tracker from the brief. Sample entries are loaded the first time; your changes are saved.

Your tasks

State: entries = [{id, title, amount, type, cat, date}]
totals() with reduce for income, expense, balance
renderList() and drawChart() inside render()
Form submit with validation; delete by id
Format money with toLocaleString("en-IN")

HintExtra feature ideas: monthly filter, budget limit warning, export to CSV.

Where this is used: Walnut, Money Manager, Khatabook and every banking app.

Expected result – build this yourself first, then check the solution

D:/js-practice/expense-tracker.html

Console output appears here

expense-tracker.htmlHTML

Module 20Capstone App 4 of 5 – Brief

Jharkhand Weather App

Screen plan

Client: A travel blog / tourism website widget
Goal: Let visitors check the weather of any Jharkhand city before they travel.

Must have

Search by city (button or Enter)
Loading, success, "City not found" and error states
Icon and travel tip based on the condition
Last 4 searches as clickable chips (saved)
°C / °F toggle

input city➜fetch /api/weather➜render card➜save recent

Skills used: fetchasync/awaittry/catchencodeURIComponentTemplate literalslocalStorage

Module 20Practice Example 4 of 5

App 4: Jharkhand Weather App

IntermediateBuild the weather app. Practice API: /api/weather?city=NAME for Ranchi, Dhanbad, Jamshedpur, Bokaro, Deoghar, Hazaribagh and Netarhat. /api/slow and unknown cities test the other states.

Your tasks

async getWeather(city) with fetch + res.ok check
Show a spinner while waiting
Card with icon, temperature, condition, humidity, wind
404 → "City not found"; other errors → friendly message
Recent searches saved and clickable; °C/°F toggle

HintFor a real app use a free API such as Open-Meteo: only the URL and the field names change. Never put a secret key in front-end code.

Where this is used: Weather widgets, travel and farming apps.

Expected result – build this yourself first, then check the solution

D:/js-practice/weather-app.html

Console output appears here

weather-app.htmlHTML

Module 20Capstone App 5 of 5 – Brief

Shopping Cart for a Handicraft Store

Screen plan

Client: Jharkhand Handicrafts (online store for local artisans)
Goal: Show products from the server, let customers search, add to cart, change quantities and see the bill with GST.

Must have

Products from /api/products with a loading state
Search box + category filter together
Cart class: add, change qty, remove, totals
Bill with 5% GST and free delivery above Rs. 999
Cart saved; "Place order" POSTs to /api/orders

fetch products➜renderGrid / renderCart➜add / qty / search➜save + POST

Skills used: fetchClassesfilter / reduceDelegationSpreadlocalStorage

Module 20Practice Example 5 of 5

App 5: Handicraft Store Shopping Cart

AdvancedBuild the store from the brief. The practice server returns 6 products with id, name, price, category, image and rating.

Your tasks

A Cart class with a Map of id → qty, plus subtotal / gst / total getters
loadProducts() with fetch, then renderGrid()
Search + category filter combined in one function
Event delegation for Add, +, − and Remove
placeOrder() POSTs the cart, shows the order id and empties the cart

HintExtra feature ideas: wishlist, coupon codes, sort by price, product details modal.

Where this is used: Amazon, Flipkart, Meesho and every online store.

Expected result – build this yourself first, then check the solution

D:/js-practice/shopping-cart.html

Console output appears here

shopping-cart.htmlHTML

Module 20Publish

Publish Your Apps and Build a Portfolio

1
Put each app in its own folder with index.html
2
Create a free GitHub account and a repository per app
3
Upload the files (or use git push)
4
Settings → Pages → deploy from the main branch
5
Share the link: yourname.github.io/todo-app

Portfolio tipFor each app write 3 lines: what it does, what you used (fetch, classes, localStorage) and one problem you solved. Recruiters love this.

Also freeNetlify and Vercel: drag and drop your folder to publish in one minute.

Before you publishTest on your phone, check the Console for errors, remove test console.log lines and secret keys.

Module 20Course complete

You Are Now a JavaScript Developer!

CERTIFICATE OF COMPLETION

Complete JavaScript

20 modules · 95 practice examples · 5 capstone apps

Your Name

BrainBit Infotech, Ranchi

What to learn next

1
Git & GitHub every day: commit each feature
2
React: components and state, built on everything you learnt
3
Node.js + Express: write your own API server
4
A database (MongoDB or MySQL) to store real data
5
TypeScript for bigger, safer projects

Keep buildingRebuild apps you use every day (a mini WhatsApp, a cricket score board) and make real tools for your school, family or local shops.

Module 20Module complete

Recap: What You Completed in Module 20

✓The app loop: state, render, event, save
✓To-Do list with filters and storage
✓Timed quiz loaded from an API
✓Expense tracker with a canvas chart
✓Weather app with every UI state
✓Shopping cart with a class and POST
✓Publishing on GitHub Pages

Coming next

Publish your best two apps and share the links with your trainer!

Quick quiz – click an answer

Q1. After changing the data array, what should you call?

Data first, then draw the screen again.

Q2. Which state is often forgotten?

Always plan empty, loading and error screens.

Q3. Where can you host these apps for free?

Static HTML + JS apps are free to host.

PART 4 COMPLETE

Well done!

You have finished Part 4 of the Complete JavaScript Course.

Course complete! Course index

Modules completed

Module 18: Classes, OOP & Modules
Module 19: Debugging, Browser APIs & Best Practices
Module 20: Capstone Apps

Publish your apps, keep building and share your portfolio. Congratulations from BrainBit Infotech!