Skip to content

Latest commit

 

History

History
95 lines (62 loc) · 3.88 KB

README.md

File metadata and controls

95 lines (62 loc) · 3.88 KB
Raw

General Assembly Logo

UI Element Project

This project is going to challenge you to combine your programming skills in JavaScript with your skills building out user interfaces with HTML and CSS.

Instructions

  1. Create a new repository on GitHub (not GitHub Enterprise).
  2. Clone down the repository and complete your work in there.
  3. Fulfill the listed requirements below.

Please turn in your submission by the deadline on your cohort calendar.

UI Pattern

You will need to pick a UI pattern from the list below and an API. You'll then build out the UI pattern you chose to work with the API you chose.

List of UI Patterns

You may choose from the following list of UI patterns:

Modal

When a user clicks on a link, a box should appear in the center of the screen with the details for the item that the user clicks on. The box should have some way for the user to close the box and see the full list of items.

modal

Hamburger Menu

There should be a hamburger icon in the top right corner. When a user clicks on it, a menu should appear from off of the right side of the screen with a list of menu items. When the user clicks on the menu item, the contents in the center of the page should change to show the details for that item. The user should be able to see which item is currently selected. The user should be able to close the menu by clicking the hamburger menu again.

hamburger menu

Accordion

The user should see a list of items. When they click on one, the space below the item expands to reveal the content related to that item. When the user clicks on the item again, the revealed content becomes hidden.

accordion

Tabs

The user sees a row of tabs above a content area. When the user clicks on one of the tabs, the content in the content area changes based on which tab the user clicked.

tabs

Slider

The user should see the content on the screen with 'Next' and 'Previous' buttons. When they click on the 'Next' button, the slider should shift to show the next item in the list. When the user clicks on the 'Previous' button, the slider should shift to show the previous items in the list. If there is no next or previous items, the slider could loop to the other end of the list or prevent the user from clicking those buttons.

slider

List of APIs

You can find a list of public APIs available here. We recommend chosing an API that does not require authentication!

Requirements

Combine one UI pattern with one API. The page should dynamically fill with data fetched from the API on page load.

Technical Requirements

Your project should meet the following requirements:

  • Runs without errors
  • Shows the UI pattern you selected populated with data from the API you selected
  • Functions according to the descriptions above. The user should be able to interact with your UI.
  • Includes a README written in well formatted Markdown (hint: look up a README template)
  • Shows a good commit history with frequent commits. We're looking for lots of small commits!

License

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.