State: Examples, Code, Notes

State

The current snapshot of everything in a web app.

Transition

A change from one state to another, often caused by user interaction.

Storage

State can live in the DOM, in JavaScript variables, or both.

What Is State?

A person or program can be described by its current condition.

Example

Standing up Sitting down Holding up two fingers

Each body part or page part can have its own state.

Code

var personState = "standing up"
var rightHandState = "raised"

Notes

State means what things are like right now.
A web page can have many states at the same time.
User actions can change state.

Liked And Not Liked

A picture can transition between liked and not liked.

Example

♥

State: Not Liked

Code

var liked = false

button.onclick = () => {
  liked = !liked
}

Notes

The picture has two states: liked and not liked.
Clicking causes the transition.
A boolean is a natural way to store this state.

Display State

display: none hides content. display: block shows it.

Example

Code

element.style.display = "none"
element.style.display = "block"

Notes

Hidden content still exists in the HTML.
The display style controls whether users see it.
This is DOM state.

Secrets App: Reveal

Start with a hidden secret, then reveal it on button click.

Example

id="secret-one"id="reveal-one"

How the HTML connects to JavaScript

id="reveal-one" is the button JavaScript listens to.

id="secret-one" is the paragraph JavaScript shows.

Code

<p id="secret-one" style="display: none;">
  Vegetables are better than dessert.
</p>
<button id="reveal-one" type="button">Reveal</button>

<script>
  document.getElementById("reveal-one").onclick = () => {
    document.getElementById("secret-one").style.display = "block"
  }
</script>

Notes

Initial state: secret-one is hidden.
JavaScript waits for a click on reveal-one.
After the click, JavaScript changes secret-one to display: block.

Secrets App: Hide Again

Add another button to transition back to hidden.

Example

id="secret-two"id="reveal-two"id="hide-two"

State: Secret Hidden

What each ID does

reveal-two changes secret-two to visible.

hide-two changes secret-two back to hidden.

Code

document.getElementById("reveal-two").onclick = () => {
  document.getElementById("secret-two").style.display = "block"
}

document.getElementById("hide-two").onclick = () => {
  document.getElementById("secret-two").style.display = "none"
}

Notes

Reveal and hide are opposite transitions.
Both buttons target the same paragraph: secret-two.
The state changes because the display style changes.

Improved Secrets App

Ask the user for a secret, store it in JavaScript, then reveal or hide it.

Example

id="secret-input"Enter your secretid="secret-output"

id="save-secret"id="reveal-secret"id="hide-secret"

State: No Secret

How this app is wired

secret-input is where the user types.

save-secret copies the input value into the JavaScript variable savedSecret.

reveal-secret writes savedSecret into secret-output.

hide-secret hides secret-output.

Code

var savedSecret = ""

document.getElementById("save-secret").onclick = () => {
  savedSecret = document.getElementById("secret-input").value
  document.getElementById("secret-input").value = ""
}

document.getElementById("reveal-secret").onclick = () => {
  document.getElementById("secret-output").innerHTML = savedSecret
  document.getElementById("secret-output").style.display = "block"
}

document.getElementById("hide-secret").onclick = () => {
  document.getElementById("secret-output").style.display = "none"
}

Notes

secret-input gives JavaScript the typed value.
savedSecret stores the value in JavaScript.
secret-output is the DOM place where the secret appears.
The overall state is the combination of the variable and what is visible on the page.

Visualizing State Transitions

State diagrams show how the app moves between states.

Example

No SecretSave Clicked →Secret SavedReveal Clicked →Secret VisibleHide Clicked →Secret Hidden

Code

// State transitions:
// No Secret -> Secret Saved
// Secret Saved -> Secret Visible
// Secret Visible -> Secret Hidden

Notes

States describe snapshots.
Events cause transitions.
Diagrams help us reason about programs.

State In The DOM And JavaScript

State can live in both the page and JavaScript variables.

Example

id="name-input"Nameid="save-name"

JS state: none. DOM state: input visible.

Two kinds of state

savedName is JavaScript state.

name-input.style.display is DOM visual state.

Code

var savedName = document.getElementById("name-input").value

document.getElementById("save-name").style.display = "none"
document.getElementById("name-input").style.display = "none"

Notes

savedName stores data in JavaScript.
name-input is hidden in the DOM after saving.
The total app state combines data state and visual state.

Slide Coverage Map

Slides 1-7: title, recap, operators/types recap, and lesson objectives are covered in the header and recap cards.

Slides 8-16: human state, liked/not liked, and state transitions are covered in sections 1 and 2.

Slides 17-22: display none/block and first secrets app are covered in sections 3 to 5.

Slides 23-29: hacking the secret app, improved app, and state diagram are covered in sections 6 and 7.

Slides 30-34: state in DOM and JavaScript, summary, and questions are covered in section 8 and final notes.