https://github.com/jhta/non-javascript-nav
Code challenge for Huge INC
https://github.com/jhta/non-javascript-nav
Last synced: 19 days ago
JSON representation
Code challenge for Huge INC
- Host: GitHub
- URL: https://github.com/jhta/non-javascript-nav
- Owner: jhta
- Created: 2016-12-09T19:57:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-12-14T18:54:30.000Z (over 9 years ago)
- Last Synced: 2025-03-12T16:45:05.897Z (over 1 year ago)
- Language: JavaScript
- Size: 6.92 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Huge Navigation Exercise
## Changes:
https://github.com/jhta/huge-nav/blob/master/docs/general.md
## Overview
This exercise will have the candidate build a responsive site navigation driven by an AJAX request.
Here are the guidelines for this exercise, please follow closely:
* No javascript frameworks or libraries (e.g. jQuery, Angular, React).
* CSS Pre-Compilers are fine (LESS, SASS), but no mixin libraries (Compass, Bourbon, Neat, Foundation, etc.)
* Chrome compliance is all that's required, all functions and features available in Chrome are in play.
* Nav must be responsive.
* Code must run after the following command, please ensure your code runs as you expect it to from a fresh checkout with these commands before submission.
* Page should look good across all viewport sizes.
* ZIP file and contained folder must be YourName_HugeNavExercise.zip.
* Please do not include node_modules folder in the ZIP.
```
$ npm i && npm start
```
Nice to haves (things that we look for):
* Adherence to accessibility standards
* Documentation
* Unit and/or E2E tests
At a high level the navigation will have two main states:
* <768px: Mobile. Hamburger icon will display in the top-left of the page. Clicking the hamburger will cause a card to push in and move the main content to the right. The card will contain nav and sub-nav items defined in the JSONP response.
* \>= 768px: Desktop. The nav will display as a horizontal nav. Top level nav items will display sub-nav items when clicked. No hamburger will be shown.
## Version
0.1.0
## Files
* Mockup - PDF file describing how the nav should behave
* server.js - node.js server that will host the site and provie the api to construct the nav
## API
* GET /api/nav.json - returns a JSON response representing the items in the nav.
## Get Started
###Requirements
* Node.js and npm (You get both when you install Node.js.)
###Install the exercise locally
```
git clone git@github.com:hugeinc/NavExercise.git
cd NavExercise
npm install
npm start
```
## Design Specifications
### Typography
* **Primary Navigation** 21/48 HUGE Avant Garde Bold
* **Secondary Navigation** 16/48 Galaxie Copernicus Book
* **Headline (Desktop)** 120/132 HUGE Avant Garde Bold
* **Body Copy (Desktop)** 24/36 Galaxie Copernicus Book
* **Headline (Mobile)** 44/48 HUGE Avant Garde Bold
* **Body Copy (Mobile)** 14/24 Galaxie Copernicus Book
* **Copyright (Mobile)** 12/16 Helvetica Neue Regular
### Color
* **Magenta** #ec008c
* **Light Gray** #eee
* **Translucent Black** rgba(0, 0, 0, 0.5)
### Measurements
Measurements are specified in pixels. Dimensions are fluid unless specified.
### Interactions
#### Desktop
* On hover, Primary Navigation reverses color (white/magenta).
* On click, if item contains a URL, Primary Navigation navigates to a new page.
* On click, if item contains other items, Secondary Navigation appears (see Desktop, Secondary Navigation).
* Menu appears containing Secondary Navigation.
* Translucent mask appears over content, behind menu.
* On hover in, Secondary Navigation changes color (magenta/light gray).
* On click, Secondary navigates to a new page.
* On click outside of menu, menu and mask are hidden.
#### Mobile
* When a user clicks the open navigation icon (“hamburger”), the navigation should “push” from left to right.
* The HUGE logo and navigation toggle slide left to right.
* The open navigation icon should change to the close navigation icon (“x”).
* Translucent mask appears over content, right of navigation.
* The Primary Navigation should include link items and menu items.
* When a user hovers a Primary Navigation item, it should change color (magenta/light gray).
* When a user clicks a Primary Navigation link item, the browser should navigate to a new page.
* When a user clicks a Primary Navigation menu item, the Secondary Navigation should “push” down, the chevron should rotate * 180°.
* When a user hovers a Secondary Navigation item, it should change color (magenta/light gray).
* When a user clicks a Secondary Navigation item, browser should navigate to a new page.
* When a user clicks outside of the navigation, the navigation should close.
* When the navigation closes:
* the menu should “pull” from right to left
* the logo and toggle button should “slide” from right to left
* the close icon should change to the open icon
* the mask should be hidden