The fee tracker, in the browser, that remembers

The situation

A small academy in Lahore keeps its fee list on a whiteboard that gets wiped every Friday. Build them a fee tracker that runs in any browser with no server: add a student, see who is clear and who is due, watch the total change live, and find it all still there after the page is closed.

This is the shape of the first thing every front-end job interview asks you to build.

What you'll be able to show

• Hold records in an array of objects and render them with a loop
• Read a form, validate it, and refuse bad input politely
• Derive the totals from the data every time instead of keeping a second copy
• Persist with localStorage and prove it survives a reload

What you need

• A text editor and a browser with its console open (F12)
• Three files: index.html, style.css, app.js
• The lesson 6 starting point

Tasks

1. 1The data and the render
   In app.js, start with an array of four student objects (name, feeDue, feePaid). Write render() that clears a list element and adds one row per student showing name, due, paid, and a status word: clear, partial or due.
   A correct result: Four rows on the page, each with the right status word, produced entirely by render().
2. 2The add form
   A form with name, fee due and fee paid. On submit: prevent the reload, read the values, Number() the amounts, refuse an empty name or a negative amount with a red message under the form, otherwise push a new object and call render().
   A correct result: A good entry appears immediately; an empty name or -500 shows the message and adds nothing.
3. 3Derived totals
   Show total due, total paid and total outstanding above the list. Compute them inside render() from the array every time — never keep running totals in separate variables.
   A correct result: Add a student and the three totals change without any code touching a total directly.
4. 4Colour by status
   Give each row a class — clear, partial or due — with classList, and style the three in style.css. No inline styles.
   A correct result: Three visibly different row colours, and no style= attributes in app.js.
5. 5Delete, and keep it consistent
   Add a delete button to each row that removes that student from the array (filter or splice) and calls render(). Deleting must update the totals too.
   A correct result: Delete a student and the totals fall by exactly that student's numbers.
6. 6Make it remember
   Save the array to localStorage as JSON after every change, and load it on startup, falling back to the four starters when nothing is stored. Close the tab, open it again.
   A correct result: Your added students are still there after the tab is closed and reopened.
7. 7Break it, read it, fix it
   Misspell a variable name on purpose, open the console, read the error and fix it. Then paste one sentence into your notes: what the error said and which line it named.
   A correct result: One error message recorded with its line number.

What to hand in

The three files in a folder (zipped or a link), a screenshot after a reload showing your added students still present, and the one-sentence error note.

How it is marked