Update (03/21/2017): When the slider is moved, the new y values in the table should be the original y values (the values that were present when the spreadsheet was uploaded) multiplied by the current value of the slider.

Update (03/20/2017): You can assume that the spreadsheet that will be uploaded will always be in the specified format.

Update (03/20/2017): The y values correspond to the Revenue column in the table.


Thank you for your interest in the Web Application Developer position with the Dairy Mangement team. If you would like to review the details of this position, please click here.

We have put together a simple assignment to assess your PHP, HTML, CSS and JavaScript skills. Please complete it to the best of your ability.

Description

You will implement a simple web application that can accept an Excel file, read the data contained in it, display the data, plot it, and finally allow the user to download a spreadsheet containing the edited data. Following are the requirements in more detail.

The first page of the application should have an input box to upload a file, and also a Submit button. The file that needs to be uploaded and processed is an Excel spreadsheet with data in the following format:

Items Sold (Number) Revenue ($)
100 20348
158 29751
85 17000
285 37284
54 10648
122 10000

Once the file has been uploaded (by clicking the Submit button), your application should read the file (see the Resources section for tools available to read spreadsheets) and output the data in a tabular format. This table should allow the user to edit the data contained in it using input boxes.

Next to the table, you should have a graph that plots the data currently in the table (refer to the Resources section for a link to the Google Chart Tools). Note that any change in the table contents should be reflected in the graph as soon as the table, or the cell being edited, looses focus.

Along with the table and the graph, you are required to have a JavaScript slider with a range 0 to 2, a step size of 0.1 and a default value of 1.0. When the slider is moved, the y values (Revenue column) in the table should be multiplied by the current value of the slider, the table should be updated with these new y values, and the graph should be updated to reflect these changes. Edit: To make this more clear, the new y values must be the original y values (the values that were present when the spreadsheet was uploaded) multiplied by the current value of the slider.

Finally, you are required to have a Download Spreadsheet button on this page, that when clicked, allows the user to download a spreadsheet with the data currently in the table (see the Resources section on the tools available to create Excel spreadsheets).

Priorities

It is OK if you are not able to implement all the requirements of the application. However, there are some critical sections that you should be able to implement. To help you prioritize your tasks, we have listed the requirements in decreasing order of their priority.

  1. Reading the Excel spreadsheet, displaying the data and plotting it.
  2. Allowing user to edit the data in the table.
  3. Updating the graph when the data in the table changes.
  4. Integrating the slider functionality into the application.
  5. Creating and downloading the spreadsheet.

Header and Footer

If possible, design your application with a simple header and footer that has your name and email address on it. If you choose not to include a header/footer, please include your name and email address somewhere on the page where it is easily visible.

Validation

Data and file-type validation is not crucial, but you can have it if you wish to.

Pagination

You can either choose to implement the application in a single page, or divide it into multiple pages. If you choose to divide it into multiple pages, please provide navigation links to the preceding pages.

Resources

Following is a list of resources that you may find helpful in implementing the application:

Submission

You can submit your application using any of the following three options:

  1. If you can host your application on a website, please do so and email a link to it to the contact mentioned below.
  2. If you have access to a file-sharing service like Dropbox, please upload your application to it and send an email containing a link to it to the contact mentioned below.
  3. GitHub Repository.

If you are not hosting your own application, please indicate in your email if your application should be tested on a LAMP or a WAMP setup. Your application may not function properly if it has been designed for one and is tested on another. Also, any and all the tools you use to implement the application, like jQuery, PHPExcel and whatever else you may use, should be included in the folder containing your application.

Please use the subject Web Application Developer - Submission for your submission email.

Contact

If you have any questions regarding the above requirements, please contact Pedro Melgarejo at using the subject Web Application Developer - Query. Also, please use this email to submit your completed application.