SDJS-01 Interview Excercise by Alejandro Trejo Resendiz
Contact: [email protected]
- Move to frontend folder with
cd frontend/
- Run
yarn install
- Run
yarn start
Project will run on http://localhost:3000
SDJS-01 Interview Excercise
SDJS-01 Interview Excercise by Alejandro Trejo Resendiz
Contact: [email protected]
cd frontend/
yarn install
yarn start
Project will run on http://localhost:3000
Clicking a list item should display the correspondent images in a column next to the list.
Currently, it shows the images below all text, and the list items container expands
The layout will be 2 columns, the first column will be 1/4 of the screen and the
second column will be 3/4 of the screen.
The first column should display:
a. A list of the following Rover (Curiosity) cameras:
i. Front Hazard Avoidance Camera
ii. Rear Hazard Avoidance Camera
iii. Mast Camera
iv. Chemistry and Camera Complex
v. Mars Hand Lens Imager
vi. Mars Descent Imager
vii. Navigation Camera
b. Each element of the list should be clickable
c. If you click on one element of the list, you should display the images of that
camera in the second column
d. The selected camera should be in bold inside the list
The second column should display:
a. A 4x5 grid of the images of the selected camera (20 images)
The data is meant to be fetched and shown in two columns.
a. A list of the following Rover (Curiosity) cameras:
i. Front Hazard Avoidance Camera
ii. Rear Hazard Avoidance Camera
iii. Mast Camera
iv. Chemistry and Camera Complex
v. Mars Hand Lens Imager
vi. Mars Descent Imager
vii. Navigation Camera
b. Each element of the list should be clickable
c. If you click on one element of the list, you should display the images of that
camera in the second column
d. The selected camera should be in bold inside the list
5. The second column should display:
a. A 4x5 grid of the images of the selected camera (20 images).
i. Some cameras should have less than 20 images and display all
images.
ii. Each image should be displayed in a square shape.
iii. Each image should be a clickable element
Change favicon, app title and add Nasa logo
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.