UI Challenges
UI Challenges
1. Calculator
• Component: Calculator interface
• Functionality: Basic arithmetic operations
2. TodoList
• Component: List of tasks
• Functionality: Add, delete, and mark tasks as done
3. Infinite Scroll
• Component: Scrollable list
• Functionality: Loads more content as user scrolls
4. Stopwatch
• Component: Stopwatch display
• Functionality: Measures elapsed time
5. Tic Tac Toe
• Component: Tic Tac Toe game board
• Functionality: Two-player game with X and O marks
6. Typeahead
• Component: Input with auto-suggestions
• Functionality: Displays suggestions as user types
7. Sudoku
• Component: Sudoku grid
• Functionality: Number puzzle game
8. World
• Component: World map or globe
• Functionality: Displaying geographical information
9. Tip Calculator
• Component: Calculator for tipping
• Functionality: Calculates tip based on bill amount and percentage
10. Progressive Bar
• Component: Progress bar
• Functionality: Gradual fill or progression display
11. Question List
• Component: List of questions
• Functionality: Display and manage a list of questions
12. Crypto Dashboard
• Component: Dashboard interface
• Functionality: Displays cryptocurrency-related information
13. Star Rating Component
• Component: Star rating display
• Functionality: Allows users to rate with stars
14. Modal Component
• Component: Popup/modal interface
• Functionality: Displays additional information or actions
15. C Shape With 7 Box
• Component: Visual representation of a 'C' shape with 7 boxes
16. Bishop on Chessboard
• Component: Chessboard with a bishop
• Functionality: Highlights moves for a bishop piece
17. Counter
• Component: Numeric counter
• Functionality: Increments or decrements a numeric value
18. Nested Comments
• Component: Nested comments display
• Functionality: Hierarchical structure for comment threads
19. Product Cards
• Component: Cards displaying product information
• Functionality: Showcase product details
20. OTP Input
• Component: Input for One-Time Password
• Functionality: Enter and verify OTP
21. To-Do List
• Component: List for tasks
• Functionality: Add, delete, and manage tasks
22. Countdown Timer
• Component: Timer display
• Functionality: Countdown to a specified time
23. Employee Database Management
• Component: Database management interface
• Functionality: Add, edit, and delete employee records
24. File Explorer
• Component: File management interface
• Functionality: Navigate and manage files
25. Pagination
• Component: Pagination controls
• Functionality: Navigate through pages of content
26. EMI Calculator
• Component: Calculator for EMI (Equated Monthly Installment)
• Functionality: Calculate monthly loan payments
27. Password Generator
• Component: Password generation interface
• Functionality: Generate secure passwords
28. Infinite Scrolling Configurable Component
• Component: Configurable infinite scrolling interface
• Functionality: Infinite scrolling with customizable options
29. Holy Grail Layout
• Component: Webpage layout
• Functionality: Header, three columns, and footer layout
30. React Tabs
• Component: Tabbed interface
• Functionality: Switch between different content tabs
31. TODO App
• Component: Task management interface
• Functionality: Add, edit, and delete tasks
32. Star Rating Widget
• Component: Widget for displaying star ratings
• Functionality: Allows users to rate with stars
33. Drag & Drop, Swap, Add and Delete Elements
• Component: Interface for drag-and-drop operations
• Functionality: Move, swap, add, and delete elements
34. Chessboard/Checkerboard Pattern
• Component: Chessboard or checkerboard display
• Functionality: Visual representation of a chess or checkerboard pattern
35. Holy Grail
• Layout: Header, 3 columns, Footer
36. Tabs
• Component: Tab elements and associated content panel
37. Traffic Light
• Functionality: Lights switch (green to yellow to red), loop indefinitely
38. Digital Clock
• Component: 7-segment digital clock displaying current time
39. Job Board
• Component: Displays latest job postings from Hacker News
40. Accordion
• Component: Vertically stacked sections with titles and content snippets
41. jQuery.css
• Function: jQuery-like function for setting styles of a DOM element
42. Progress Bar
• Component: Shows percentage completion of an operation
43. Progress Bars
• Component: List of progress bars filling up gradually
44. Tweet
• Component: Resembles a Tweet from Twitter
45. Analog Clock
• Component: Analog clock with moving hands
46. Classnames
• Function: Conditionally joins CSS class names together
47. Grid Lights
• Component: Grid of lights deactivating in reverse order
48. jQuery Class Manipulation
• Functions: jQuery-like functions for manipulating classes on a DOM element
49. Like Button
• Component: Like button with changing appearance based on states
50. Star Rating
• Component: Star rating with row of star icons for user selection
51. Tabs II
• Component: Semi-accessible tabs with correct ARIA roles, states, and
properties
52. getElementsByClassName
• Function: Retrieves DOM elements containing specified classes
53. Tic-tac-toe
• Game: Playable by two players
54. Stopwatch
• Widget: Measures elapsed time
55. Transfer List
• Component: Allows transferring items between two lists
56. Whack-A-Mole
• Game: Arcade game where players hit moles as they pop up
57. Memory Game
• Game: Match pairs of cards in a memory game
58. Progress Bars IV
• Component: List of progress bars filling up concurrently, with pausing and
resuming
59. Tic-tac-toe II
• Game: N x N tic-tac-toe requiring M consecutive marks to win
60. Transfer List II
• Component: Allows transferring items between two lists, bulk
selection/unselection, and adding new items
61. Wordle
• Game: Word-guessing game that gained popularity