100 JS Functions

Beginner

1. CurrentYear

2. SimpleCounter

3. DoubleNumber

4. CreateColor

5. DynamicGrid

6. DynamicPictureSize

7. RandomButton

8. TabbedNavigation

9. MathOperator

10. GuessTheNumber

11. BetweenDates

12. Reactions

13. FeedTheBunny

14. Countdown

15. ClickFast

16. SkillsForJobs

17. UsersTabel

18. TodoList

19. UserSearch

20. SpendingInfo

13.FeedTheBunny

Write a React component named FeedTheBunny that receives an object of type Bunny as param:

type Bunny = {
  name: string;
  foodNeededPerDay: number;
};

The component will render a progress bar with the name of the bunny as label and a button with the text Feed me. When clicking the button, we'll give 5 units of food to bunny.

The progress bar should reflect how much food he has, compared with the total amount he needs. If we reached the total amount needed by the bunny, the button will dissapear and the following text should appear:

{Name} is fully fed.

Example 1

Input

Bunny

=

Demo

Open demo in new window

You'll see test results here!