Alert Messages

Page Elements

The page includes the following elements:

• An alert custom element

• Text inputs, dropdowns, buttons and a switch that allow site visitors to customize the alerts according to their need

Page Code

The onReady function sets the following event handlers:

• Show Alert button on Click - validates that the message text input is not empty and then creates an object that includes the chosen alert configuration and passes this object to the alerts backend function.

• Position dropdown onChange - sets the position attribute of the custom element to the chosen screen position using the setAttribute function.

• Clear button onClick - reverts all the configuration options back to the original configuration.

Public code

The alerts.js backend file includes two functions:

• alert - runs validations on the input. Then it calls the newAlert function and passes the alert configurations object to it.

• newAlert - sets the attribute of the custom element to a new alert according to the requested configuration. Each time this function is called it increments the count property of the configuration object so that the object is unique even if the same configuration is sent more than once.

Custom element

The custom element is in charge of displaying the alert according to the chosen configuration. The alert sticks to any side of the screen, includes animations and is fast. You can learn more about the custom element and view it's code on github.

By default, the alert will auto close after 8 secs. Once closed it will trigger the onClose function of the custom element. If the alert is clicked it will trigger the onAction function of the custom element.