Add with calc — practice exercise

What you'll be asked to do

1. 1.Add with calcexercise · easy · 10 min

   Make #box 100px + 50px wide.

   Passes when: Make #box 100px + 50px wide.

2. 2.Subtract with calcexercise · easy · 10 min · practice plan

   Make #box 200px minus 40px wide.

   Passes when: Make #box 200px minus 40px wide.

3. 3.Pick the smaller valueexercise · easy · 10 min · practice plan

   Use min() so the width is the smaller of 400px and 250px.

   Passes when: Use min() so the width is the smaller of 400px and 250px.

4. 4.Pick the larger valueexercise · easy · 10 min · practice plan

   Use max() so the width is the larger of 120px and 300px.

   Passes when: Use max() so the width is the larger of 120px and 300px.

5. 5.Clamp a valueexercise · medium · 10 min · practice plan

   Clamp the width between 100px and 200px with a 500px preference.

   Passes when: Clamp the width between 100px and 200px with a 500px preference.

6. 6.Fix the missing spacesbug fix · easy · 8 min

   calc() requires spaces around + and -.

   Passes when: calc() requires spaces around + and -.

7. 7.Fix min and max confusedbug fix · easy · 8 min · practice plan

   min() picks the smallest — max() was intended here.

   Passes when: min() picks the smallest — max() was intended here.

8. 8.Fix the clamp argument orderbug fix · easy · 8 min · practice plan

   clamp() takes minimum, preferred, maximum in that order.

   Passes when: clamp() takes minimum, preferred, maximum in that order.

9. 9.Fix the missing calcbug fix · easy · 8 min · practice plan

   An arithmetic expression needs calc() to be evaluated.

   Passes when: An arithmetic expression needs calc() to be evaluated.

10. 10.Fix the mismatched bracketsbug fix · easy · 8 min · practice plan

    The closing bracket is missing, so the declaration is dropped.

    Passes when: The closing bracket is missing, so the declaration is dropped.

Between them these tasks cover calc(), min() and max() and clamp().

Looking for a different chapter? See every practice set, or switch to the interview theory questions.