Skip to content

Commit

Permalink
hi
Browse files Browse the repository at this point in the history
  • Loading branch information
bgoonz committed Dec 17, 2021
1 parent bb45f86 commit 5a254b1
Show file tree
Hide file tree
Showing 11 changed files with 849 additions and 76 deletions.
450 changes: 450 additions & 0 deletions Notes/temp.js

Large diffs are not rendered by default.

57 changes: 21 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,73 @@

Thank you for your interest in a career at KAYAK. We would like to proceed to the next step of our evaluation process. Below we've outlined an exercise that we would like you to complete.

**The Exercise**
----------------
## **The Exercise**

Your goal is to create a simple web application that displays information about various airlines. This exercise also serves as a sample of the type of tasks you can expect while working at KAYAK.

**Requirements**
----------------
## **Requirements**

Please use the online platform CodeSandbox to share your work:

[codesandbox.io](https://codesandbox.io/ "https://codesandbox.io/")

### General Requirements

- The application must **at least** match the provided mock ups. You may feel free to experiment beyond that, but make sure that **all** specifications provided are followed.
- The application must behave as a single page application (do not reload the document for any of the behavior).
- The application must **at least** match the provided mock ups. You may feel free to experiment beyond that, but make sure that **all** specifications provided are followed.
- The application must behave as a single page application (do not reload the document for any of the behavior).

### Functionality Requirements

- The page must behave responsively to accommodate smaller window widths so that the tiles in each row always fit in the window without being cut off. A mock up is provided showing an example of the grid within a smaller window.
- Each Airline tile should display the airline name and logo. On hover, more information about the airline should be displayed (Alliance name, phone number, & website). The Alaska Airlines & Ukraine International Airlines tiles in the mocks illustrate the expected display on hover.
- The Alliance filter above the tiles should filter the list of Airlines to only show Airlines matching the enabled filters if any are selected. If none are selected, the entire list should be shown.
- The page must behave responsively to accommodate smaller window widths so that the tiles in each row always fit in the window without being cut off. A mock up is provided showing an example of the grid within a smaller window.
- Each Airline tile should display the airline name and logo. On hover, more information about the airline should be displayed (Alliance name, phone number, & website). The Alaska Airlines & Ukraine International Airlines tiles in the mocks illustrate the expected display on hover.
- The Alliance filter above the tiles should filter the list of Airlines to only show Airlines matching the enabled filters if any are selected. If none are selected, the entire list should be shown.

**Resources**
-------------
## **Resources**

- You may use any online resource or documentation to complete this assignment, as long as you write the code yourself.
- You may use any open source libraries to complete this task (e.g. [Angular](http://angular.io/ "http://angular.io/")[React](https://reactjs.org/ "https://reactjs.org/")[jQuery](https://jquery.com/ "https://jquery.com/"), etc), but React is preferred as it is the library we use internally.
- You're free to use CSS preprocessors (e.g. [LESS](http://lesscss.org/ "http://lesscss.org/")[SASS](http://sass-lang.com/guide "http://sass-lang.com/guide"), etc)
- Airline information is available via a jsonp API:
- You may use any online resource or documentation to complete this assignment, as long as you write the code yourself.
- You may use any open source libraries to complete this task (e.g. [Angular](http://angular.io/ "http://angular.io/")[React](https://reactjs.org/ "https://reactjs.org/")[jQuery](https://jquery.com/ "https://jquery.com/"), etc), but React is preferred as it is the library we use internally.
- You're free to use CSS preprocessors (e.g. [LESS](http://lesscss.org/ "http://lesscss.org/")[SASS](http://sass-lang.com/guide "http://sass-lang.com/guide"), etc)
- Airline information is available via a jsonp API:

URL: 'kayak.com/h/mobileapis/directory/airlines/homework'

callback parameter name: 'jsonp'

- The alliance field in the JSON objects returned from the API should be used for the Alliance filter shown in the mock ups. The alliance codes map to the following values:
- The alliance field in the JSON objects returned from the API should be used for the Alliance filter shown in the mock ups. The alliance codes map to the following values:

ST = "Sky Team"

OW = "Oneworld"

SA = "Star Alliance"

**Mockups**
-----------
## **Mockups**

![logo](./Notes/Logo.svg)

---


![responsivness](./Notes/Responsiveness_Example.png)

---



![fonts](./Notes/color-spec.png)



---


![picture](Notes/Design_Mock.png)



---

## ![demension-spacing](Notes/Dimensions___Spacing_Spec.png)

![demension-spacing](Notes/Dimensions___Spacing_Spec.png)
---

- Full size mockups with spacing & styling specs can be found on Google Drive here: [Frontend Coding Exercise](https://drive.google.com/drive/folders/17tORIIUNiY_qi7QwflQJcoe9w-tc2dQU?usp=sharing "https://drive.google.com/drive/folders/17tORIIUNiY_qi7QwflQJcoe9w-tc2dQU?usp=sharing")
- An SVG is provided for the logo.
- In the folder are 1 full size mock of the app at a normal desktop screen width and 1 example mock of the app at a smaller screen width to demonstrate responsiveness.
- There are 2 spec images with annotations on top of the original mocks to provide information on spacing, color, font-size, etc.
- For all tiles, both by default and on hover, assume the logo & text are always vertically and horizontally centered within the tile. Also the dimensions of each tile should not change.
- Full size mockups with spacing & styling specs can be found on Google Drive here: [Frontend Coding Exercise](https://drive.google.com/drive/folders/17tORIIUNiY_qi7QwflQJcoe9w-tc2dQU?usp=sharing "https://drive.google.com/drive/folders/17tORIIUNiY_qi7QwflQJcoe9w-tc2dQU?usp=sharing")
- An SVG is provided for the logo.
- In the folder are 1 full size mock of the app at a normal desktop screen width and 1 example mock of the app at a smaller screen width to demonstrate responsiveness.
- There are 2 spec images with annotations on top of the original mocks to provide information on spacing, color, font-size, etc.
- For all tiles, both by default and on hover, assume the logo & text are always vertically and horizontally centered within the tile. Also the dimensions of each tile should not change.

**Final Notes**
---------------
## **Final Notes**

We do not imagine this should take you more than a few hours to build. Hopefully this will be a fun challenge for you.

Expand Down
Loading

0 comments on commit 5a254b1

Please sign in to comment.