"AJAX Basics (retiring)" was retired on February 5, 2020. You are now viewing the recommended replacement.
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