SASS Inputs HW
Popcorn Hack
Click Run in the UI runner to render the refactored inputs. The inline width and dashed border styles and the made-up class are replaced with the OCS input grammar: one large gradient search field and one compact plain field.
Challenge
Popcorn Hack - PVO Search Inputs
Homework Hack
Click Run in the UI runner to render the refactored PVO signup form. Every input uses ocs__input with a size modifier, the gradient field uses the gradient modifier instead of an inline background, and every field has a visible label plus a placeholder.
Challenge
Homework Hack - PVO Signup Form
How It Works
HTML defines each input and its label, the OCS SASS grammar styles it through ocs__input plus a size or style modifier, and no inline CSS is needed. Using the same base class everywhere keeps the PVO form consistent, so a visitor doesn’t have to relearn the interface from field to field. In AP CSP pseudocode, each field is like an INPUT() call: the label and placeholder tell the user what data the program is asking for.