← Back to Interview Guide

If you are preparing for Frontend interviews, should master these 20 machine coding questions

1. π‘©π’–π’Šπ’π’… 𝒂 𝑻𝒐𝒅𝒐 𝑨𝒑𝒑: Create a simple CRUD application for managing a list of tasks.

2. π‘°π’Žπ’‘π’π’†π’Žπ’†π’π’• 𝒂 𝑴𝒐𝒅𝒂𝒍 π‘ͺπ’π’Žπ’‘π’π’π’†π’π’•: Design a reusable modal component with open/close functionality.

3. π‘ͺ𝒓𝒆𝒂𝒕𝒆 𝒂 π‘«π’“π’π’‘π’…π’π’˜π’ 𝑴𝒆𝒏𝒖: Build a dropdown menu that supports keyboard navigation.

4. π‘©π’–π’Šπ’π’… 𝒂 π‘Ίπ’Šπ’Žπ’‘π’π’† π‘ͺ𝒂𝒍𝒄𝒖𝒍𝒂𝒕𝒐𝒓: Implement a basic calculator with addition, subtraction, multiplication, and division.

5. π‘°π’Žπ’‚π’ˆπ’† π‘ͺ𝒂𝒓𝒐𝒖𝒔𝒆𝒍/π‘Ίπ’π’Šπ’…π’†π’“: Create an image carousel that allows navigation through images with previous/next buttons.

6. π‘°π’π’‡π’Šπ’π’Šπ’•π’† 𝑺𝒄𝒓𝒐𝒍𝒍: Implement infinite scrolling on a list of items fetched from an API.

7. 𝑺𝒆𝒂𝒓𝒄𝒉 π‘¨π’–π’•π’π’Žπ’‚π’•π’†: Create an input field that suggests options based on user input.

8. π‘Ήπ’†π’”π’‘π’π’π’”π’Šπ’—π’† π‘΅π’‚π’—π’Šπ‘”π’‚π’•π’Šπ’π’ 𝑩𝒂𝒓: Build a responsive navigation bar that collapses into a hamburger menu on smaller screens.

9. π‘­π’π’“π’Ž π‘½π’‚π’π’Šπ’…π’‚π’•π’Šπ’π’: Create a form with various input types and implement validation rules.

10. 𝑫𝒂𝒕𝒂 𝑻𝒂𝒃𝒍𝒆 π’˜π’Šπ’•π’‰ π‘Ίπ’π’“π’•π’Šπ’π’ˆ 𝒂𝒏𝒅 π‘·π’‚π’ˆπ’Šπ’π’‚π’•π’Šπ’π’: Design a table that displays data with options for sorting and pagination.

11. π‘»π’π’ˆπ’ˆπ’π’† π‘Ίπ’˜π’Šπ’•π’„π’‰ π‘ͺπ’π’Žπ’‘π’π’π’†π’π’•: Implement a toggle switch that changes state when clicked.

12. 𝑭𝒆𝒕𝒄𝒉 𝑨𝑷𝑰 𝑫𝒂𝒕𝒂 𝒂𝒏𝒅 π‘«π’Šπ’”π’‘π’π’‚π’š: Create a component that fetches data from an API and displays it.

13. π‘«π’‚π’“π’Œ/π‘³π’Šπ’ˆπ’‰π’• 𝑴𝒐𝒅𝒆 π‘»π’π’ˆπ’ˆπ’π’†: Build a simple UI that allows users to switch between dark and light themes.

14. π‘«π’“π’‚π’ˆ 𝒂𝒏𝒅 𝑫𝒓𝒐𝒑 π‘³π’Šπ’”π’•: Implement a drag-and-drop interface for reordering items in a list.

15. 𝑹𝒆𝒂𝒍-π’•π’Šπ’Žπ’† π‘ͺ𝒉𝒂𝒕 𝑰𝒏𝒕𝒆𝒓𝒇𝒂𝒄𝒆: Design a basic chat interface that simulates real-time messaging.

16. π‘°π’Žπ’‚π’ˆπ’† 𝑼𝒑𝒍𝒐𝒂𝒅 π’˜π’Šπ’•π’‰ π‘·π’“π’†π’—π’Šπ’†π’˜: Create a component that allows users to upload an image and shows a preview.

17. π‘ͺπ’π’–π’π’•π’…π’π’˜π’ π‘»π’Šπ’Žπ’†π’“: Implement a countdown timer that counts down to a specified date.

18. π‘Ίπ’•π’Šπ’„π’Œπ’š 𝑯𝒆𝒂𝒅𝒆𝒓: Create a header that remains fixed at the top of the viewport when scrolling.

19. π‘ͺπ’–π’”π’•π’π’Ž π‘·π’‚π’ˆπ’Šπ’π’‚π’•π’Šπ’π’: Build a custom pagination component for navigating through a set of data.

20. π‘Ίπ’Šπ’Žπ’‘π’π’† π‘΄π’‚π’“π’Œπ’…π’π’˜π’ π‘¬π’…π’Šπ’•π’π’“: Develop a basic text editor that converts Markdown syntax to HTML.