Try โ€‚โ€‰HackMD

Frontend Developer Assessment (plain JS)
Lightbox

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Please sign up to be eligible for up to HK$6,000 completion bonus.
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
This assessment awards an Intermediate level certificate.

The challenge is to implement an image gallery page with functionality similar to lightbox, lightbox2 or fancybox. It should be able to retrieve the data from public API of your choice, for example, one could use flickr. The other requirement is to use plain JavaScript without dependencies (e.g. jQuery).

Deliverables

The deliverables will be a GitHub code repository we can browse through and with clear instructions for running the app.

What we are looking for:

  • A web page with image gallery. It should have at least 5 images fetched from public API of your choice.
  • On image click, it should display an image preview in dialog with next/previous buttons.
  • UI should work without refreshing.
  • Only native JavaScript should be used, libraries such as jQuery are not allowed. You could use CSS pre-processors or post-processors (PostCSS, SCSS, LESS, etc.), but not CSS frameworks (bootstrap, materialize, etc.).
  • It should work without errors in the latest versions of Chrome, Safari, Firefox, Edge, and IE.

Skills to be graded

  1. Web Frontend (HTML structure, JavaScript code quality)
  2. UX Design and Prototyping
  3. Testing, CI/CD, and Site Reliability
  4. Functionality
  5. Communication

Please find our submission and grading guidelines here. Your priorities are:

  1. Hit the deadline you assign yourself with all requirements met.
  2. Produce beautiful and maintainable code. You may wish to spend a few moments thinking of how another developer may wish to extend your work.
  3. Your code must be ready to be deployed to heroku.com without any issues

Submission

  1. You can find our grading guidelines at https://t1.gl/review.
  2. Submit your assessment at https://t1.gl/submit-assessment.

FAQ

Please feel free to send any additional questions our way.

Why re-invent the wheel and write yet another lightbox?
This way it is easier to explain what should be done via examples.
Why native JavaScript?
This challenge tests software engineering capabilities rather than the ability to glue libraries together. In most of the companies, there is already a developed project which requires maintenance and sometimes nontrivial hacks. We would like to make sure you are good with fundamentals.
How long should this take?
Most of the submissions were done within a week.

Copyright ยฉ 2016-2020 Terminal 1 Limited.