Front-end Engineering Take Home Project

Background

A few weeks into an interview process. I already passed the algorithmic test, my portfolio submission, and a technical interview. Now, I was on the last step — a take home project to demonstrate how I write code (vanilla JS), solve problems, write CSS, and generally develop UI.

Expected time: 8hrs

Final Project Github Repo

Project Requirements

1. Create 2 screens
— Question Tile page
— Form Page (2 states)

2. Follow flow in wireframes (different form should display depending on which tile is chosen)

3. Submit form data by logging it to the console.

Process

• Create the two static HTML pages
• Add CSS to style the static pages, according to the wireframes
• Add Javascript to handle state on the form page, handle form data, and make the site fully responsive to screen sizes.

Highlights

HTML

Used semantic elements as much as possible for legibility, accessibility, bots, and SEO.

• Made form inputs as precise as possible:
  — Indicating ‘required’ fields to the user and attributing those inputs with ‘required’
  — Limiting the character count for the character specific credit card fields
  — Restricting the data type for credit card fields to type=’tel’, so the user gets alerted if they try to submit the form with invalid letter/symbol characters in the credit card section. Also, this will provide mobile users with a numerical keyboard for those fields.

HTML structure of the form inputs

CSS

• Used logical properties and values (ex. margin-block, inline-start, inline-end, etc) to create universal styles, accommodating languages with different writing modes (i.e. right to left, top to bottom)
• Used CSS variables to make global design system changes easier
• The company uses SASS (a CSS preprocessor), so I took the opportunity to learn SASS and updated my project, using NPM to manage the packages. I found nesting to be the most valuable feature of SASS for this small project, making my style sheet more readable. I also used variables, similar to my CSS variables, with just a syntactic difference.
• Used flexbox to make UI elements (i.e. question tiles) responsive without having to make media queries.
• Used media queries to make the site fully responsive, collapsing the navbar into a hamburger menu on smaller devices.
• Used CSS transitions to create a pleasing micro-interaction when users click open/close the hamburger menu
• Styled the file input do be consistent across browsers, and match the more aesthetically pleasing wireframes. I utilized the <label> to activate the input, allowing me to hide the input element.

Snippet of SCSS file showing nesting and variables

Javascript

• Used the document API to get url parameters, which were used to dictate the state of the form screen. Parameters were added to the question tile links, which were clicked by the user on the index page.
• Handled file uploads by the user. This included clueing the user into the state of the machine by displaying the file name and size of a successfully attached file. And, displaying ‘no file currently attached’ if a file was not selected. This helps create a more positive user experience.
• Created and utilized a returnFileSize helper function to display the file size in a more human readable format.
• Used the FormData object to log the form data to the console.
• Created a responsive navbar, collapsing into a hamburger menu on smaller devices.

Javascript snipipet showing the use of the document API and URL object to get parameters

View the whole project and run it on your machine by downloading the code from the Github repo here.