# Good components to try building that you might be asked to build in an interview

While this is far less common, I have been asked to build things and while there are so many things you can be asked to build, I find that there is a specific scope of questions that can be asked. Typically these questions test how comfortable you are translating requirements into code and visuals so *do not underestimate clarifying what you are building*.

In general, it's probably good to build some components on your own from scratch and figure out what are some things to keep in mind when building.

* Tooltip
  - How many will have to render on the page?
  - What triggers the tooltip to show?
  - Accessibility and what priority should screen readers read the tooltip at?
  - Are these informational styled tooltips?
  - The `title` attribute creates a browser default tooltip for text, worth mentioning
  - Localization? How will you set it up so tooltips can handle that text?
  - Is there an animation on how it should appear on the screen?
  - Boundary cases - what happens if the tooltip element should be rendered relative to a DOM element and that element is at the edge of the screen?
* Login/Registration form
  - Expect questions to come up regarding GET/POST forms, how does the `form` field work?
  - `hidden` inputs will be helpful in passing data that shouldn't be shown to the user
  - Perhaps worth talking about how the service will handle rate limiting mass requests? CAPTCHA support?
  - [FormData API](https://developer.mozilla.org/en-US/docs/Web/API/FormData) Will make your life easier (convert an `event.target` and you can pick out data easier in a form related input.
  - Refamiliarize with form and input events i.e. `focus`, `input`, etc
* Carousel
  - Does the carousel need to loop around?
  - If designing a component and no carousel items, should nothing render or placeholder?
  - Keyboard accessibility?
* Weather widget
* Clock widget
* To-do list
* Modal/Popup
* e-commerce Cart
* Datepicker
* Search box
  - Optimizing searching when hooking into the `onchange` event by debouncing the requests so you don't spam the service
* Show more button for a list of videos
* Pagination component
* Nested Dropdown

## Some things to think about

* Avoid `id` as it goes against the paradigm of componentization -- think about if this component will be used in multiple places
* What parts of the component are reusable? What aren't? Don't kill yourself over this -- get something working but think about it.
* Responsive layout and certain component will look in other views
* Internationalization: do you have to support different languages? If so, maybe call out you'd put your text/strings in a special file that can be sent to translators and you can have some logic to determine what language the user is i.e. via the browser language settings, etc.