Ready for a script – JavaScript Exercise with Solution

Prepare a page so that a script could use it.

What to build

A sign-up page with the exact ids that a script would look for, and a class that can hide things.

Requirements

A form with the id signup.
An input with the id email and the type email, and a label connected to it.
A submit button inside the form.
A p with the id message and role="status", so that screen readers announce changes to it.
A ul with the id items.
A CSS rule for the class hidden that removes an element from view, and at least one element using that class.

Constraints

Every id on the page must be unique. No script is needed yet.

Example

<label for="email">Email</label>

Why it works

A script can only find what has a reliable name. Separating the look into a class means that a script will later be able to hide anything with one simple change.

Hints

Hint 1

A script finds elements by id, so give each one its id exactly as listed.

Hint 2

A label's for attribute must match the input's id.

Hint 3

Write a CSS rule for .hidden, then give one element that class.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sign up</title>
  <style>
    .hidden { display: none; }
  </style>
</head>
<body>
  <form id="signup">
    <label for="email">Email</label>
    <input id="email" type="email">
    <button type="submit">Send</button>
  </form>
  <p id="message" role="status"></p>
  <ul id="items"></ul>
  <p class="hidden">Thanks for signing up.</p>
</body>
</html>

Lesson: HTML and CSS →