Add an output element holding a result.
Acceptance criteria
- 1.Add an output element holding a result.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML <output> Tag chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “The tag is used to display the result of a calculation or user action in a form. It is commonly used with JavaScript to show dynamic results like sums, percentages, or other computed values. The element is often linked to one or more input elements using the for attribute.” .
1.Show a resultexercise · easy · 10 min
Add an output element holding a result.
Passes when: Add an output element holding a result.
2.Link it to its inputsexercise · easy · 10 min · practice plan
Say which fields the result was calculated from.
Passes when: Say which fields the result was calculated from.
3.Output inside a formexercise · easy · 10 min · practice plan
Put the result inside the form it belongs to.
Passes when: Put the result inside the form it belongs to.
4.Label the resultexercise · easy · 10 min · practice plan
Add a label naming the output.
Passes when: Add a label naming the output.
5.A calculator rowexercise · medium · 10 min · practice plan
Build a form with two number inputs and a linked output.
Passes when: Build a form with two number inputs and a linked output.
6.Fix the span used for a resultbug fix · easy · 8 min
A calculated value is an output element.
Passes when: A calculated value is an output element.
7.Fix the missing source fieldsbug fix · easy · 8 min · practice plan
An output should say which inputs produced it.
Passes when: An output should say which inputs produced it.
8.Fix the output outside the formbug fix · easy · 8 min · practice plan
The result belongs with the fields it comes from.
Passes when: The result belongs with the fields it comes from.
9.Fix the label with no targetbug fix · easy · 8 min · practice plan
The label must point at the output's id.
Passes when: The label must point at the output's id.
10.Fix the missing second inputbug fix · easy · 8 min · practice plan
The total is calculated from two numbers.
Passes when: The total is calculated from two numbers.
Between them these tasks cover Calculated results, for attribute and Live regions.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.