OCS SASS Inputs (PVO)

Source lesson: sass/inputs

Grammar used: base ocs__input plus one size (small / medium / large) and, where a decorative gradient is wanted, gradient. HTML defines the field, SASS styles it, and JavaScript would read .value.

Popcorn Hack

The 400px dashed-purple search field becomes ocs__input large gradient (one large, gradient-styled input). The made-up box class becomes ocs__input small (one compact plain input).

Homework Hack

Field	Before	After	Why
Assistance Category	style="width: 500px; background: linear-gradient(...)"	ocs__input large gradient	the main field, and the gradient now comes from the modifier instead of inline CSS
Volunteer First Name	class="tinybox"	ocs__input small	short value, compact field
Volunteer Email	style="padding: 6px;"	ocs__input medium	standard size; kept type="email" so phones show the @ keyboard and the browser can check the format

For accessibility, each input also gets a visible <label> tied to it with for / id (a placeholder disappears once you start typing, so it isn’t a real label), and a name so a form submission knows which value is which.

Assistance category Volunteer first name Volunteer email

Assistance category

Volunteer first name

Volunteer email

Checklist: %%html and UI_RUNNER present. No inline style attributes, no made-up classes (box and tinybox removed). ocs__input plus a size modifier on every input, and gradient on the decorative field.

Same interaction in AP CSP pseudocode:

category ← INPUT("Assistance category")
DISPLAY("Searching PVO resources for: " + category)

The HTML input is the browser’s version of INPUT(). The SASS only changes how it looks, not what value it collects.