Giters

jesconstantine / front-end-exercise

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Exercise for Front End Developer Candidates

Hi and thanks for your interest in joining the team!

We've created an exercise with the goal of getting a feel for your favorite front end tools, workflow, methodologies and experience. Our intention is that this exercise will not take up more than a few hours of your time.

Asking questions is part of the job - feel free to ask us for any clarification beyond this readme!

Good luck and have fun!

Definition of done

We want to develop a small checklist component, which renders with a visual design based on this invision spec.

Acceptance criteria

  1. On page load, the checklist of items should be displayed.
  2. When the user selects a checkbox, the item should appear crossed out, as shown in the design.
  3. When the user selects a checkbox, holds down the SHIFT key and selects a checkbox further down the list, every item in between should also be selected.
  4. The un/check all button should either check or uncheck all items.
  5. As the viewport changes (i.e. mobile->tablet->desktop sizes), we should see some responsive considerations (we don't have anything specific in mind, so we'll leave this up to you!).

Implementation details

✔️ You can set your local environment up with any dev server/dependency manager/task runner that you want.

✔️ You can use any library/framework/plugin you want.

✔️ You can write html/js/css or in languages which compile into html/js/css.

✔️ Due to the limited time, develop just for the latest version of Google Chrome.

Getting started

  1. Fork this repository on Github (see github docs)

  2. Clone your fork (see github docs)

# in your terminal, where you want the project to live

git clone git@github.com:<your-username>/front-end-exercise.git 

cd front-end-exercise/

  1. Please feel free to use any tools you're comfortable with & you believe are appropriate when setting up your local environment for this project

  2. The design spec is created in invision. You don't need to install it or even create an account.

We've left some comments in the document, see the invision docs for help looking at those comments. (Let us know if we can help here!)

Submission / demo

When you're all set, push your branch up to your forked repository.

When we talk in the future, folks from our team will want to pull your branch down and be able to run the app locally.

Nice-to-haves

This is where you have fun - think one of these features makes sense? Try it!

  • you can develop this component in a way that it (or pieces of it) could be reused elsewhere in our project
  • you can connect with an "external" data source to load the todo items and check
  • you can maintain the state of checked items when we reload the page
  • you can add any considerations for cross/legacy browser support
  • you can add considerations for accessibility - how would a screen-reader interact with this?

About