SASS Inputs HW — OCS Input Grammar

Lesson: https://pages.opencodingsociety.com/sass/inputs/

Rule: ocs__input + modifiers (small, medium, large, gradient) only. No inline styles, no made-up classes. HTML creates the input, SASS styles it, JS reads .value, pseudocode uses INPUT()/DISPLAY().

Popcorn Hack — refactor two inputs

Expected: one large gradient input + one compact plain input, both on ocs__input.

Search PVO resources Volunteer first name

Homework Hack — signup form refactor

Removed style widths/backgrounds/padding and .tinybox. Sizes: Assistance Category = large gradient (decorative gradient needs the modifier), First Name = small, Email = medium + type="email". Every field has a <label> for accessibility.

Assistance category Volunteer first name Volunteer email

Validation checklist

• %%html + UI_RUNNER: present
• Inline style / made-up classes: absent
• ocs__input on every input: yes (3/3)
• Modifiers: large+gradient, small, medium: yes
• Accessibility: visible <label> + correct type + placeholder on each field