Giter VIP home page Giter VIP logo

form-creation-exercise's Introduction

Create a form for touring bands!

Overview

For this exercise, you'll create a simple form that allows users to purchase tickets to a concert for a given band.

You'll find included in this repo:

1. Three JSON files that represent the data structure that the form should be able to accommodate

NOTE: These are located in `src/band-json/`

2. A Wireframe ("BandTickets_Anonymous.png") that should help guide you as a loose representation of what the form should be structured like
3. A starter React project (optional)

There's a react project included that has been scaffolded using create-react-app but you can use whatever framework or technology you are most comfortable with. However, it's worth noting that we use React at Act Blue, so if you aren't familiar with React, this might be a good opportunity to get some hands on experience!

Acceptance Criteria

The acceptance criteria for this exercise is that after consuming any of the JSON objects from the band-json directory, the form should include:

1. The band name, description, location, date, and image to learn about the concert
2. A list of ticket types that includes their metadata and the ability to add any number of tickets of each type
3. A total amount section that adds up the ticket prices
4. Some basic inputs for adding credit card and personal information
5. A button to purchase the tickets

Some Things To Consider

Don't worry about any actual transaction being fired - it's enough to just fire a console log when the purchase button is clicked.

The tour date cost is listed as cents, so 500 would be $5.

The wireframe is a rough estimate of the layout of the form that we expect, but it's not necessary to match it exactly. The most important parts are the general page structure (two columns, with the description area on the left), and an approximate location of where the various page elements should be.

This exercise is specifically geared towards candidates applying for a Front End focused role at ATS, which is why we aren't asking for any data persistence or API development.

Rough time estimate for this exercise

Doing a technical exercise on top of having all the other stuff you have to do during a week can be a challenge, so first off: thank you for taking the time to give this a shot.

In general, we recommend spending about 2 hours on this exercise, the first chunk of which is likely just reading through this document and choosing an approach. If you can't find that amount of time because of work or life or anything else, get through as much as you are able to (and please feel free to reach out to get additional time!). We'll take a look at your submission no matter how far long you've made it in the process.

If you complete the core acceptance criteria, and want to get creative with the exercise, then you might consider 1 or 2 of the following options:

1. Styling the forms so they look fabulloooussss
2. Persist the transactions in a data store in some way
3. Write some tests using Jest (or any library you prefer)
4. Add types
5. Deploy this somewhere (we use Heroku, so that might be a good option to learn about!)

Questions

If you have questions about this assignment, from the specific to the broad, please don't hesitate to reach out to your recruiter point of contact or to the hiring manager. Good luck!

Submission

To submit your solution, please upload a text file or README to Greenhouse that includes the following:

  1. A link to your code that we can access, such as a Google Drive folder or a Github repo
  2. A description of how to run your code
  3. Anything else we should know

If you're having any trouble at all with Greenhouse, feel free to email us the file instead.

form-creation-exercise's People

Contributors

mbabish avatar

Watchers

 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.