Clone or fork this repo. If you'd rather start from scratch with your own setup that's fine too, as long as you complete the exercise.
This repo contains a very simple webpack based development environment. We'll need to install some stuff to get going...
Webpack needs nodejs to do its thing. We aren't making a node app - just using it as a dev tool.
Installing node.js will also install npm for us too. We'll need it for dependencies and some scripts.
We have specified all the dependencies we need in the package.json file. Npm will install them for us:
$ npm install
Ok, time to run the app. Npm takes care of business again:
$ npm start
This will fire up the wepback dev server. It's not important to understand how it works for now.
Open https://localhost:8080/ in your browser and you should see a basic html page. If you open the development console in your browser you should see a welcome message.
The source files are located in src/. If you change a file, webpack will reload your files and refresh the browser for you.
You can run the example tests:
$ npm test
Goal: Production of a client-side Web application to help a child understand multiplication.
Duration: This test is intended to take ~2 hours but may take more
Description: The application will display a grid of all the numbers from 1 to 144 evenly laid out with a large clickable box around each number. The number should be centered in each box. When the child clicks a box then all the numbers which are a multiple of that number should be highlighted in some way. Clicking on a second number removes the highlighting of the previous selection, then highlights the multiples of the newly selected number.
Constraints: On mobile devices the grid will display 1 number per row. On tablet devices 2 numbers per row and on desktop and larger devices 3 numbers per row. The numbers should fill their rows equally. When the screen width grows very large a margin should appear either side of the grid so that the boxes don’t keep getting larger.
You do not need to use any libraries but if you do, you should be able to explain the reasons for your choices.
If there is any information that you feel is missing from the story then please make sensible decisions (for example it’s up to you how you define ‘mobile’, as long as it’s sensible, similarly please define highlighting).
Criteria for assessment: Important things that will be assessed are:
- Project layout.
- Coding style, i.e. your approach not whether you use semicolons or not ;)
- Your approach to unit testing/TDD
- Maintainability and extensibility
- Use of responsive design
- Performance & Accessibility
- Naming conventions used
- Meeting the requirements
The test won’t be assessed on design at all, so don’t worry how it looks.
Node: v14.5.3
npm i
npm run build
npm start
I decided to use React as it provides a way to easily manage state within the application. In addition, as we're rendering a number of elements which change state, using React means the DOM is updated in the most efficient way through reconcilliation. React also requires minimal setup, and is simple to test.
I've used the approach pioneered by React Testing Library, so have tested the application from the top level e.g. the Grid component. This tests all underlying functionality, as it renders the component hierarchy. I haven't unit tested the functions or children components, as they are tested implicity through the Grid component tests. If these methods or components were to be used outside of this context (e.g. in multiple places), it may be beneficial to unit test them.
I've also used data attributes to target elements, as class names are likely to change more frequently and could cause tests to become brittle.
The method to create the grid items e.g. getGrid is called on every render. If this were to become a perfomance bottleneck it could be wrapped in the useMemo hook, so it's only called on the first render.