From the course: React for Web Designers

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Challenge: Better usability and animation

Challenge: Better usability and animation - React.js Tutorial

From the course: React for Web Designers

Start my 1-month free trial Buy for my team

Challenge: Better usability and animation

“

- [Instructor] In this challenge, we're going to enhance our company directory mini app here with a couple of new pieces. First of all, we're going to add a reset button. So right now, as I start to fill in different things, to reset it I have to go back through manually and change each one so it's empty. So we'll add a reset button to take care of that for us. And then, we're going to enhance the animation. We're going to integrate an external library of animations to make this a little more fun to play with. Specifically, we're going to use Animate.css. I'll reload this page so you can see little bit of the animation here. This is a CSS file, nothing more. With a bunch of pre-existing animations defined by various classes whose names appear in this popup menu. And as you can see, there's a whole bunch of 'em. You can experiment with these and watch what happens on the logo. Lot of options. So we're going to integrate Animate.css into our project, and then use it with our CSS…

Contents