👉 User Story:
As a user Given a text input element And a "post" button When clicking on the button If the input is empty Then alert an error message Else Alert the input text Then clear the input element And keep focus on the input element
You can try things out directly on this pen:
NOTE: In this exercise you need to put together all the concepts that you have learned so far.
This is not an easy exercise and it will probably give you a decent challenge.
But you can do it, and in the end you will have build a fundamental UI component!
✅ Proposed Solution:
Don't run this unless you gave a very good effort to solve it yourself!
In this second solution, we leverage on functions to split the codebase into smaller and simpler blocks, then we glue pieces together to build the main logic.
In this third solution, we keep building on features. This time we want the "POST" button to be visible only if the message can be sent.
Messing up with different UI states (how it looks) based on some kind of logic are very common features. Just think of the "b" and "i" buttons in a classic word processor. They change constantly based on the cursor's position.
- MDN: CSS Attribute Selectors
- MDN: CSS Selectors Specificity
- What is a pure function?
- MDN: preventDefault
- MDN: stopPropagation