Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Components!
You have completed React Components!
Preview
This challenge will give you a great opportunity to practice what you've learned so far about React.
SVG crown icon
<svg viewBox="0 0 44 35">
<path d="M26.7616 10.6207L21.8192 0L16.9973 10.5603C15.3699 14.1207 10.9096 15.2672 7.77534 12.9741L0 7.24138L6.56986 28.8448H37.0685L43.5781 7.72414L35.7425 13.0948C32.6685 15.2672 28.3288 14.0603 26.7616 10.6207Z" transform="translate(0 0.301727)"/>
<rect width="30.4986" height="3.07759" transform="translate(6.56987 31.5603)"/>
</svg>
Challenge instructions
- When the app loads and all player scores are 0 all icons should be light grey.
- The change should happen only when a player takes the highest score, or when they are tied for the highest score.
- If the player with the highest score is removed from the scoreboard, then the player (or players) with the next highest score gets the gold crown.
- All the information you need to determine the highest score is in the
playersstate. - You'll need to figure out how to get and update the highest score with each score change, then pass that information to a player, and eventually the SVG.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
What good is a scoreboard app without
a little friendly competition?
0:00
Now that we've reached
the end of this course,
0:04
I have a special challenge for you.
0:07
This challenge is gonna give you
a great opportunity to practice some of
0:09
what you've learned so far about React.
0:13
Let's go over what you're gonna build.
0:16
You're gonna make the scoreboard
app a little more interactive and
0:18
competitive by building
a highest score feature.
0:22
You'll add a crown icon next to the player
name inside the player component.
0:27
When a player on the scoreboard
has the highest score,
0:32
the icon changes from a light gray to gold
and displays a short scaling animation.
0:36
There are a few things that should happen.
0:44
When the app loads and all player scores
are 0, there is no highest score.
0:46
So all the icon should be a light gray.
0:51
We should see the change only when
a player takes the highest score or
0:55
when they're tied for the highest score.
0:59
Now if the player with the highest
score is removed from the scoreboard,
1:03
then the player or players with the next
highest score gets the gold crown.
1:08
You can copy the SVG to display
the crown icon from the teacher's notes
1:14
with this video.
1:18
In the file index.css,
I've included styling for
1:21
the SVG in a class named
is-high-score that changes the SVG
1:25
fill color to gold and
triggers the scaling animation.
1:30
As you can see here in DevTools,
if a player has the highest score,
1:38
the class is-high-score gets
added to the SVG element.
1:43
Otherwise, the SVG doesn't
get a high score class.
1:48
That should give you a hint.
1:51
You have all the information you
need to determine the highest score
1:53
in the player state.
1:57
You'll need to figure out how to get and
1:59
update the highest score
with each score change.
2:02
Then pass that information to a player,
and eventually the SVG element.
2:07
When working with React,
you'll find that most of the time,
2:12
you're just writing plain JavaScript.
2:16
So like with JavaScript,
2:18
there might be a few different ways to
build the exact same thing in React.
2:20
There's likely many ways you can
build the highest score feature.
2:24
So I encourage you to experiment
with different approaches.
2:28
And don't forget to share your
solution with the Treehouse community.
2:32
You can see my solution in the next step.
2:37
Hopefully, this course helped you
understand React at a deeper level.
2:40
We've only scratched the surface of
the power React can provide when building
2:45
applications of any size.
2:49
There's a lot more to learn about React.
2:51
It has a vibrant helpful community,
and new features and
2:55
improvements to React's API
are released frequently.
2:58
Check the teacher's notes to see a list
of what you might learn next and
3:02
links to more Treehouse courses and
workshops on React.
3:06
If you have questions about
anything in this course,
3:10
feel free to reach out to the Treehouse
staff or other students in the community.
3:13
Thanks, everyone, and happy reacting.
3:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up