/recruitment-task-junior-frontend-developer-2

Another Frontend/Javascript project for Junior F/E Dev Applicants at Digers! Have fun!

Front-End Developer Task - NASA Mars Photos Gallery

A simple, Javascript based task checking your frontend development skills.

Requirements/perequisites:

  • Do not use any front-end framework (VueJS, React etc.)
  • Do not use Bootstrap
  • No jQuery please
  • Layout should be responsive, working both on desktop/ipad/phones.

Preparation

Sign-up for free NASA API key https://api.nasa.gov/index.html#apply-for-an-api-key to use the MARS PHOTOS API - https://api.nasa.gov/api.html#MarsPhotos for this project. Sign-up for free BOX API

Task description

  1. Design, create and style a responsive search form that allows user to search for Mars rovers captured photos provided by the API.

Form fields:

  • date taken (range: from-to)
  • rover (multiple choice)
  • camera (multiple choice; only the 3 cameras that are present on all rovers)

  1. Once the search form is submitted, retreive results from API and display a paginated/lazy loading grid with result images (thumbnails with date taken, rover name).

  2. Thumbnail images can be clicked/tapped - displaying full screen/modal window with larger image.

  3. Images can be added to basket/cart, displayed below the search results.

  4. Images added to basket/cart can be moved (order in the cart can be changed). Can be removed (remove one, remove all from basket)

  5. Once 10 photos are added, display/enable 'Start Grid' button

  6. Once clicked, display a grid of images (tiles) one by one. Use all 10 images selected in step 5. Images can and should repeat. Once full viewport is filled with tiles, rotate them randomly (one image at a time). Sample effect can be observed at Youtube video linked below:

Alt text

Once completed, submit to your github account and provide us with link.

Have fun!