Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 41Advanced JavaScript & Browser APIs2 Hours Practical
Push to GitHub to Complete
Modular JavaScript Architecture (ES6 Modules, Import & Export)
Prior to ES6 (ECMAScript 2015), JavaScript lacked a native module system, forcing developers to use massive single script files or pollute the window global object. ES6 Modules provide clean, file-scoped boundaries where each file explicitly declares what functions or data it shares using export and what dependencies it consumes using import.
Interactive Learning Roadmap
Day 41 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Understand why modern enterprise codebases split scripts into decoupled ES6 modules.
✔Configure the browser script tag using type="module" to enable native import/export statements.
✔Implement Named Exports (export const add = ...) and Default Exports (export default App).
✔Handle module scope: understand why variables in modules are never leaked into window/global scope.
✔Structure a multi-file frontend architecture with utility helpers and DOM handlers.
Day 41 MasterclassAdvanced JavaScript & Browser APIs
Modular JavaScript Architecture (ES6 Modules, Import & Export) — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
Prior to ES6 (ECMAScript 2015), JavaScript lacked a native module system, forcing developers to use massive single script files or pollute the window global object. ES6 Modules provide clean, file-scoped boundaries where each file explicitly declares what functions or data it shares using export and what dependencies it consumes using import.
Module Tag: Script tags loading ES6 modules MUST specify type="module" (<script type="module" src="app.js"></script>).
Named Exports: You can export multiple named entities using export const or export { fnA, fnB }. They must be imported with matching names inside curly braces { fnA }.
Default Export: A module can have exactly one default export (export default function), which can be imported under any alias without curly braces.
Strict Mode by Default: All code inside ES6 modules executes in strict mode ("use strict") automatically.
CORS Requirement: Modern browsers only load type="module" scripts via HTTP/HTTPS protocols (e.g. Live Server), not via raw file:/// protocols due to CORS security policies.
Dimaag Mein Bithane Ka Model
"Think of modules like individual tools in a master craftsman toolbox: instead of carrying a giant 100-pound fused metal block, each tool (hammer, screwdriver, wrench) is independent in its own slot and brought out only when specifically needed."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how math utilities and formatting functions are encapsulated in separate files and imported cleanly into the primary application runner.
ES6 Module Multi-File Architecture Simulationhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6 Modules Demo</title>
<style>
body { font-family: system-ui, sans-serif; background: #060c18; color: #fff; padding: 24px; }
.card { background: #0c1328; border: 1px solid #1e293b; padding: 20px; border-radius: 12px; max-width: 500px; margin: auto; }
.val { color: #38bdf8; font-weight: bold; font-family: monospace; }
</style>
</head>
<body>
<div class="card">
<h2>📦 Modular Calculator</h2>
<p>Addition (Named Export): <span class="val" id="resAdd">...</span></p>
<p>Currency Format (Default Export): <span class="val" id="resCur">...</span></p>
</div>
<script type="module">
const add = (a, b) => a + b;
const formatINR = (num) => '₹' + num.toLocaleString('en-IN');
const sum = add(1500, 2750);
document.getElementById("resAdd").textContent = sum;
document.getElementById("resCur").textContent = formatINR(sum);
</script>
</body>
</html>2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
3 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 41 Practical Task Test Studio
Test Score:1 / 3 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Add type="module" to Script Tag
Add type="module" to the script tag to activate native browser ES6 module loading.
✔ PASSED
Task 2Export Named Functions from Utility File
Export named helper functions calculateGST and calculateDiscount using the export keyword.
⏳ WAITING
Task 3Import Named Functions in Main Script
Import the calculateGST helper from the relative module path ./utils/tax.js.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh190 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Relative Path Extension Missing in ES6 Module Import
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
// utils.js exists in the same folder2
import { calculateTotal } from "./utils";3
console.log(calculateTotal(100));Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
In Node.js or bundlers like Webpack, file extensions can often be omitted. However, native browser ES6 module loaders do NOT automatically resolve .js extensions; you MUST provide the exact full relative path including .js extension.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 index.htmlModular E-Commerce Checkout Calculator Architecture
- •Create three decoupled files: index.html, taxCalculator.js, and main.js.
- •In taxCalculator.js, export named functions for GST (18%) and Shipping fee calculation, plus default export for Invoice total.
- •In main.js, import the modules using relative paths with .js extensions and bind them to an interactive billing table.
- •Run the project using a local dev server (e.g. VS Code Live Server) to verify CORS compliance.
Submission Evaluation Criteria: Push modular index.html, taxCalculator.js, and main.js to your GitHub repository under day-41.
Exact Assignment Solution Code: index.html
Open Visual Studio Code on your PC (code .), create index.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BCA Day 41 - Modular Architecture</title>
<style>
body { font-family: "Segoe UI", sans-serif; background: #060c18; color: #fff; padding: 24px; }
.card { background: #0c1328; border: 1px solid #1e293b; padding: 24px; border-radius: 12px; max-width: 480px; margin: auto; }
.row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #1e293b; }
.total { font-size: 18px; font-weight: bold; color: #38bdf8; border-top: 2px solid #38bdf8; margin-top: 12px; padding-top: 12px; }
button { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 16px; }
</style>
</head>
<body>
<div class="card">
<h2>🛒 Order Summary (Modular ES6)</h2>
<div class="row"><span>Item Subtotal:</span><span id="subtotal">₹2,400</span></div>
<div class="row"><span>GST (18%):</span><span id="tax">₹0</span></div>
<div class="row"><span>Shipping:</span><span id="shipping">₹0</span></div>
<div class="row total"><span>Grand Total:</span><span id="grandTotal">₹0</span></div>
<button id="calcBtn">Calculate Invoice</button>
</div>
<script type="module">
const taxModule = {
getGST: (amt) => amt * 0.18,
getShipping: (amt) => amt > 2000 ? 0 : 150,
getTotal: (amt, tax, ship) => amt + tax + ship
};
document.getElementById("calcBtn").addEventListener("click", () => {
const sub = 2400;
const tax = taxModule.getGST(sub);
const shipping = taxModule.getShipping(sub);
const grand = taxModule.getTotal(sub, tax, shipping);
document.getElementById("tax").textContent = "₹" + tax.toFixed(2);
document.getElementById("shipping").textContent = shipping === 0 ? "FREE" : "₹" + shipping;
document.getElementById("grandTotal").textContent = "₹" + grand.toFixed(2);
});
</script>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
Why does opening an ES6 module file directly from the local file system (file:///) result in a CORS error in modern browsers?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
mkdir day-41
Create a new project folder (day-41)
2$
cd day-41
Change working directory to day-41
3$
git checkout -b feature/day-41-es6-modules
4$
git add .
Stage all modified files and new assets for commit
5$
git commit -m "feat(day-41): implement es6 modular architecture with named and default exports"
Commit staged changes with a descriptive message
6$
git push origin feature/day-41-es6-modules
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 41 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-41/ or bca-day-41/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 41
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 41
4$
mkdir day-41
Create a new project folder (day-41)
5$
cd day-41
Change working directory to day-41
6$
# 3. Create your code file: index.html
7$
# (Write your Day 41 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 41: Modular JavaScript Architecture (ES6 Modules, Import & Export)"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-41/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/Day 17 Prior Lesson
└──index.html
day-18/Day 18 Prior Lesson
└──index.html
day-19/Day 19 Prior Lesson
└──index.html
day-20/Day 20 Prior Lesson
└──index.html
└──styles.css
day-21/Day 21 Prior Lesson
└──index.html
day-22/Day 22 Prior Lesson
└──index.html
day-23/Day 23 Prior Lesson
└──index.html
day-24/Day 24 Prior Lesson
└──index.html
day-25/Day 25 Prior Lesson
└──index.html
day-26/Day 26 Prior Lesson
└──index.html
day-27/Day 27 Prior Lesson
└──index.html
day-28/Day 28 Prior Lesson
└──index.html
day-29/Day 29 Prior Lesson
└──index.html
day-30/Day 30 Prior Lesson
└──index.html
└──styles.css
day-31/Day 31 Prior Lesson
└──index.html
day-32/Day 32 Prior Lesson
└──index.html
day-33/Day 33 Prior Lesson
└──index.html
day-34/Day 34 Prior Lesson
└──index.html
day-35/Day 35 Prior Lesson
└──index.html
day-36/Day 36 Prior Lesson
└──index.html
day-37/Day 37 Prior Lesson
└──index.html
day-38/Day 38 Prior Lesson
└──index.html
day-39/Day 39 Prior Lesson
└──index.html
day-40/Day 40 Prior Lesson
└──index.html
day-41/✨ CREATE THIS FOLDER FOR TODAY (Day 41)
└──index.htmlMust contain:
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 41 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 40: Sprint 4 Capstone: University Resource Hub Single Page Application first.
Complete Day 40 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal