Objective

Using JavaScript and any framework, your assignment is to implement a responsive sign-up form and get it looking as close to the design as possible.

Brief

The design team at Keap has provided you with designs for a new sign-up form! Using this Github repository as your template, your task is to build out the project to the designs provided inside the /design folder. You will find both a mobile and a desktop version of the design to work with. In addition to the contents of the /design folder you will also have a Figma link in the email you received containing the projects instructions. Feel free to reference it as much as you need. You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

For colors and fonts please refer to the Style Guide

Tasks

• Implement assignment using:
  • Language: JavaScript
  • Framework: any framework or libraries (the basic sample code in index.html just shows how to connect to the API)
• Your users should be able to:
  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Receive an error message when the form is submitted if:
    • Any input field is empty. The message for this error should say "[Field Name] cannot be empty"
    • The email address is not formatted correctly (i.e. a correct email address should have this structure: [email protected]). The message for this error should say "Looks like this is not an email"
    • The API catches something not caught by the js and returns an unsuccessful response (i.e. [email protected] is used)
  • Show the success thank-you message as shown in the design.
• You will find all the required assets in the /images folder. The assets are already optimized.
• There is also a style-guide.md file, containing the information you'll need, such as color palette and fonts.

Evaluation Criteria

• JavaScript best practices
• Show us your work through your commit history
• We're looking for you to produce working code, with enough room to demonstrate how to structure components in a small program
• Completeness: did you complete the features?
• Correctness: does the functionality act in sensible, thought-out ways?
• Maintainability: is it written in a clean, maintainable way?
• Testing: is the system adequately tested?

Deliverables

Make sure to include all source code in the submitted repository.

Submitting your project

Please organize, design, test and document your code as if it were going into production - then push your changes to your git's master branch. After you have pushed your code, please provide a link to this project in your response to the hiring manager. Ensure that the repo containing this project is public so we may review it.

All the best and happy coding,

The Keap Team