Course home
FSWD · MERN STACK UNIT 2 / 5
2UNIT

FSWD · MERN Stack · The pages come alive

JavaScript ES6.

Unit 1 built the body; this unit gives it a brain. Modern JavaScript from your very first console.log() to a form that genuinely refuses bad input — variables, objects, the DOM, arrays at real scale, strings, regex shapes, functions, and events.

The Languagelet, const, objects, arrays
The DOMthe page, live & editable
Validationforms that protect real orders
8Classroom sessions · 60 min each
2Labs · 120 min each
22Exam-style questions solved along the way

Your 10 sessions, in order

Four classes teach it.
Then one lab wires it into your site.

Unit 2 runs in two rounds. Same rhythm as Unit 1 — four classroom sessions, then a hands-on lab in your own project folder. No new folder this unit: the same poshtik-campus/ you've been growing since Lab 1 simply gains its script.js.

Round 1

The language arrives — and meets your page

Round 2

Real scale, real strings, real protection

17CLASS Arrays & Array Methods

The full Poshtik menu — every dish, English and Telugu names together — becomes one array, poshtikMenu. Loops, forEach, map, filter — then the sort trap (10 before 2?!) and its comparator fix, and reduce for order totals.

The whole menu, one array 4 exam questions solved
SOON
18CLASS String Manipulation — and the Shape of a String

Case, trim (the classic "why did my validation fail" bug), includes, split, template literals in full — then the honest limit: includes('@') happily accepts "@@@". Enter regular expressions: describing a string's shape, built up to a real VCE-email pattern.

Regex, scoped & practical 3 exam questions solved
SOON
19CLASS Scripting Functions

Declarations formalised, function expressions, arrow functions (your map/filter callbacks, seen through a new lens), default parameters — and one reusable validateField(), the exact building block Lab 5 needs.

Reusable logic Exam question solved
SOON
20CLASS Event Handling

Clicks, keystrokes, submits. addEventListener, the event object, preventDefault — then the full worked submit-validation across every order-form field. Closes with Build-It-Twice: feeling how much manual DOM work twenty dishes took. Hold that thought for Unit 3.

The page reacts to you Exam question solved
SOON
LABFIVE Validation — Your Site Defends Itself

Back in your own poshtik-campus/ folder: script.js builds all ten dish cards from poshtikMenu, then checks every order on submit — trimmed name, 10-digit phone, a dish picked, a whole-number quantity — with red messages beside each field and no page reload.

Menu built from data Orders checked before they're placed

The running project · same folder, new powers

Poshtik Campus gains a brain.

Poshtik Campus పౌష్టిక్ క్యాంపస్ · no new folder this unit

"Same poshtik-campus/ folder. Same pages. One new file — and suddenly the site can think." script.js is created in Class 13 and grows through every session of this unit. Unit 3 will fork a new React project — but that's next unit's story, explained before it happens.

Everything you built in Unit 1 stays exactly where it is. The menu page you styled in Lab 3 becomes the testing ground for DOM selection at real scale, the order form from Lab 2 becomes the thing your validation protects, and every dish photo already in your images/ folder gets rendered onto the page by your own JavaScript instead of hand-written HTML.

What ships in your project this unit
  • script.js created in Class 13, linked from every page, growing all unit — the single file every later session extends
  • poshtikMenu — the full bilingual dish catalogue as one array of objects (Class 17), rendered onto the page dynamically in Lab 5
  • Full order-form validation — trimmed names, positive quantities, regex-shaped fields, inline errors, no reload (Lab 5)
  • A commit-and-push after every session — the habit from Lab 1 continues, one suggested message at every close card
poshtik-campus · order form by the end of Lab 5 — LIVE, try it
Your name — type here Name can't be empty — spaces don't count (.trim() caught it)
Dish — click to cycle poshtikMenu Ragi Sangati Bowl Valid choice — straight from poshtikMenu
Quantity — type here Positive number — passes validateField()

This form is genuinely live — every rule it just ran on you (.trim(), Number(), the > 0 check) is written line by line in your own script.js by Lab 5.