SD Worx Front-End Challenge - JOSHUA MOELANS

(hosted via replit)

---

SD Worx Front-End Challenge

Your challenge this evening is to prepare a website that will present a datatable using the following API.

Refrain from using any visual frameworks, like bootstrap, Angular material, ngx-ui, or others, while building the webpage​

You can open the Figma sample to get as close a possible to the premade designs​. Links can be found in their respective sections below.

The pages must both support desktop and mobile versions​

Getting started

• Create or log into your existing GitHub account.​

  • If your GitHub account uses a nickname, make sure to tell us who you are!​

• Fork this repo; That would be this button:

  • 

• If you have git:​

  • Clone your fork to your local pc​
  • Once you are finished:​
    • git add -A​
    • git commit -m "SD Worx Challenge! 🚀"​
    • git push origin​

• ...Or if you don't have git, you can use GitHub's built-in uploader on your fork's page​

  • 

• Create a Pull Request of your fork to the main repository

  • 

• Fill in the Pull Request template

• Label your PR with the correct country and category. (e.g. Belgium and Professional)

• Submit your PR

Acceptance criteria student category​

• The table should have internal vertical scrolling for rows that are not visible in the view.​
• The Delete action - (trash can icon) should show a confirmation window and should remove the row from the list after the user confirms the operation.​
• The desktop view is >= 576px​
• Dashboard should include columns for [ID], [Avatar], [First name], [Date of birth], [City], [Country], [Actions(Delete)].​
• Mobile view is < 576px​
• Mobile view should contain [Name], [Date of birth], [City], [Country], [Actions(Delete)] data in rows.​

Figma link here

Acceptance criteria professional category​

• The table should have internal vertical scrolling for rows that are not visible in the view.​
• The table should have pagination with page size of 10 rows.​
• Data in the table should have the ability to sort by column.​
• The Edit action - (pen icon) should add the ability to edit values inline as on the project (input=text). The <ok> icon should save the changes, the <X> icon should cancel the operation.​
• The Delete action - (trash can icon) should show a confirmation window and should remove the row from the list after the user confirms the operation.​
• The desktop view is >= 576px and the dashboard should include columns for [ID], [Avatar], [First name], [Date of birth], [City], [Country], [Actions(Edit, Delete)].​
• Mobile view is < 576px, and should contain [Name], [Date of birth], [City], [Country], [Actions(Delete)] data in rows.​
• Actions should be in pop-menu.​

Figma link here

Judging Criteria

We will judge according to the following criteria:

• Your application is running​
• Implementation of all functionalities in relation to the Figma designs​
• HTML/CSS/code organization​
• How you present your work​

Tips

You don't have much time, first try to provide functionality, and then if you have time refine the designs.​

Remember to push all changes to your fork on GitHub before the time expires!​

If you have any problems or questions, please do not hesitate to ask our jurors.​

Good luck, and may the best developer win!