Sortable List Component

Challenge Requirements

• The component should display a list of up to 5 selected skills in a column.
• If the list doesn't have all 5 selected skills, the component should display an input box just after the last selected skill in the list.
• The input box should display suggestions as the user types from an API or hard-coded data.
• After selecting a skill from the suggestions, the selected skill should be added to the list of selected skills.
• The component should allow the user to delete a selected skill by clicking on a delete button.
• The component should allow the user to rearrange the selected skills by drag and drop.
• The component should also display a column of suggested skills next to the list.
• The user should be able to select a skill from the suggested skills column and add it directly to the list by clicking on the skill.
• Show the hover state of all the elements.
• The component should be responsive and display correctly on different screen sizes.
• Make this landing page look as close to the design as possible.

Taking your Project to the Next Level

• In the list, only the input box that is just after the last selected skill should be enabled. The rest of the input boxes should be disabled.
• For example, if only 2 skills are selected, the third input box should be enabled, while the fourth and fifth input boxes should be disabled.
• Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.

Resources

• An Interactive Guide to Flexbox
• Fetch API method
• Email input element