When using JavaScript with Bootstrap we can create different types of alerts to make a great UI for a project. ‘Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.’ (getbootstrap.com docs)

I created a function showAlert and passed in arguments of message and className.

Red alert with customized message comes up when validating user’s inputs and some of the fields such as name and number are missing. Here is a snippet of the code:

if(name === ‘’ || number === ‘’) {

UI.showAlert(‘Please fill in the information’, ‘danger’);

} else {

//instantiating contact

const contact = new Contact(name, number);

UI.addContactToList(contact);

}

Green — success alert with the message “Contact Added” comes up when all the fields are validated and new contact is instantiated.

Happy Coding!

--

--

Ludmila Korchnoy

Ludmila Korchnoy

Hello World! I’m a Full stack web developer experienced in Ruby and JavaScript frameworks. I graduated Flatiron School in October of 2020.