Phone Prefix Challenge

5th May 2022 - Challenge 01

We are looking for technical talent!

At Finsweet, we're always seeking for the best candidates who can bring Webflow to the next level. If you think you're one of them, we've got a challenge for you 👀!

The Phone Prefix challenge consists in coding a custom dropdown that dynamically loads all countries' data and allows users to select their phone prefix, plus some additional features.

We provide you with the pre-built component, including a working JavaScript solution so you can test it by yourself. All you have to do is create your own version of the custom code and present it to us 💪.

All submissions will be reviewed with a personal response to the work. All submissions will be considered for part-time or full-time employment at Finsweet. Your submission will not guarantee any relationship with Finsweet.

‍

Features

The following form has a Dropdown component that allows the users to choose their country's phone prefix.
Here's an exhaustive list of its functionalities:

  1. All the countries' data is fetched from REST Countries.
  2. The data is used to populate all the options inside the Dropdown List.
  3. Each option displays the country's flag and ISO 3166-1 alpha-2 code.
  4. The Dropdown Toggle displays the currently selected country's flag and phone prefix.
  5. On page load, the user's location is detected and set as the default selected option.
  6. The selected option inside the Dropdown List receives Webflow's native Current state.
  7. When opening the dropdown, the currently selected option is focused into view.
  8. If the user hits any letter in the keyboard when the dropdown is open, the first option that starts with that letter is focused.
  9. When an option is selected, the Dropdown List automatically closes and the Dropdown Toggle is focused.
  10. The entire component is keyboard navigable using the Arrows, Enter, Space and Tab keys.
  11. All elements in the component have the required ARIA attributes, including the dynamic ones that change based on the currently selected option.
  12. The selected option's ISO 3166-1 alpha-2 code is populated inside a hidden input field in the form.
United States Flag
+1
Thank you for your submission!
Oops! Something went wrong while submitting the form.
Copy Component

We want to see your version!

If you're up for this challenge, we'd like to see your work! You just have to follow these steps:

  1. Use vanilla JavaScript or TypeScript inside of the provided Webflow project. Sign up for a free Webflow account and then clone the Phone Prefix Challenge project. You can use Chrome Local Overrides to add snippets in the HTML file of the Webflow site.
  2. Use our developer-starter template to create a new repository, it already contains our day-to-day tooling pre-configured. You can follow the instructions in the README.md file to get started.
  3. All elements in the Dropdown component already have some selectors applied so you can interact with them. Don't hardcode HTML in your JavaScript code, just clone/mutate the existing DOM elements when required.
  4. Don't try to copy the bundled code that we've added for demonstration purposes! This is a challenge, be honest and do your best!
  5. Make sure you follow coding best practices, Typescript will be a plus! Avoid third party libraries for this challenge, we want to see your coding skills!
  6. Once you're happy with your code, send a link of your live Webflow project and your GitHub repository to alexiglesias@finsweet.com.

‍

Good luck 💪!