- Clone this repository.
- Complete exercises below by creating/modifying code in their respective folders. You can architect the project how you like re: folder structure, how you name your files, etc. Use your best judgement as a developer.
- Push the code to your own public Git repository, and send the link to your recruiter / rep.
- Pretend your code is going into a PRODUCTION environment, or that you are writing a pull request for an established open source project. Do not rush these exercises or cut corners in the name of speed. We aren't interested in the code you can write under pressure; no one writes amazing code when they are rushing. This is your chance to show off. Write your best code.
- Query https://5d3607a986300e0014b63fd0.mockapi.io/your-last-name for a list of users.
- For example, if your last name is "Lee", your endpoint is https://5d3607a986300e0014b63fd0.mockapi.io/lee.
- You may use whatever tool you like for making that request (jQuery AJAX, vanilla jqXHR, ES6 fetch API, etc). But do not use a JS framework; that is overkill for this exercise.
- Print that data to the DOM in an unordered list.
- Use Handlebars to render the data
- Each list item must show user name, avatar, created date, and ID
- Only show name and avatar by default; add a button that reveals the ID and created-date on click.
- Add a button to delete users, by making a DELETE request to https://5d3607a986300e0014b63fd0.mockapi.io/your-last-name/:user-id.
The above link is to a simple task-tracker app. The JS has many errors and inefficiencies that need to be fixed. There is also additional functionality that has to be added. This is an open-ended assessment meant to measure your skill in key areas like javascript, CSS, HTML, and accessibility.
Solve the problems presented in whatever way you deem most appropriate and in keeping with today's standards, with the following caveats/limitations:
* Vanilla JS only, no jQuery or frameworks. This test is to see if you understand javascript, so no shortcuts.
* Do not use any JS plugins. Same reason as above.
* You may use Sass (per the 'fixes/features' list below) but no other CSS frameworks.
* Use the Sass compiler of your choice.
- Break the contents of the HTML file into pieces that follow a logical separation of concerns for the browser.
- Fix any invalid HTML
- Fix any JS errors / inefficiencies.
- Convert the CSS to Sass, and fix any errors and/or inefficiencies.
- Utilize closures to prevent pollution of the global object with app code
- Make the form keyboard-accessible
- Add support for localStorage such that refreshing the page does not reset your task list
- Add form validation such that an empty task cannot be submitted.
- Convert float-based layouts to flexbox-based layouts. The visuals should not change, just the CSS that handles the layout.
- Make the design responsive, such that -
- The form fills 100% width of the screen up until 375px wide
- The form becomes centered in the page after 375px
- There should be no horizontal scroll bars present at any width