First off, thank you so much for being willing to do this take home assignment! Please read this entire document before you start solving it.

Assignment description

Your task is to record a coding challenge+solution on Scrimba using React.js. The technical steps for doing this is described below, as is the coding challenge itself. It is important that you create the challenge "the Scrimba way". I have listed three coding challenge examples which you can watch through further down on this page.

Important: the length of the scrim must be less than 5 minutes.

Technical step-by-step instructions

Please read through the steps below.

1. First, head over to my setup scrim.
2. Right click in the lefthand sidebar and select “Remix” to create your own copy of the scrim.
3. Setup your coding challenge (style the app and write out the challenge as a code comment). NOTE: this should be done before you start recording
4. To start recording, right click in the left hand sidebar and select “New Recording”. Make sure you explain the challenge to the student, then tell them to try it, and then finally solve it yourself to show them how it's done.
5. To edit your scrim, right click on the timeline and select “Edit clip”. You can cut, mute, and speedup a selected segment using the short cut keys C, M, S.
6. Finally, send a link to your scrim to [email protected]

The challenge you are to give students

The coding challenge for the students should be to refactor the code so that it uses .map() in order to render out the ingredients on the page, instead of hard-coding them in the JSX.

You can assume that the student has recently learned about JSX and .map() separately, but they haven't yet used them together in order to render out elements in the DOM. So this challenge will be a way for the students to try and put two and two together. Also, they might fail, so it's important that your solution is explained in a good way when you solve it for them.

Don't know React? No problem. Feel free to translate the challenge from React.js to whatever frontend technology you prefer.

The "Scrimba way" of giving coding challenges

Here are a few examples of other top-notch coding challenges that you can take inspiration from. Watch through these before you start tackling your task: