============================================================ POSHTIK CAMPUS - LAB 5 CATCH-UP / RESCUE PACK UI23PC510CS / UI23PC511CS - FSWD Vasavi College of Engineering - R-23 ============================================================ LAB 5 COVERS, WORD FOR WORD FROM THE OFFICIAL SYLLABUS: Programming Exercise 4 - "Validation of Static Website using JavaScript." Lab 4 was PART 1 of that exercise: your script learned to READ the order form. Lab 5 is PART 2: the site defends itself. Your script builds the ten dish cards from data and refuses a bad order with clear red messages on the page. 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 4 left behind. That folder is Lab 5'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 Lab 4 (with your instructor's knowledge); (c) your instructor explicitly told you to use it. It is NOT a shortcut past Lab 4. Lab 4 is where you learned to fetch an element and read its .value, and Lab 5 builds directly on that skill. ------------------------------------------------------------ 2. STOP - THE BEST RESCUE IS NOT THIS PACK ------------------------------------------------------------ If you pushed your repo to GitHub at the end of Lab 4, your real work is already safe. On any machine: git clone https://github.com//poshtik-campus.git That gives you YOUR pages, YOUR script.js and YOUR full commit history - strictly better than anything in this folder. Only continue below if you have no pushed repo. ------------------------------------------------------------ 3. WHAT THIS PACK RESTORES - IN PLAIN WORDS ------------------------------------------------------------ Lab 5 starts EXACTLY where LAB 4 STOPPED: - LAB 1 built the three pages and made the folder a repo. - LAB 2 grew menu.html: it gained the ORDER FORM. - LAB 3 finished the look: style.css reached 81 lines. - LAB 4 added the 5th file, script.js, and the "Check my order" button. Lab 4's exit commit was "Model menu as objects and read order form values". This pack is that state, complete: index.html - the front door: header / nav / main / footer. menu.html - ten dish cards + the order form (ids: cust-name, cust-phone, dish radios, qty, notes), the "Check my order" button, and as the last line before . about.html - the about page. style.css - EXACTLY 81 lines, @media block LAST. script.js - Lab 4's finished script: the 3-dish poshtikMenu array, the for loop, and the click listener that prints the form's values to the Console. images\ - the logo AND all ten dish photos: poshtik-campus-logo.jpg, 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: FIVE, PLUS THE images\ FOLDER. *** Nothing from Lab 5 is in here. Turning the ten cards into data, and refusing a bad order, is what Lab 5 grades - and you do it with your own hands. ------------------------------------------------------------ 4. SETUP - TEN MINUTES, IN THIS EXACT ORDER ------------------------------------------------------------ 1. Create the folder: C:\Users\\Desktop\poshtik-campus\ 2. Copy index.html, menu.html, about.html, style.css, script.js 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. 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 TWO buttons: "Place order" and "Check my order". 5. Press F12 and click the "Console" tab. You should see three dish objects and "dishes modelled: 3". No red errors. 6. Type a name, pick a dish, click "Check my order". The Console prints every field's value. If it does, you are standing on Lab 5's starting line. 7. Now open fswd_lab_05.html and start at Part 1. ------------------------------------------------------------ 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 5 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//poshtik-campus.git git branch -M main git push -u origin main Then, at the END of Lab 5, commit your real work with the message the lab gives you, and push again. Read every reply. 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) The page reloads the moment you click "Place order", and your messages flash and vanish. The submit listener is missing event.preventDefault(), or it is not the FIRST line inside the function. (b) "Uncaught TypeError: Cannot read properties of null" getElementById found NOTHING. The id in script.js does not exactly match the id in menu.html - check spelling AND case. err-name is not errName. (c) Quantity 3 is refused, or 2.5 is accepted. .value is ALWAYS a string, and Number.isInteger("3") is false. Convert it with Number() first, then check Number.isInteger() and the range 1 to 10. ------------------------------------------------------------ 7. THE HONEST SCAR ------------------------------------------------------------ Your git log shows ONE rescue commit where your classmates show their earned Lab 1-4 commits. That is deliberate: a repo's log is its autobiography, and yours honestly says "I caught up here." Your Lab 5 commit stacks on top of it, and from here 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. Work through the labs you missed this week, in the fswd-practice sandbox: fswd_lab_04.html - create script.js, model the menu as objects, and read the order form on click Open script.js from this pack and make sure you can explain every line of it. A file you only read is a file you cannot reproduce in an exam hall. Now open fswd_lab_05.html and build the rest yourself. ============================================================