Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
Loading…
Code Lab is in development. New lessons and improvements are on the way. Progress can be deleted.
JAVASCRIPT DOM / CHAPTER 04 / Learn / LESSON 10
Capstone: a tiny budget calculator on the page. Read income and expense from inputs, compute remaining, show it, and mark the panel with class ok or bad.
Combines querySelector, value, Number, textContent, classList, and click.
Mini plan:
1) listen for #calc click 2) remaining = Number(income.value) - Number(expense.value) 3) #remaining textContent = String(remaining) 4) if remaining >= 0 → classList add ok, remove bad; else the opposite
Common mistake: swapping income/expense; or leaving the old class on.
<style>.ok{border:2px solid #3b9778}.bad{border:2px solid #8f3d4d}</style><div id="panel" class="box"><input id="income" type="text" value="0" /><input id="expense" type="text" value="0" /><button id="calc" type="button">Calc</button><p id="remaining">?</p></div>Combines value, math, textContent, and classList.
Press Run — HTML loads in a sandbox iframe; Stop removes the iframe (also kills infinite loops).
›