Skip to content

Latest commit

 

History

History
69 lines (54 loc) · 2.5 KB

README.md

File metadata and controls

69 lines (54 loc) · 2.5 KB
Raw

To view the app, visit conor909.github.io/bluecode

The challenge

The task is to create a barcode editor for an imaginary format with following features

  • Available as a standalone single page application with no server calls
  • Should run on latest Chrome with no plugins installed
  • Allows input of digits up to maximum of 19
  • Calculates a checksum digit for given digits
  • Displays the barcode with given digits and the checksum digit
  • Scales fluidly to different sizes
  • Allows changing of primary and secondary colour
  • Adding and removing digits or changing colours should change the barcode displayed in real time
  • Contains appropriate automated tests

Note: The checksum algorithm should be implemented from scratch without use of a 3rd party library that might already provide this functionality.

Checksum calculation

  1. Add up the digits in odd positions and multiply by 3
  2. Add up the digits in even positions
  3. Add up the results of 1 and 2
  4. Divide by 10 and take the remainder.
  5. If the remainder is 0 final result is 0 otherwise subtract it from 10 for final result

Example

5 4 8 9 8 5 0 3 5 4

  1. 5 + 8 + 8 + 0 + 5 = 26 * 3 = 78
  2. 4 + 9 + 5 + 3 + 4 = 25
  3. 78 + 25 = 103
  4. 103 / 10 = 10.3 = 3
  5. 10 - 3 = 7

Barcode layout

The barcode should represent each digit as a single bar. The bars grow in height and width as the numbers increase. Guidelines for the bars as follows

  1. Thinnest and shortest
  2. Same thickness as 0 but clearly taller
  3. Same thickness as 0 but taller than 1
  4. Same thickness as 0 and tallest in the set
  5. Thicker than 0 but same height
  6. Same thickness as 4 but taller than 4
  7. Same thickness as 4 but taller than 5
  8. Same thickness as 4 and tallest in the set
  9. Thickest in the set and shortest
  10. Same thickness as 8 but tallen than 8

The differences in width and height should be significant and clear

Barcode style

You are free to design the interface for editing & the style of the barcode but it should have these characteristics

  • All the bars should use the primary colour prominently except for the checksum digit
  • The checksum digit at the end should mainly use the secondary colour and be distinguishable
  • It is not necessary to show the digits on the bars but you are free to do so

--

Dev notes:

Main code is in src/Pages/Home & src/Components

The checksum code is in src/utils/checksum.js & src/utils/checksum.test.js

To run the app npm start or yarn start

To run the tests npm test or yarn test