Working with various UI logic

In this section, we'll see how to implement different logic for UI components, such as logic for hiding/showing UI components, calculating values, enabling a logout feature, and so on.

In this section, we are going to cover the following:

• Hiding/showing UI components
• Calculating fields
• Enabling a logout feature
• Validating input using a regex

Hiding/showing UI components

It's a very frequent requirement to hide or show UI components when some other UI component is interacted with. For example, you might show a form if the user clicks on a button and hide the form when the user clicks on the button again.

The following are the steps to take to hide/show UI components using JavaScript:

1. Create a new web page with the main-ui-logics Page ID under the chapter7 web application.
2. Drag and drop the UI components on the page as per the following table:
   

   Table 7.2 – A table of UI components

   Make sure all...