Giter Club home page Giter Club logo

frontend-exercise's Introduction

FrontEnd Exercise

The objective is to create an app called 'Red Ant Comics'. This app will comprise of a listing page of comics with the ability to add comics to a favourites list.

You have an hour to complete this. We don't expect you to complete the exercise but we do expect you to have an understandable structure, clean code and mindful of others reviewing the code.

There are no restrictions on which frameworks you use to create this app. Feel free to use any single page app framework(s) you feel most comfortable with.

The HTML and CSS has been provided for you. For the comic and favourites listings the list item templates are within HTML comments.

Red Ant Comics

You will be evaluated on your ability to integrate with a RESTful JSON API including connections/error handling and your ability to structure the app appropriately.

The data will be provided by the Marvel API.

Technical details

Getting started

API

You will need to use the following url to request the comics endpoint from the Marvel API:

https://gateway.marvel.com/v1/public/comics?apikey=3cb62d086d5debdeea139095cbb07fe4&ts=redant&hash=140e85a50884cef76d614f6dacada288

Additional details

Images

The API will provide part of the image url and the extension. To get the full valid URL you will need to select an image size and append into the URL (sizes are show within the Image formats link above). For example the following link is using 'portrait_uncanny' image size.

http://i.annihil.us/u/prod/marvel/i/mg/3/40/4bb4680432f73/portrait_uncanny.jpg

Favourites

To open the favourites panel (#favourites-panel) you need to add a class of open. Toggling this class will show/hide the panel.

  • Each comic within the list should have a button to add to the list
  • If the comic is already in the list the add button should be changed so you can remove it
  • There should be a list that displays all the favourites
  • The comics within the favourites list should have a button to remove

Have fun!

frontend-exercise's People

Contributors

alicespyglass avatar fitz0019 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.