============================================================
POSHTIK CAMPUS - LAB 4 CATCH-UP / RESCUE PACK
UI23PC510CS / UI23PC511CS - FSWD
Vasavi College of Engineering - R-23
============================================================

LAB 4 COVERS, WORD FOR WORD FROM THE OFFICIAL SYLLABUS:

    Programming Exercise 4 -
    "Validation of Static Website using JavaScript."

Lab 4 is PART 1 of that exercise: today your script learns to
READ the order form. Lab 5 is part 2: it learns to JUDGE the
form and refuse a bad order. Do not expect validation messages
on the page today - expect real values in the Console.

READ THIS WHOLE FILE BEFORE TOUCHING ANYTHING ELSE.

------------------------------------------------------------
1. WHAT THIS PACK IS - AND WHAT IT IS NOT
------------------------------------------------------------
This pack restores ONE thing: the exact folder that LAB 3
left behind. That folder is Lab 4's starting line.

It is an EMERGENCY BRIDGE, nothing more. It exists for
exactly three situations:

  (a) your machine died / was replaced and you have no backup;
  (b) you were genuinely absent for Labs 1-3
      (with your instructor's knowledge);
  (c) your instructor explicitly told you to use it.

It is NOT for anyone who simply skipped the earlier labs.
Labs 1-3 are where you learned to WRITE this HTML and CSS by
hand, and the exams test that on paper, with no pack to
rescue you.

TALK TO YOUR INSTRUCTOR BEFORE USING THIS PACK. No exceptions.

------------------------------------------------------------
2. STOP - THE BEST RESCUE IS NOT THIS PACK
------------------------------------------------------------
If you ever pushed your repo to GitHub (every lab since Lab 1
ends with a push), your real work is already safe. On any
machine:

    git clone https://github.com/<your-username>/poshtik-campus.git

That gives you YOUR pages, YOUR stylesheet, YOUR images and
YOUR full commit history - strictly better than anything in
this folder. Only continue below if you have no pushed repo.

If your folder exists and only ONE stylesheet rule is missing,
you do not need this pack either. Retype that rule from your
own crack log - five minutes, and you are current.

------------------------------------------------------------
3. WHAT THIS PACK RESTORES - IN PLAIN WORDS
------------------------------------------------------------
Lab 4 starts EXACTLY where LAB 3 STOPPED. Nothing more and
nothing less. Here is how the folder got to that point:

  - LAB 1 built the three pages (index, menu, about) and made
    the folder a Git repository.
  - LAB 2 grew menu.html: it gained the ORDER FORM.
  - LAB 3 finished the look: the site-wide style.css reached
    81 lines, and index.html got its semantic skeleton.

Lab 3's exit commit was "Style the menu order form", the 7th
commit in the repository. This pack is that state, complete:

    index.html    - Lab 1's front door WITH Lab 3's semantic
                    surgery already done: header / nav /
                    main / footer.
    menu.html     - Lab 1's ten dishes + LAB 2's ORDER FORM
                    (ids: cust-name, cust-phone, dish radios,
                    qty, notes).
    about.html    - Lab 1's about page.
    style.css     - EXACTLY 81 lines, the finished Unit-1
                    stylesheet, with the @media block LAST
                    (lines 66-81).
                    LAB 4 DOES NOT TOUCH THIS FILE AT ALL.
    images\       - the logo AND all ten dish photos:
                    jonna-rotte-wrap.png, sajja-roti-wrap.png,
                    ragi-sangati-bowl.png, ragi-idli-bowl.jpg,
                    pesarattu-with-sprouts.jpg,
                    ulava-charu-protein-bowl.jpg,
                    gongura-sprouts-salad.jpg,
                    sprouts-moong-chilla.jpg,
                    paneer-protein-bowl.jpg,
                    millet-protein-shake.jpg

*** COUNT THE FILES: FOUR. THERE IS NO script.js. ***

That is not an omission - it is the whole point. Lab 3 had no
reason to create one, because CSS changes how a page LOOKS,
never what it DOES. Creating script.js, and wiring it into
menu.html with a <script> tag, is the first graded step of
Lab 4 and you do it with your own hands.

For the same reason menu.html does NOT contain the
"Check my order" button yet. Adding it is graded too. Both
places are marked with a comment telling you exactly what to
type and where.

ONE EXTRA FILE, AND IT IS NOT FOR COPYING:

    script-reference.js  - Lab 4's FINISHED code, fully
                           commented. Note the filename: your
                           page does not load it. Build your
                           own script.js from the lab's
                           solution panels FIRST, then open
                           this file and compare line by line.
                           Renaming it to script.js in advance
                           costs you the only skill this lab
                           grades.

------------------------------------------------------------
4. SETUP - TEN MINUTES, IN THIS EXACT ORDER
------------------------------------------------------------
 1. Create the folder:  C:\Users\<you>\Desktop\poshtik-campus\
 2. Copy index.html, menu.html, about.html, style.css and the
    whole images\ folder into it. The images\ folder stays a
    FOLDER INSIDE poshtik-campus\ - do not loose-copy the
    photos next to the html files.
    (Keep script-reference.js somewhere else, or at least do
    not rename it, until you have made your own attempt.)
 3. Open style.css and COUNT: exactly 81 lines, @media last.
 4. Open menu.html in the browser. You should see: dark banner,
    styled nav bar, ten mint dish cards with photos, and a
    mintcream order form with a seagreen "Place order" button.
    If that page appears, the stylesheet arrived intact and
    you are standing on Lab 4's starting line.
 5. Press F12 and click the "Console" tab. It should be
    COMPLETELY EMPTY - no output, no red errors. That is
    correct: there is no JavaScript in this folder yet.
 6. Now open fswd_lab_04.html and start at Part 1. Part 5 walks you
    through creating script.js and wiring the tag.

------------------------------------------------------------
5. GIT - THE LAB IS NOT FINISHED UNTIL IT IS PUSHED
------------------------------------------------------------
If this pack is your FIRST setup (no repo yet), make it a repo
with ONE honest commit, exactly this message:

    git init
    git add .
    git commit -m "Catch up to Lab 4 starting point (rescue pack)"

Then create an empty GitHub repo named poshtik-campus, link it
and push (Lab 1 Part 15 shows the three commands):

    git remote add origin https://github.com/<you>/poshtik-campus.git
    git branch -M main
    git push -u origin main

Then, at the END of Lab 4, commit your real work with the
lab's own message - this is the commit Lab 4 asks every
student for:

    git status
    git add menu.html script.js
    git commit -m "Model menu as objects and read order form values"
    git push
    git log --oneline

Read every reply. "2 files changed" is the proof it worked:
menu.html (edited) and script.js (brand new).

If git push refuses:
  - "rejected - fetch first" -> run git pull, let it merge,
    then push again.
  - "authentication failed"  -> your token expired; regenerate
    it from GitHub > Settings > Developer settings, as Lab 1
    showed.
NEVER solve a push problem by deleting the folder and starting
over. Your history is the graded artefact.

------------------------------------------------------------
6. THE THREE ERRORS YOU WILL ACTUALLY HIT
------------------------------------------------------------
 (a) Console completely empty AFTER you wrote code.
     Three causes, in order of likelihood:
       1. Notepad saved your file as script.js.txt. In the
          Save dialog, type the name WITH quotes - "script.js"
          - and set "Save as type" to All Files. Turn on
          View > File name extensions in File Explorer and
          look at the real name.
       2. The <script src="script.js"></script> line is
          missing from menu.html. It must sit just before
          </body>.
       3. The filename is spelt differently: Script.js or
          script.JS will not load.

 (b) "Uncaught TypeError: Cannot read properties of null
      (reading 'value')"
     getElementById found NOTHING and gave back null. Two
     causes, in order of likelihood:
       1. the id in script.js does not exactly match the id in
          menu.html - check spelling AND case. cust-name is
          not custName.
       2. your script tag is in <head>, so the code ran before
          the form existed. Move it to just before </body>.

 (c) Quantity maths comes out wrong: 5 + 1 prints 51.
     Not a bug - a lesson. .value is ALWAYS a string, even from
     type="number". "5" + 1 glues, it does not add. Lab 5 fixes
     this with Number(). Leave it for now.

------------------------------------------------------------
7. THE HONEST SCAR - READ THIS TWICE
------------------------------------------------------------
Your classmates' git log shows seven earned commits:

    8c1f4d2 Style the menu order form                    <- Lab 3's exit
    5b7e9a3 Style the site navigation
    c3e6d10 Add site-wide stylesheet
    9e2a6b4 Give menu and about their semantic skeletons
    2d4c8e1 Give index.html its semantic skeleton
    4f9c2b1 Add order form to menu                       <- Lab 2's exit
    a1d3e07 First version of Poshtik Campus site         <- Lab 1's exit

Yours shows ONE rescue commit instead. That is deliberate.
We do not fake history in this course - a repo's log is its
autobiography, and yours honestly says "I caught up here."
Your Lab 4 commit will stack on top of the rescue commit, and
from Lab 5 onward your story is earned line by line like
everyone else's.

------------------------------------------------------------
8. THE DEBT - HOW TO ACTUALLY CATCH UP
------------------------------------------------------------
This pack restores FILES, not SKILLS. The skills live in the
labs you missed, and every one is self-paced in Learning
Mode (scroll + sliders, no presenter needed):

    fswd_lab_01.html - build these three pages from a blank file,
                  and make the folder a Git repository
    fswd_lab_02.html - build the order form yourself (exam banker!)
    fswd_lab_03.html - write the 81-line stylesheet yourself

Work through them this week, in the fswd-practice sandbox -
nothing you do there can damage this repo.

AND ONE MORE THING, THE HONEST WAY TO USE
script-reference.js: build your own script.js first, compare
second, and if you ever do read it before attempting, then
CLOSE it and retype your version from memory. A file you only
read is a file you cannot reproduce in an exam hall.

Now open fswd_lab_04.html, run Part 5's starting-line checks,
and build the rest yourself.
============================================================