27/* ===== MPS-02 · read the order form on click =====
28 1 fetch the button · 2 say what to run when · 3 fetch each field then
29 read it · 4 print it. */
30
31// 1 — fetch the button once
32const checkBtn = document.getElementById("check-order");
33
34// Safety check: index.html and about.html have no form and no button.
35if (checkBtn) {
36
37 // 2 — say WHAT to run WHEN it is clicked
38 checkBtn.addEventListener("click", function () {
39
40 // 3 — getElementById hands you the BOX; .value hands you the
41 // CONTENTS. Two different steps, never one.
42 const nameBox = document.getElementById("cust-name");
43 const phoneBox = document.getElementById("cust-phone");
44 const qtyBox = document.getElementById("qty");
45 const notesBox = document.getElementById("notes");
46
47 let customerName = nameBox.value;
48 let phone = phoneBox.value;
49 let howMany = qtyBox.value;
50 let notes = notesBox.value;
51
52 // The radio group: only the CHECKED one is the answer.
53 const picked = document.querySelector("input[name='dish']:checked");
54 let chosenDish = picked ? picked.value : "";
55
56 // 4 — print it, each with a label so the output is readable
57 console.log("customer name:", customerName);
58 console.log("phone:", phone);
59 console.log("dish ordered:", chosenDish);
60 console.log("quantity:", howMany);
61 console.log("notes:", notes);
62
63 // .value is ALWAYS a string, even from type="number".
64 console.log("typeof quantity:", typeof howMany);
65 console.log("howMany + 1 gives:", howMany + 1);
66
67 // Lab 5's job is to REFUSE a bad order. Today we only notice.
68 if (customerName === "") {
69 console.log("\u26A0 the name field is empty");
70 }
71 if (chosenDish === "") {
72 console.log("\u26A0 no dish was picked");
73 }
74 });
75
76}
