Welcome to the Zuma Labs Frontend Developer Challenge. Please read all of the instructions in this ReadMe before beginning and refer back to it as required.
This task is designed to see how you like to code. There are no right or wrong ways to complete the challenge but we have some acceptance criteria we would like you to hit.
A React component(s) that fulfills the following brief:
Given a value that is changing over time, highlight the value each time it changes, with different highlights if the value increments or decrements.
Acceptance Criteria:
- Your component must display the value
- Your component must have resting state with no highlighting
- Your component must highlight increments in the value
- Your component must highlight decrements in the value
Pretty much, yep. You can take it as far as you want though. We want to see your style and approach.
Some Side Notes
-
Highlight can mean whatever you want it to mean, but bear UI and UX in mind. Want to add flashy bells, whistles or emojis, we will only learn more if you do but you won't fail if you don't.
-
You are welcome to use whatever aditional libraries, components or code you wish to complete the challenge. Want to style in SCSS SASS or LESS, go right ahead, StyledComponents more your thing? Treat yourself.
Glad you asked!
- Fork this repo
- Clone it to your local machine
npm i
oryarn
to install the dependencies- Check out a branch on your local
- Have a dig about, its always good to get familiar (its create-react-app based)
- Head to
src/Javascript/Tickable.jsx
for Javascript orsrc/Typescript/Tickable.tsx
for Typescript - Build your component logic (we've already supplied you the ticking value as a prop)
- Check your work using
yarn start
ornpm run start
- Once you are happy with your creation, commit your changes and push your branch to your remote fork
- create a Pull/Merge request with your changes on our repo (Your name as the title)
- Sit back and drink a beverage of your choice (optional).
If your palms are sweating at the sight of all this Typescript malarkey, fear not intrepid programmatorial pugilist. While the repo you clone will be in predominantly in Typescript you won't need to know Typescript. There is a Javascript
directory containing a file Tickable.jsx
setup ready for your Javascript wizardry. If you want to take a crack at Typescript though, feel free.
Testing code is important, so if you know how add a test or two, show us your skills. Each of the language directories containing the component also have an empty test file. Like the main challenge, you are welcome to use any other testing libraries/frameworks to complete the verification of your tickable's solid and unfaultering foundations.
Has it all gone wrong? Is Rome aflame? Fear not!
If you need to contact us regarding this challenge for questions, queries, or to notify us of something that isn't working as it should be, please respond to the email we sent you containing this challenge.
Did you read this all? If so, let us know by adding a 🐸 in a comment in your code.