FREE JAVASCRIPT PROGRAMMING LEARNING PATH

WikiFree original practice workbook

The function playground

CASE STATUS: fictional/synthetic teaching material. Do not present the example as real research, employment experience or measured business performance.

OUTCOME
Build a JavaScript workshop-cost calculator with validated inputs, pure calculation functions and meaningful edge-case checks.

BEFORE YOU START
Basic computer use. A modern browser and text editor; HTML familiarity helps but no framework is required.

CASE
The fictional Acorn Workshop charges 12 currency units per seat. Valid quantity is an integer from 1 through 8. A member receives a fixed 5-unit discount per booking, not per seat. Invalid quantities must produce a clear error and no total.

INPUTS
Seats,Member,Expected total
1,No,12
1,Yes,7
3,Yes,31
8,No,96
0,No,Invalid
1.5,Yes,Invalid


ENTRY CHECK

Question: Is the string 3 the same type as the number 3?

Self-check: No. Parse and validate form input deliberately.

Question: Should a calculation function change unrelated page state?

Self-check: Prefer a pure function with an explicit result.

Question: Where does the discount apply?

Self-check: Once per valid booking.

STAGE 1: Represent the inputs

Prerequisite: Basic computer use. A modern browser and text editor; HTML familiarity helps but no framework is required.

Instruction: Form values arrive as text, so convert them deliberately and check the result before calculation. Name quantity, membership and unit price clearly. A blank string converted carelessly can become zero, and a decimal can slip through a simple greater-than check. Write the data contract first so the implementation has an unambiguous target.

Practice task: Define the input types and validation rules. Create examples for blank, numeric, decimal and nonnumeric quantities.

Deliverable: An input contract and example table.

Acceptance check: Valid quantity is an integer 1–8; blank and nonnumeric values are rejected.

If stuck: Do not rely on truthiness to distinguish all valid and invalid numeric inputs.

Record your work, decisions and evidence:




Record your result against the acceptance check:



STAGE 2: Write a pure calculation function

Prerequisite: Bring your previous output: An input contract and example table.

Instruction: Separate validation from the arithmetic result. For a valid booking, total equals quantity times 12 minus 5 if the member flag is true. Return a consistent result or a clear error without changing global variables. This separation makes the same logic usable from a browser form and a test script.

Practice task: Implement calculateTotal(quantity, isMember) and compare it with the six supplied examples.

Deliverable: A pure calculation function.

Acceptance check: Three member seats cost 31, not 21; the discount is applied once.

If stuck: If every seat gets the discount, move the subtraction outside the multiplication.

Record your work, decisions and evidence:




Record your result against the acceptance check:



STAGE 3: Process several bookings

Prerequisite: Bring your previous output: A pure calculation function.

Instruction: An array can represent a set of booking objects. Iterate without changing the original inputs, calculate each valid total and retain rejected rows with their reason. Silently dropping invalid records makes a summary difficult to audit. A useful result reports accepted count, rejected count and accepted revenue separately.

Practice task: Process four supplied bookings: 1 nonmember, 3 member, 8 nonmember and 0 nonmember.

Deliverable: A batch summary with rejection details.

Acceptance check: Accepted count is 3, rejected count is 1 and accepted total is 139.

If stuck: Do not coerce an invalid quantity to a valid minimum without telling the user.

Record your work, decisions and evidence:




Record your result against the acceptance check:



STAGE 4: Connect a small interface

Prerequisite: Bring your previous output: A batch summary with rejection details.

Instruction: A user interface should expose validation feedback near the input and show a total only for valid data. JSON can store sample records, but it does not validate their meaning. Use textContent for user-derived display strings and avoid inserting unchecked text as HTML. Keep calculation logic separate from event handling so the function remains testable.

Practice task: Connect the supplied form to the function. Add a labeled quantity input, membership checkbox and live result area.

Deliverable: A working browser calculator with clear errors.

Acceptance check: Invalid input clears any previous valid total and presents a readable correction message.

If stuck: If an old total remains after an error, reset the result state before showing feedback.

Record your work, decisions and evidence:




Record your result against the acceptance check:



STAGE 5: Test boundaries and explain the code

Prerequisite: Bring your previous output: A working browser calculator with clear errors.

Instruction: Test the edges where behavior changes: 0, 1, 8, 9, a decimal, blank text and nonnumeric input. Include member and nonmember paths. Expected values should come from the business rule, not by copying the function output. A short README explains how to run the page and which cases are covered.

Practice task: Run the supplied checks, add a ninth case and write a two-paragraph explanation of validation and discount logic.

Deliverable: A calculator package with independent expected results.

Acceptance check: All specified boundaries behave correctly and the README distinguishes parsing from calculation.

If stuck: A test that calls the same helper to calculate its expected answer cannot independently verify the arithmetic.

Record your work, decisions and evidence:




Record your result against the acceptance check:



WORKED CASE
The accepted sample totals are 12, 31 and 96, giving 139. Quantity zero is rejected. The member discount is a single 5-unit reduction, so three seats cost 3×12−5=31.

FINAL PROJECT
Deliver the calculator page, JavaScript, sample JSON, test results and README. Change the unit price to 15 in one named constant and update independent expected values while preserving the once-per-booking discount.

REQUIRED CRITICAL CHECK
Invalid quantities cannot produce a payable total and the membership discount is applied exactly once.

SCORING
Score each of the five stage acceptance checks from 0–16 (0 missing/incorrect; 8 partially supported; 16 complete and evidenced). Score the final integrated project from 0–20 (0 missing; 10 incomplete handover; 20 complete, reproducible and consistent with the case). Target: at least 80/100 AND the critical check must pass. A total score never overrides a failed critical check.

SCOPE LIMIT
This teaches core JavaScript and a small browser interface. It does not cover frameworks, payment processing or production checkout security.

SOURCES AND ACCESS
Assigned public videos can be watched free. Complete the original case in a text editor, on paper or in a spreadsheet you already have. No paid course, exam or provider certificate is included.

Free JavaScript Course: Core Programming Skills
WikiFree: https://wikifree.com/courses/microsoft-javascript-for-beginners/
Official source: https://www.youtube.com/playlist?list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2
Why selected: Selected Microsoft lessons cover types, arithmetic, conditions, functions, arrays, objects, JSON and errors without assigning the entire 51-video series.

Stage 1 selected lessons:

2. What Is JavaScript (3:33)
https://www.youtube.com/watch?v=Q_CRM2lXXBg&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=2

6. Creating your first application (4:20)
https://www.youtube.com/watch?v=nQu2bbh4Vyc&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=6

9. Declaring variables (3:53)
https://www.youtube.com/watch?v=JNIXfGiDWM8&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=9

10. Demo: Declaring variables (6:55)
https://www.youtube.com/watch?v=EQMPAaAo6Fc&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=10

15. Data types in JavaScript (5:41)
https://www.youtube.com/watch?v=AWfA95eLdq8&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=15

16. Demo: Data types in JavaScript (5:45)
https://www.youtube.com/watch?v=rEHV3fFMfn0&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=16

Stage 2 selected lessons:

17. Math in JavaScript (1:06)
https://www.youtube.com/watch?v=sHxqJna0Ub0&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=17

19. Converting strings to numbers (2:13)
https://www.youtube.com/watch?v=xHXr9Uv2HXM&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=19

25. Boolean logic with if statements (5:39)
https://www.youtube.com/watch?v=SxTp8j-fMMY&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=25

26. Demo: Boolean logic with if statements (7:28)
https://www.youtube.com/watch?v=C3Q-NRHWNAE&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=26

37. Functions (9:34)
https://www.youtube.com/watch?v=XgKsD6Zwvlc&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=37

38. Demo: Functions (8:02)
https://www.youtube.com/watch?v=5GBk8HGJiEc&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=38

Stage 3 selected lessons:

29. Creating arrays (1:30)
https://www.youtube.com/watch?v=1U4qTyq02Xw&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=29

31. Populating arrays (3:32)
https://www.youtube.com/watch?v=ZARmjyg7Lik&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=31

33. Array methods (2:00)
https://www.youtube.com/watch?v=9ORixWHwPZM&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=33

35. Loops (7:24)
https://www.youtube.com/watch?v=Eeh7pxtTZ3k&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=35

36. Demo: Loops (7:17)
https://www.youtube.com/watch?v=zH54MNiMgSg&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=36

43. Objects in JavaScript (10:43)
https://www.youtube.com/watch?v=SKsbH-IcsFs&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=43

Stage 4 selected lessons:

21. Handling errors with try/catch/finally (3:18)
https://www.youtube.com/watch?v=gdbAiMxbap4&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=21

22. Demo: Handling errors with try/catch/finally (3:34)
https://www.youtube.com/watch?v=_L00IiNVcVk&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=22

41. JavaScript Object Notation (JSON) (4:29)
https://www.youtube.com/watch?v=OEqHC1kbrbg&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=41

42. Demo: JavaScript Object Notation (JSON) (6:31)
https://www.youtube.com/watch?v=hxQmx2R1zJw&list=PLlrxD0HtieHhW0NCG7M536uHGOtJ95Ut2&index=42

MDN JavaScript learning modules
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting

REUSE
Original WikiFree teaching text and synthetic fixtures are supplied for personal learning and adaptation with attribution. Provider lessons remain on their original sites and retain their own terms. No provider certificate is included.