Javascript » The Chat Input

LearnJS »

👉 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
    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.

🤓 Resources:

💬 Comments & New Ideas:

results matching ""

    No results matching ""