Original source: toptal.com code challenge, June 2022. Simple demonstration of a state variable, using the old-fashioned class approach to components.
A pretty standard, bare bones ToDo List. Clicking on each ToDo toggles it as done vs in progress, and text at the bottom tallies incomplete vs complete tasks. Original source: code challenge from toptal.com, June 2022.
The idea for this came from a tutorial: How To Build an Autocomplete Component in React, but I did not peek at their solution. Their sandbox demo is here. That solution may also be found in the present project with name AutocompleteOnline.
An array of matches should be provided as a property, for example:
"Alligator",
"Bask",
"Crocodilian",
"Death Roll",
"Eggs",
"Jaws",
"Reptile",
"Solitary",
"Tail",
"Wetlands"
Substring matches should work.
The UI should have a title, brief instructions, and an <input> field. An initial message appears when there are no matches, or empty input.
Matches should be incremental, results change as you type.
Matches appear as a kind of <select> attached to the bottom of the <input>.
Css styling should apply to the <select> options:
- The first one is highlighted by default; this is the current selection
- As the mouse hovers over any others below the first, they also highlight in addition to the current selection
- The up and down arrow keys will move the current selection up and down.
When clicking on an option, or pressing Return on a highlighted option:
- The <input> is replaced with the full text of the current selection
- The options list vanishes
This challenge comes from React Coding Interview Challenge 21.
I tweaked the requirements to include clicking on player inside their team boxes, which make them return to the player pool.
This challenge comes from React Coding Interview Challenge 20.
My version accomplishes it with DOM manipulation. It works, but admittedly direct DOM manipulation is not in the spirit of React.
My version does not require a submit button or RETURN press, it automatically starts printing on any newly typed input.
The solution published in the original article (see link above). It uses state instead of DOM manipulation (which is good React style) but it is doing more work because it re-renders the whole output, plus the latest new word, every 500 msec. Their version uses a submit button, which is a better user experience.
Paginated tabular data, home-made with no UI library.
This challenge comes from React Coding Interview Challenge 18.
Paginated tabular data rendered by Material React Table which is based on Material UI (a.k.a. MUI).
This challenge comes from React Coding Interview Challenge 12.
My approach uses a component for each star. The clicked and hover states are stored at the parent level and the state variables and setter are passed down as props. Although the component approach is good React style, the state management is overly busy.
The solution published in the original article (see link above). More concise than my solution, but at the cost of having no child component. Also it avoids the use of loops that were in my solution. But the hover requirement does not appear to have been met correctly (hovers are overriding previously clicked stars).
This challenge comes from React Coding Interview Challenge 8.
This challenge came from an interview with GoDaddy with interviewer Alex Chen, 2022-08-04. We used this sandbox: https://codesandbox.io/s/form-challenge-forked-3kfhq0?file=/src/styles.css:0-103
Variation on the Form Validation
exercise, taking advantage of built-in
HTML5 validation features, using custom validation messages. HTML5 validation
is probably not a good solution for form validation. Some hackery
was needed to make it work, and it is still less than ideal.
Variation on the Form Validation
exercise, using the react-hook-form
library.
This challenge was presented to me during an interview with Dun & Bradstreet on 2020-11-18
Code challenge was 2020-12-01, in a Zoom call with Todd Lunter of Upserve.
The original instructions are in the pdf UpserveInstructions.pdf
.
A code sandbox version is here: https://codepen.io/fishtaco1/pen/xxEwbye
Code challenge from Summer 2022.