Giter VIP home page Giter VIP logo

frontend-coding-challenge's Introduction

AlchemyTec Front End Coding Challenge

Overview

This coding challenge should allow you to show off your Angular.js and HTML/CSS abilities. Inside the design folder are four images which represent the various states of the table we would like you to build, with data supplied from a REST endpoint.

Two of the images show the initial default view of the data set, with the totals at the bottom of the table, Direct Contractors at the top, and the list of providers sorted alphabetically between them.

The remaining two images show how the table is represented when sorted by columns other than Payroll Provider.

You will need to edit the src/js/apps/platform/reports/labourcost-controller.js file to manage the data returned from the REST endpoint, and any interactions you add to the HTML partial, which is src/js/apps/platform/partials/labourcost-content.html

For matching the visual aspect of the designs, you can extend the existing list-table class in the src/less/tables.less file or create table CSS of your own if you prefer.

Requirements

  • The completed page should accurately represent the design templates
  • Clicking the column headings should sort the data from highest to lowest values, or alphabetical as appropriate
  • When sorting by Payroll Provider, Direct Contractors should always appear as the first entry
  • When sorting by any other column, Direct Contractors should appear sorted with the provider entries

Extra credits

  • Clicking column headings should toggle sorting in forward and backward directions for that column
  • Show the currently sorted column data in a darker colour
  • Mobilise the table for small devices
  • Animate the re-ordering of the table rows

Building the front end

The front end is built using node and a gulp build script. Install the latest version of node.js, and gulp, install the packages with npm install and build the static files by running gulp in the root directory.

After a succesful build, the index.html file should also appear in the root directory, along with a static folder containing all the assets.

Running the back end

The back end requires Java 8, and can be run from the backend directory with the command ./run.sh

If it launches correctly you should see the following in the console:

INFO [2015-10-29 13:17:10,166] org.eclipse.jetty.server.Server: Started @2126ms

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.