A few weeks ago I posted a handful of practical Front End interview practice questions. I did this after noticing a big difference in the common generic advice of ‘grind Leetcode’/’expect a bunch of tiny HTML/CSS/JS trivia questions’, and what I experienced in my (Bay Area company) interviews which heavily leaned towards actually implementing some small project from scratch.

A good number of people seemed to find the questions helpful and asked for more, so I wanted to take the time to write up and share some others.

Since reddit posts are pretty ephemeral, a friend and I thought it would be cool to throw together a small site and upload all the questions we’ve written up so far. You can find the six practice questions that I’ve posted on reddit on frontendeval.com – we have a few more we’re writing up, which we’ll post soon.

A couple of quick notes before I jump into the questions:

  • I understand there may be a lot of companies out there where this advice doesn’t apply, that do ask Leetcode questions, or don’t even ask you to code anything in an interview. I can only say that recently in my Bay Area interviews, the majority were nothing like that.

  • I omitted any ‘time limits’ from these questions because I don’t think the focus should be on solving a question as quickly as possible. When practicing for practical coding interviews the focus should be on improving your overall approach: how you break down a problem, ask the right clarifying questions, understand trade-offs in different approaches, learn how to debug issues, etc. Your speed will improve as a result of practice.

  • I mentioned this in my previous post, but it’s worth mentioning again: use an online editor such as CodePen to practice. I’m pretty sure all interviews are going to be remote for the foreseeable future, and sites like CodePen/CodeSandbox are the easiest for interviewers to setup. You don’t want to waste the first five minutes of your interview figuring out the interface or how to import React!

Front End coding practice questions

Modal overlay

Prompt: Create a dismissible modal overlay. The UI should initially show a ‘Show offer’ button which, when clicked, displays an overlay resembling the mockup below, including a transparent grey overlay over the background. The modal should be vertically and horizontally centered, and always in the same position regardless of scrolling.

r/webdev - Sharing more Front End practice interview questions
r/webdev - Sharing more Front End practice interview questions

If the user clicks anywhere on the grey background or the ‘x’, the modal should be dismissed and the UI should again just show the ‘Show offer’ button. However, if the user clicks the ‘Accept offer’ button, the modal will dismiss and the UI should now show the text “Offer accepted”.

r/webdev - Sharing more Front End practice interview questions

Hints

Possible extensions

  • Can you extend the UI to support multiple modals? For example, the UI should have buttons for ‘Show offer one’ and ‘Show offer two’. If the user accepts offer one, that modal button should change to ‘Accepted offer one’, and the UI should still have the ‘Show offer two’ button

  • Make it so that the Esc key closes the modal as well

  • Make the modal responsive so that on mobile web the modal takes up the entire browser window

  • If the page is longer than one screen (has a vertical scrollbar), prevent scrolling when the modal is open

Two-factor code input

Prompt: Create a 4-digit security code input that allows you to enter a two-factor authorization code. It should resemble the screenshot below:

r/webdev - Sharing more Front End practice interview questions

Implement a form submission handler that calls a submitCode(code) function with the 4 digits as a concatenated string. Implement a submitCode function that validates the code given against a hardcoded 4-digit string.

The inputs should be as usable as possible, specifically:

  1. Each field should allow only one digit between 0-9. Any other input should be rejected

  2. Entering a number in a field should advance the cursor to the next field, except in the case of the last field

  3. Pressing backspace at the beginning of a field (whether that field is populated or not) should focus the previous field and delete the input inside

  4. Very basic styling guidance:

    1. Inputs should be positioned next to one another

    2. Inputs should be roughly rectangular as pictured

    3. Submit button should be positioned below

Hints

  • How will you handle rejecting feedback invalid feedback, i.e. if not all the fields are filled out or the code is invalid?

  • The main difficulty with this problem is moving the cursor between the fields. You’ll probably want some sort of key handler on all the inputs in order to do this. Think about what type of key handler(s) would work best for this, e.g. input, change, keydown, keyup, keypress

  • You’ll probably need a specific key handler for Backspace

Possible Extensions

  • It doesn’t make sense to submit anything other than a 4-digit number. Add some validation to ensure that the user cannot submit without having all fields populated. Highlight the fields that are missing.

  • Is this built as a reusable component? Turn it into a reusable component if not. Make the number of digits customizable.

  • People will often be copying and pasting their one-time code from their SMS. Make copy and paste work if you have the first field highlighted.

Mortgage calculator

Prompt: Create a calculator that accepts three inputs and calculates your monthly mortgage payment:

  1. Principal loan amount

  2. Interest rate (annual)

  3. Number of years on your mortgage

The standard math equation for calculating your monthly mortgage payment is:

P(r(1+r)^n/((1+r)^n)-1))

Where:

  • P is the principal loan amount

  • r is the monthly interest rate

  • n is the total number of payments on your mortgage

Note the bolded differences between the equation variables and the inputs. The inputs are set up that way as a matter of user experience: borrowers tend to be presented numbers like this by their bank. Your job when working on this feature is to convert the user inputs into the numbers that will be used in the calculation. Users will make 12 payments on their mortgage per year of their mortgage, and the monthly interest rate is the annual interest rate divided by 12.

r/webdev - Sharing more Front End practice interview questions

You can use the pictured example to check your math:

  • Principal loan amount: $500,000

  • Interest rate: 3%

  • Length of loan: 30 years

  • => $2,387 monthly mortgage

Hints

Possible Extensions

  • Format the monthly payment amount nicely, as pictured

  • Some borrowers think in terms of down payments. Substitute inputs for down payment and what percentage of the total loan that was for the principal input. For instance, if the user were to input a $100,000 down payment as 20% of the total loan, you could calculate for them that the total amount of principal is $400,000 ($100,000 / 0.2 – $100,000)

Looking for more questions?

As I mentioned above, we’ve put all of the questions on frontendeval.com – we only have a small library so far, but we have plenty of other questions that were asked in interviews. It takes a little time to write up a question, but we’ll try to post new ones onto the site pretty regularly.



Source link

Write A Comment