{"id":19267797,"url":"https://github.com/jhta/non-javascript-nav","last_synced_at":"2026-06-15T08:32:07.214Z","repository":{"id":74812660,"uuid":"76065938","full_name":"jhta/non-javascript-nav","owner":"jhta","description":"Code challenge for Huge INC","archived":false,"fork":false,"pushed_at":"2016-12-14T18:54:30.000Z","size":7251,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T16:45:05.897Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-09T19:57:01.000Z","updated_at":"2017-04-27T18:37:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"96fc6c5f-6401-4a78-8e2e-19ce636011a1","html_url":"https://github.com/jhta/non-javascript-nav","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jhta/non-javascript-nav","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhta%2Fnon-javascript-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhta%2Fnon-javascript-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhta%2Fnon-javascript-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhta%2Fnon-javascript-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhta","download_url":"https://codeload.github.com/jhta/non-javascript-nav/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhta%2Fnon-javascript-nav/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34355157,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-15T02:00:07.085Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T20:14:04.925Z","updated_at":"2026-06-15T08:32:07.190Z","avatar_url":"https://github.com/jhta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Huge Navigation Exercise\n\n## Changes:\nhttps://github.com/jhta/huge-nav/blob/master/docs/general.md\n\n## Overview\n\nThis exercise will have the candidate build a responsive site navigation driven by an AJAX request.\n\nHere are the guidelines for this exercise, please follow closely:\n\n* No javascript frameworks or libraries (e.g. jQuery, Angular, React).\n* CSS Pre-Compilers are fine (LESS, SASS), but no mixin libraries (Compass, Bourbon, Neat, Foundation, etc.)\n* Chrome compliance is all that's required, all functions and features available in Chrome are in play.\n* Nav must be responsive.\n* 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.\n* Page should look good across all viewport sizes.\n* ZIP file and contained folder must be YourName_HugeNavExercise.zip.\n* Please do not include node_modules folder in the ZIP.\n\n```\n$ npm i \u0026\u0026 npm start\n```\n\nNice to haves (things that we look for):\n\n* Adherence to accessibility standards\n* Documentation\n* Unit and/or E2E tests\n\nAt a high level the navigation will have two main states:\n\n* \u003c768px: 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.\n* \\\u003e= 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.\n\n## Version\n0.1.0\n\n## Files\n\n* Mockup - PDF file describing how the nav should behave\n* server.js - node.js server that will host the site and provie the api to construct the nav\n\n## API\n\n* GET /api/nav.json - returns a JSON response representing the items in the nav.\n\n## Get Started\n\n###Requirements\n* Node.js and npm (You get both when you \u003ca href=\"https://docs.npmjs.com/getting-started/installing-node\"\u003einstall Node.js\u003c/a\u003e.)\n\n###Install the exercise locally\n```\ngit clone git@github.com:hugeinc/NavExercise.git\ncd NavExercise\nnpm install\nnpm start\n```\n\n## Design Specifications\n\n### Typography\n\n* **Primary Navigation** 21/48 HUGE Avant Garde Bold\n* **Secondary Navigation** 16/48 Galaxie Copernicus Book\n* **Headline (Desktop)** 120/132 HUGE Avant Garde Bold\n* **Body Copy (Desktop)** 24/36 Galaxie Copernicus Book\n* **Headline (Mobile)** 44/48 HUGE Avant Garde Bold\n* **Body Copy (Mobile)** 14/24 Galaxie Copernicus Book\n* **Copyright (Mobile)** 12/16 Helvetica Neue Regular\n\n### Color\n\n* **Magenta** #ec008c\n* **Light Gray** #eee\n* **Translucent Black** rgba(0, 0, 0, 0.5)\n\n### Measurements\n\nMeasurements are specified in pixels. Dimensions are fluid unless specified.\n\n### Interactions\n\n#### Desktop\n\n* On hover, Primary Navigation reverses color (white/magenta).\n* On click, if item contains a URL, Primary Navigation navigates to a new page.\n* On click, if item contains other items, Secondary Navigation appears (see Desktop, Secondary Navigation).\n* Menu appears containing Secondary Navigation.\n* Translucent mask appears over content, behind menu.\n* On hover in, Secondary Navigation changes color (magenta/light gray).\n* On click, Secondary navigates to a new page.\n* On click outside of menu, menu and mask are hidden.\n\n#### Mobile\n\n* When a user clicks the open navigation icon (“hamburger”), the navigation should “push” from left to right.\n* The HUGE logo and navigation toggle slide left to right.\n* The open navigation icon should change to the close navigation icon (“x”).\n* Translucent mask appears over content, right of navigation.\n* The Primary Navigation should include link items and menu items.\n* When a user hovers a Primary Navigation item, it should change color (magenta/light gray).\n* When a user clicks a Primary Navigation link item, the browser should navigate to a new page.\n* When a user clicks a Primary Navigation menu item, the Secondary Navigation should “push” down, the chevron should rotate * 180°.\n* When a user hovers a Secondary Navigation item, it should change color (magenta/light gray).\n* When a user clicks a Secondary Navigation item, browser should navigate to a new page.\n* When a user clicks outside of the navigation, the navigation should close.\n* When the navigation closes:\n  * the menu should “pull” from right to left\n  * the logo and toggle button should “slide” from right to left\n  * the close icon should change to the open icon\n  * the mask should be hidden\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhta%2Fnon-javascript-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjhta%2Fnon-javascript-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjhta%2Fnon-javascript-nav/lists"}