I was able to complete, two of the three challenges (1, and 3) although I did have an attempt at adding functionality, hence why there are two versions of the numbers and figures in the browser when the code is run. Below is some more information that can also be found in the readme of the project.
All of the time estimates are including time spent looking at tutorials and documentation.
:- The first part of the challenge I found simple enough, even without using HTML extensively or React.JS at all. This is the bottom version of the numbers and figures, aiming to be a recreation of the example HTML page.
Total time = ~2 hours.
:- The third part was done in short order with help from online resources, although it just has basic functionality and doesn't work from the ideal prompt (successfully completing the game) it has the basics of what I believe you were looking for. The screen appears when any of the buttons on the lower two rows from the first part are selected.
Total time = ~2 hours.
:- The second part of the challenge gave me the most difficulty and ultimately I was unsuccessful, without having a better understanding of the syntax of react.JS I was unable to put in the desired functionality from manipulating tutorials and documentation online.
:-- There was a great deal of trial and error, and I found that it was the syntax of logic and the construction of functions that was the knowledge I was missing.
:-- The way I was going about making the game functional was to have an array of the numbers and the figures, and use their index position (pre-sample) to determine if a match was made. Although a dictionary using keys and values would have been my preferred choice.
:-- During my attempts, I did get more proficient with the tools and ended up changing a lot of the code that was there and rewriting it over and over. This is why there is 2 version of the numbers and figures so that I could at least show the two complete parts of the challenge. The top one has the functionality that I did manage to implement for part two, including new numbers each time and on click selection.
Total time = ~5 hours.
I believe that with a little more time I would be able to get a hang of the syntax issues. Certainly, by the start date of the internship, I'll be much more proficient in this software, being able to use it to create functional, efficient and extremely usable apps.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify