- The panel shows one of many “views” depending on it’s state.
- Each view presents information and may interact with user
- Any of the views can alter the “panel” state, trigger events
- Panel responds to state change and events to possibly swap the current view with another
- Implement using using only JavaScript/HTML/CSS – no frameworks
Ways I know of that might accomplish this:
- js: directly manipulate the DOM
- CSS, z-order, hidden/visible, etc.
An example would be a “login” panel:
- state:not-logged-in: the usual username/password and login button
- state:is-logged-in: “you are logged in as USERNAME”, logout button
My impression so far is that CSS is the more elegant way to do this, however, my knowledge of CSS pales in comparison to JavaScript. I just need to get this working quickly without watching a thousand, many outdated, videos and articles about CSS.