Javascript » The Chat Input
👉 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:
https://codepen.io/marcopeg/pen/PoYyZJY
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.
🤓 Resources:
- MDN: CSS Attribute Selectors
- MDN: CSS Selectors Specificity
- What is a pure function?
- MDN: preventDefault
- MDN: stopPropagation