0% found this document useful (0 votes)
20 views4 pages

UI Challenges

The document lists 61 different components and applications that could be built as coding exercises. For each item, it identifies the main component or interface and describes its core functionality. Examples include a calculator, todo list, scrolling content loader, and games like tic-tac-toe, sudoku and wordle.

Uploaded by

bhavareomkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
20 views4 pages

UI Challenges

The document lists 61 different components and applications that could be built as coding exercises. For each item, it identifies the main component or interface and describes its core functionality. Examples include a calculator, todo list, scrolling content loader, and games like tic-tac-toe, sudoku and wordle.

Uploaded by

bhavareomkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Certainly!

Here is the list with tasks marked in pointers:

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

You might also like