1
00:00:00,460 --> 00:00:04,520
What good is a scoreboard app without
a little friendly competition?

2
00:00:04,520 --> 00:00:07,265
Now that we've reached
the end of this course,

3
00:00:07,265 --> 00:00:09,331
I have a special challenge for you.

4
00:00:09,331 --> 00:00:13,189
This challenge is gonna give you
a great opportunity to practice some of

5
00:00:13,189 --> 00:00:16,370
what you've learned so far about React.

6
00:00:16,370 --> 00:00:18,696
Let's go over what you're gonna build.

7
00:00:18,696 --> 00:00:22,807
You're gonna make the scoreboard
app a little more interactive and

8
00:00:22,807 --> 00:00:25,920
competitive by building
a highest score feature.

9
00:00:27,230 --> 00:00:32,680
You'll add a crown icon next to the player
name inside the player component.

10
00:00:32,680 --> 00:00:36,550
When a player on the scoreboard
has the highest score,

11
00:00:36,550 --> 00:00:42,370
the icon changes from a light gray to gold
and displays a short scaling animation.

12
00:00:44,180 --> 00:00:46,835
There are a few things that should happen.

13
00:00:46,835 --> 00:00:51,710
When the app loads and all player scores
are 0, there is no highest score.

14
00:00:51,710 --> 00:00:53,910
So all the icon should be a light gray.

15
00:00:55,410 --> 00:00:59,457
We should see the change only when
a player takes the highest score or

16
00:00:59,457 --> 00:01:02,020
when they're tied for the highest score.

17
00:01:03,380 --> 00:01:08,104
Now if the player with the highest
score is removed from the scoreboard,

18
00:01:08,104 --> 00:01:12,990
then the player or players with the next
highest score gets the gold crown.

19
00:01:14,400 --> 00:01:18,752
You can copy the SVG to display
the crown icon from the teacher's notes

20
00:01:18,752 --> 00:01:19,870
with this video.

21
00:01:21,150 --> 00:01:25,404
In the file index.css,
I've included styling for

22
00:01:25,404 --> 00:01:30,334
the SVG in a class named
is-high-score that changes the SVG

23
00:01:30,334 --> 00:01:34,894
fill color to gold and
triggers the scaling animation.

24
00:01:38,540 --> 00:01:43,316
As you can see here in DevTools,
if a player has the highest score,

25
00:01:43,316 --> 00:01:48,070
the class is-high-score gets
added to the SVG element.

26
00:01:48,070 --> 00:01:51,567
Otherwise, the SVG doesn't
get a high score class.

27
00:01:51,567 --> 00:01:53,021
That should give you a hint.

28
00:01:53,021 --> 00:01:57,854
You have all the information you
need to determine the highest score

29
00:01:57,854 --> 00:01:59,391
in the player state.

30
00:01:59,391 --> 00:02:02,766
You'll need to figure out how to get and

31
00:02:02,766 --> 00:02:07,500
update the highest score
with each score change.

32
00:02:07,500 --> 00:02:12,890
Then pass that information to a player,
and eventually the SVG element.

33
00:02:12,890 --> 00:02:16,465
When working with React,
you'll find that most of the time,

34
00:02:16,465 --> 00:02:18,881
you're just writing plain JavaScript.

35
00:02:18,881 --> 00:02:20,323
So like with JavaScript,

36
00:02:20,323 --> 00:02:24,397
there might be a few different ways to
build the exact same thing in React.

37
00:02:24,397 --> 00:02:28,855
There's likely many ways you can
build the highest score feature.

38
00:02:28,855 --> 00:02:32,850
So I encourage you to experiment
with different approaches.

39
00:02:32,850 --> 00:02:36,380
And don't forget to share your
solution with the Treehouse community.

40
00:02:37,400 --> 00:02:39,520
You can see my solution in the next step.

41
00:02:40,710 --> 00:02:45,310
Hopefully, this course helped you
understand React at a deeper level.

42
00:02:45,310 --> 00:02:49,930
We've only scratched the surface of
the power React can provide when building

43
00:02:49,930 --> 00:02:51,541
applications of any size.

44
00:02:51,541 --> 00:02:55,022
There's a lot more to learn about React.

45
00:02:55,022 --> 00:02:58,526
It has a vibrant helpful community,
and new features and

46
00:02:58,526 --> 00:03:02,750
improvements to React's API
are released frequently.

47
00:03:02,750 --> 00:03:06,569
Check the teacher's notes to see a list
of what you might learn next and

48
00:03:06,569 --> 00:03:10,660
links to more Treehouse courses and
workshops on React.

49
00:03:10,660 --> 00:03:13,924
If you have questions about
anything in this course,

50
00:03:13,924 --> 00:03:18,870
feel free to reach out to the Treehouse
staff or other students in the community.

51
00:03:18,870 --> 00:03:21,190
Thanks, everyone, and happy reacting.