Frontend Developer Assessment (plain JS) Lightbox

--- GA: UA-83160642-4 tags: t1.gl/Public, t1.gl/Assessments --- # Frontend Developer Assessment (plain JS) Lightbox {%hackmd hp8GBradSpO0m-MA4UKFRg %} :::success :moneybag::moneybag::moneybag: Please **[sign up](https://t1.gl/loyalty)** to be eligible for up to **HK$6,000** completion bonus. :moneybag::moneybag::moneybag: :mortar_board: This assessment awards an **Intermediate** level certificate. ::: The challenge is to implement an image gallery page with functionality similar to [lightbox](https://ashleydw.github.io/lightbox/), [lightbox2](http://lokeshdhakar.com/projects/lightbox2/) or [fancybox](http://fancybox.net/). It should be able to retrieve the data from public API of your choice, for example, one could use [flickr](https://www.flickr.com/services/api/). 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](https://t1.gl/review). 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 (c) 2016-2020 Terminal 1 Limited.