javascript · level 2 · unit 7 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
Keep the data in one object, then it.
As apps grow, the page and your variables can drift apart. The cure is to keep everything the app knows in one place, the state, usually an object, and never change the page directly.
Write one render function that draws the page from the state. Every listener then follows the same two steps: change the state, then call render(). The page cannot fall out of step, because it is always drawn fresh.
Call render() once at the start, too, so the first view comes from the state.
<p id="board"></p>
<button id="home">Home goal</button>
<button id="away">Away goal</button>const state = { home: 0, away: 0 };
const board = document.querySelector("#board");
function render() {
board.textContent = `Home ${state.home} - ${state.away} Away`;
}
document.querySelector("#home").addEventListener("click", () => { state.home++; render(); });
document.querySelector("#away").addEventListener("click", () => { state.away++; render(); });
render();Press run it to bring the page to life.
console
nothing logged yet
To draw a list from state, empty it with replaceChildren(), then append a fresh item for each entry.
guess first
Add a job is clicked twice. What does the page show?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<p id="list"></p>
<p id="count"></p>
<button id="add">Add a job</button>const state = { jobs: ["Feed the cat"] };
function render() {
document.querySelector("#list").textContent = state.jobs.join(", ");
document.querySelector("#count").textContent = `${state.jobs.length} jobs`;
}
document.querySelector("#add").addEventListener("click", () => {
state.jobs.push("Walk the dog");
render();
});
render();your turn
Your turn. A like button that counts once.
Fill in the value that remembers you have liked it, then the function that redraws the page. Press run and click Like twice: it should only count once.
the page your code works on
<button id="like">Like</button>
<p id="likes"></p>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- two clicks only add one likenot checked yet
fix it
The page number lags one click behind. Fix it!
the page your code works on
<p id="page"></p>
<button id="next">Next page</button>your javascript
Press run it to bring the page to life.
console
nothing logged yet
- two clicks reach page 3not checked yet
- The state does change. But what does the page show at the moment
render()runs? - Always change the state first, then draw the page from it.
- Swap lines 6 and 7, so the state changes before render() runs, then press run.
nailed it
your app keeps its state in one place. :D
- State is one object holding everything the app knows.
- Change the state, then call
render(). render()draws the page fresh from the state every time.
new words in your collection
- state
- render
This lesson isn’t saved. A free account remembers every lesson you finish.