100 JavaScript Projects Challenge by XeB🚀

Welcome to the 100 JavaScript Projects Challenge! This repository contains a comprehensive collection of JavaScript projects designed to enhance your coding skills through practical implementation.

Projects List and Summaries

1. Student Marksheet Generator

• Description: Create and manage student academic records
• Features:
  • Input student details and marks
  • Calculate total marks and percentages
  • Generate printable marksheet
  • Grade calculation system
• Learning Focus: Form handling, calculations, PDF generation

2. My To-Do List

• Description: Task management application
• Features:
  • Add, edit, and delete tasks
  • Mark tasks as complete
  • Filter tasks by status
  • Local storage integration
• Learning Focus: CRUD operations, local storage, DOM manipulation

3. Intermediate Calculator

• Description: Advanced calculator with multiple operations
• Features:
  • Basic arithmetic operations
  • Scientific calculations
  • History of calculations
  • Memory functions
• Learning Focus: Math operations, event handling

4. Advanced Calculator with Currency Conversion

• Description: Calculator with integrated currency conversion
• Features:
  • Standard calculator functions
  • Real-time currency conversion
  • Multiple currency support
  • Conversion history
• Learning Focus: API integration, calculations

5. User Information Form

• Description: Comprehensive user data collection form
• Features:
  • Multi-step form process
  • Input validation
  • Form data preview
  • Data persistence
• Learning Focus: Form validation, data handling

6. Normal Color Picker

• Description: Basic color selection tool
• Features:
  • Color wheel interface
  • RGB/HEX value display
  • Color history
  • Copy color codes
• Learning Focus: Color manipulation, DOM events

7. Advanced BMI Calculator

• Description: Body Mass Index calculator with health insights
• Features:
  • BMI calculation
  • Health category indication
  • Metric/Imperial units
  • Result history
• Learning Focus: Health calculations, unit conversion

8. Advanced Digital Clock

• Description: Feature-rich digital clock application
• Features:
  • Multiple time zones
  • Date display
  • Alarm functionality
  • Timer options
• Learning Focus: Date object, intervals

9. Countdown Timer

• Description: Customizable countdown application
• Features:
  • Set custom time duration
  • Multiple timers
  • Audio alerts
  • Pause/Resume functionality
• Learning Focus: Time manipulation, audio API

10. Simple Bill Generator

• Description: Basic billing and invoice system
• Features:
  • Item entry and calculation
  • Tax calculation
  • Invoice generation
  • Print functionality
• Learning Focus: Calculations, PDF generation

11. Number Guessing Game

• Description: Interactive number guessing game
• Features:
  • Random number generation
  • Score tracking
  • Difficulty levels
  • Hints system
• Learning Focus: Random numbers, game logic

12. Password Generator

• Description: Secure password generation tool
• Features:
  • Custom password length
  • Character type selection
  • Password strength indicator
  • Copy to clipboard
• Learning Focus: String manipulation, cryptography

13. Typing Speed Test

• Description: Application to measure typing speed and accuracy
• Features:
  • WPM calculation
  • Accuracy tracking
  • Multiple text samples
  • Progress tracking
• Learning Focus: Timing, input handling

14. Quiz App

• Description: Interactive quiz application
• Features:
  • Multiple choice questions
  • Score tracking
  • Timer for questions
  • Results summary
• Learning Focus: Array manipulation, timing

15. Advanced Bookmark Manager

• Description: Comprehensive bookmark organization tool
• Features:
  • Add/edit bookmarks
  • Category organization
  • Search functionality
  • Import/Export features
• Learning Focus: Data organization, local storage

16. Advanced Color Picker

• Description: Enhanced color selection tool with advanced features
• Features:
  • RGB and HSL color spaces
  • Color palette creation
  • Custom gradient generator
  • Color scheme suggestions
• Learning Focus: Color manipulation, CSS gradients

17. Expense Tracker

• Description: Personal finance management application
• Features:
  • Income and expense tracking
  • Category-wise breakdown
  • Monthly/yearly reports
  • Data visualization
• Learning Focus: Data management, Charts.js

18. Image Gallery

• Description: Dynamic image gallery with filtering
• Features:
  • Image categorization
  • Lightbox preview
  • Filter by category
  • Responsive grid layout
• Learning Focus: Grid layout, image handling

19. Interactive Course Catalog

• Description: Course listing with dynamic pagination
• Features:
  • Course filtering
  • Dynamic search
  • Pagination controls
  • Course details modal
• Learning Focus: Pagination, search functionality

20. Memory Card Game

• Description: Card matching memory game
• Features:
  • Card flipping animation
  • Score tracking
  • Timer functionality
  • Difficulty levels
• Learning Focus: Game logic, animations

21. OTP Authentication

• Description: One-Time Password verification system
• Features:
  • OTP generation
  • Input validation
  • Timer countdown
  • Resend functionality
• Learning Focus: Form validation, timing

22. Word Guessing Game

• Description: Word puzzle game with hints
• Features:
  • Random word selection
  • Letter guessing
  • Score tracking
  • Hint system
• Learning Focus: String manipulation, game logic

23. Interactive Music Player

• Description: Audio player with playlist management
• Features:
  • Play/pause/skip controls
  • Playlist management
  • Progress bar
  • Volume control
• Learning Focus: Audio API, progress tracking

24. Snake Game

• Description: Classic snake game implementation
• Features:
  • Arrow key controls
  • Score tracking
  • Collision detection
  • Increasing difficulty
• Learning Focus: Canvas API, game loops

25. Rock, Paper, Scissors Game

• Description: Classic hand game against computer
• Features:
  • Player vs Computer mode
  • Score tracking
  • Animation effects
  • Game history
• Learning Focus: Game logic, animations

26. Tic-Tac-Toe Game

• Description: Classic two-player strategy game
• Features:
  • Two-player gameplay
  • Win detection
  • Score tracking
  • Game reset
• Learning Focus: Game state management, win conditions

27. Color Guessing Game

• Description: RGB color guessing challenge
• Features:
  • Random color generation
  • Multiple difficulty levels
  • Score tracking
  • Color theory learning
• Learning Focus: RGB color system, game logic

28. Age Calculator

• Description: Calculate age and time differences
• Features:
  • Precise age calculation
  • Multiple date formats
  • Time period breakdown
  • Important date highlights
• Learning Focus: Date manipulation, calculations

29. Weather App with Alerts

• Description: Weather forecast with alert system
• Features:
  • Current weather display
  • Weather alerts
  • 5-day forecast
  • Location-based updates
• Learning Focus: API integration, geolocation

30. Movie Search App

• Description: Movie database search interface
• Features:
  • Movie search
  • Detailed information
  • Rating system
  • Watchlist management
• Learning Focus: API integration, data display

31. News App

• Description: News aggregator application
• Features:
  • Multiple news sources
  • Category filtering
  • Search functionality
  • Bookmark articles
• Learning Focus: API integration, content management

32. 2048 Game

• Description: Popular sliding number puzzle game
• Features:
  • Grid movement
  • Score tracking
  • Game over detection
  • Best score storage
• Learning Focus: Grid manipulation, game logic

33. Recipe Finder

• Description: Recipe search and management system
• Features:
  • Recipe search
  • Ingredient lists
  • Cooking instructions
  • Save favorites
• Learning Focus: API integration, data presentation

34. Sign Up Form with Encrypted Passwords

• Description: Secure user registration system
• Features:
  • Password encryption
  • Form validation
  • Strength indicators
  • User feedback
• Learning Focus: Security, form handling

35. Advanced Image Slider

• Description: Feature-rich image carousel
• Features:
  • Multiple transition effects
  • Thumbnail navigation
  • Auto-play options
  • Touch support
• Learning Focus: Animation, touch events

36. Product Cards

• Description: Dynamic product display cards
• Features:
  • Responsive design
  • Hover effects
  • Quick view modal
  • Add to cart functionality
• Learning Focus: CSS design, interactivity

37. Random Joke Generator

• Description: Fetch and display random jokes
• Features:
  • Multiple joke categories
  • Share functionality
  • Save favorites
  • Rating system
• Learning Focus: API integration, DOM manipulation

38. Flashcard App

• Description: Study aid with flashcards
• Features:
  • Create/edit cards
  • Study modes
  • Progress tracking
  • Spaced repetition
• Learning Focus: Educational tools, state management

39. Product Filter

• Description: Dynamic product filtering system
• Features:
  • Multiple filter criteria
  • Price range slider
  • Category filtering
  • Sort options
• Learning Focus: Array methods, filtering logic

40. Star Rating

• Description: Interactive rating component
• Features:
  • Click/hover effects
  • Half-star support
  • Custom styling
  • Rating submission
• Learning Focus: Interactive components, event handling

41. GitHub User Search

• Description: GitHub profile search tool
• Features:
  • User profile display
  • Repository list
  • Follow statistics
  • Activity graph
• Learning Focus: GitHub API, data visualization

42. Polling App

• Description: Create and manage polls
• Features:
  • Create polls
  • Vote system
  • Results display
  • Share polls
• Learning Focus: Data management, real-time updates

43. Virtual Keyboard

• Description: On-screen keyboard implementation
• Features:
  • Multiple layouts
  • Key animations
  • Special characters
  • Mobile support
• Learning Focus: Event handling, keyboard events

44. Elegant Dictionary

• Description: Word lookup and definition display
• Features:
  • Word definitions
  • Pronunciation
  • Example sentences
  • Word history
• Learning Focus: API integration, data presentation

45. Advanced Rich Text

• Description: Rich text editor implementation
• Features:
  • Text formatting
  • File attachments
  • Export options
  • Customizable toolbar
• Learning Focus: Text editing, file handling

46. Word Count App

• Description: Text analysis tool
• Features:
  • Word/character count
  • Reading time estimate
  • Keyword density
  • Text statistics
• Learning Focus: String manipulation, text analysis

47. Wikipedia Viewer

• Description: Wikipedia article search interface
• Features:
  • Article search
  • Preview summaries
  • Save articles
  • Reading history
• Learning Focus: API integration, content display

48. Advanced Tabs

• Description: Feature-rich tab interface
• Features:
  • Custom animations
  • Nested tabs
  • URL integration
  • Responsive design
• Learning Focus: Component design, state management

49. Drag and Drop Game

• Description: Interactive drag and drop puzzle
• Features:
  • Multiple difficulty levels
  • Progress saving
  • Timer function
  • Score system
• Learning Focus: Drag and drop API, game logic

50. Captcha Generator

• Description: Custom CAPTCHA verification system
• Features:
  • Random code generation
  • Image distortion
  • Audio option
  • Refresh capability
• Learning Focus: Security features, canvas manipulation

51. Advanced Image Editor

• Description: Basic image editing tool
• Features:
  • Filters and effects
  • Crop/resize
  • Text overlay
  • Save/export
• Learning Focus: Canvas API, image processing

52. Pixel Art Generator

• Description: Create pixel art designs
• Features:
  • Custom grid size
  • Color palette
  • Save/load designs
  • Export options
• Learning Focus: Canvas manipulation, user interaction

53. Compact Image Gallery

• Description: Space-efficient image gallery
• Features:
  • Grid layout
  • Lightbox view
  • Keyboard navigation
  • Touch support
• Learning Focus: Layout algorithms, modal windows

54. Advanced QR Code Generator

• Description: QR code creation tool
• Features:
  • Custom content
  • Style options
  • Error correction
  • Download options
• Learning Focus: QR code libraries, canvas

55. Enhanced Notes App

• Description: Feature-rich note-taking application
• Features:
  • Rich text editing
  • Categories/tags
  • Search function
  • Auto-save
• Learning Focus: Data persistence, search algorithms

56. Minion Eyes

• Description: Interactive animation project
• Features:
  • Mouse tracking
  • Animation effects
  • Interactive elements
  • Sound effects
• Learning Focus: Animation, mouse events

57. Dynamic Table Generator

• Description: Create and manage dynamic tables
• Features:
  • Custom columns
  • Sorting/filtering
  • Export options
  • Responsive design
• Learning Focus: Table manipulation, data handling

58. Flip A Coin

• Description: Coin flip simulation
• Features:
  • Flip animation
  • Statistics tracking
  • Sound effects
  • History log
• Learning Focus: Animation, probability

59. Multi-Step Form

• Description: Progressive form interface
• Features:
  • Step navigation
  • Validation
  • Progress indicator
  • Data persistence
• Learning Focus: Form management, validation

60. Palindrome Checker

• Description: Check for palindrome strings
• Features:
  • Real-time checking
  • Case sensitivity
  • Space handling
  • History log
• Learning Focus: String manipulation, algorithms

61. Scratch Card

• Description: Virtual scratch card effect
• Features:
  • Scratch effect
  • Prize reveal
  • Touch support
  • Animation effects
• Learning Focus: Canvas API, touch events

62. Multi-Language Translator

• Description: Text translation tool
• Features:
  • Multiple languages
  • Auto-detect language
  • Text-to-speech
  • History tracking
• Learning Focus: API integration, language processing

63. Percentage Calculator

• Description: Various percentage calculations
• Features:
  • Multiple calculation types
  • History log
  • Quick calculations
  • Copy results
• Learning Focus: Math operations, user input

64. Image Resize

• Description: Image resizing tool
• Features:
  • Multiple output sizes
  • Maintain aspect ratio
  • Preview
  • Batch processing
• Learning Focus: Image manipulation, file handling

65. Advanced Blob Generator

• Description: Create custom blob shapes
• Features:
  • Shape customization
  • Animation options
  • Export as SVG
  • Color options
• Learning Focus: SVG manipulation, animation

66. Math Game

• Description: Mathematical skills practice
• Features:
  • Multiple operations
  • Difficulty levels
  • Time challenges
  • Progress tracking
• Learning Focus: Math operations, game design

67. Word Assemble Game

• Description: Word creation puzzle game
• Features:
  • Letter scramble
  • Hint system
  • Score tracking
  • Dictionary check
• Learning Focus: Word processing, game logic

68. Text To Speech Converter

• Description: Convert text to spoken audio
• Features:
  • Multiple voices
  • Speed control
  • Language options
  • Save audio
• Learning Focus: Web Speech API, audio handling

69. Difference Between 2 Dates

• Description: Date comparison calculator
• Features:
  • Multiple formats
  • Custom units
  • Exclude weekends
  • Working days calculation
• Learning Focus: Date manipulation, calculations

70. Social Media Post

• Description: Social media post creator
• Features:
  • Multiple platforms
  • Image upload
  • Preview mode
  • Schedule posts
• Learning Focus: Social media APIs, file handling

71. Predict Gender By Name

• Description: Name gender prediction tool
• Features:
  • Multiple databases
  • Probability score
  • History tracking
  • Batch processing
• Learning Focus: API integration, probability

72. Hangman Game

• Description: Classic word guessing game
• Features:
  • Word categories
  • Visual feedback
  • Hint system
  • Score tracking
• Learning Focus: Game logic, drawing

73. Gradient Generator

• Description: CSS gradient creation tool
• Features:
  • Multiple gradient types
  • Color picker
  • CSS code generation
  • Preview mode
• Learning Focus: CSS gradients, color manipulation

74. Loan Calculator

• Description: Financial loan calculator
• Features:
  • Multiple loan types
  • Payment schedule
  • Interest calculation
  • Amortization table
• Learning Focus: Financial calculations, tables

75. Box Shadow Generator

• Description: CSS box shadow creator
• Features:
  • Visual editor
  • Multiple shadows
  • Code generation
  • Preset styles
• Learning Focus: CSS properties, visual tools

76. Word Puzzle Game

• Description: Word search puzzle game
• Features:
  • Custom grid sizes
  • Multiple categories
  • Hint system
  • Progress saving
• Learning Focus: Grid algorithms, game logic

77. Number To Roman Converter

• Description: Number system converter
• Features:
  • Bidirectional conversion
  • Large numbers
  • Validation
  • Copy results
• Learning Focus: Number systems, algorithms

78. Currency Formatter

• Description: Currency display formatter
• Features:
  • Multiple currencies
  • Custom formats
  • Live preview
  • Copy formatted text
• Learning Focus: Number formatting, localization

79. Sliding Puzzle Game

• Description: Grid-based sliding puzzle
• Features:
  • Custom grid sizes
  • Image puzzles
  • Move counter
  • Solution checker
• Learning Focus: Grid manipulation, algorithms

80. Testimonial Selection

• Description: Testimonial display component
• Features:
  • Multiple layouts
  • Animation effects
  • Rating display
  • Filtering options
• Learning Focus: Component design, animations

81. Temperature Converter

• Description: Temperature unit converter
• Features:
  • Multiple units
  • Quick conversion
  • Formula display
  • History log
• Learning Focus: Unit conversion, calculations

82. Fruit Fall Game

• Description: Fruit catching game
• Features:
  • Multiple fruit types
  • Score system
  • Difficulty levels
  • Power-ups
• Learning Focus: Game physics, collision detection

83. Share GIF to Tenor

• Description: GIF sharing integration
• Features:
  • GIF upload
  • Tags/categories
  • Share options
  • Preview mode
• Learning Focus: API integration, file upload

84. Grammar Checker

• Description: Text grammar analysis tool
• Features:
  • Grammar rules
  • Suggestions
  • Statistics
  • Export report
• Learning Focus: Text analysis, API integration

85. Handwriting Style Generator

• Description: Custom font style creator
• Features:
  • Multiple styles
  • Customization options
  • Preview mode
  • Export options
• Learning Focus: Font manipulation, canvas

86. Guess the Anime

• Description: Anime guessing game
• Features:
  • Image hints
  • Multiple categories
  • Score system
  • Leaderboard
• Learning Focus: Image handling, game logic

87. Aspect Ratio Calculator

• Description: Image dimension calculator
• Features:
  • Common ratios
  • Custom values
  • Preview
  • Responsive design
• Learning Focus: Mathematical ratios, calculations

88. Stacked Photo Carousel

• Description: 3D photo carousel
• Features:
  • 3D transitions
  • Touch support
  • Custom controls
  • Autoplay option
• Learning Focus: 3D transforms, carousel logic

89. Color Palette Generator

• Description: Create color schemes
• Features:
  • Multiple generation methods
  • Save palettes
  • Export options
  • Color theory info
• Learning Focus: Color theory, pattern generation

90. Weight Loss Tracker

• Description: Weight management application
• Features:
  • Progress tracking
  • Goal setting
  • Data visualization
  • Export data
• Learning Focus: Data tracking, charts

91. Weight Converter

• Description: Weight unit converter
• Features:
  • Multiple units
  • Quick conversion
  • Formula display
  • History log
• Learning Focus: Unit conversion, calculations

92. Country Guide

• Description: Country information viewer
• Features:
  • Country details
  • Flag display
  • Statistics
  • Map integration
• Learning Focus: API integration, data presentation

93. Word Scramble Game

• Description: Word unscrambling game
• Features:
  • Multiple difficulty levels
  • Hint system
  • Score tracking
  • Time challenges
• Learning Focus: Word manipulation, game logic

94. Responsive Vertical Tabs

• Description: A responsive vertical tab system for organizing content.
• Features:
  • Smooth transitions between tabs
  • Mobile-friendly design
  • Customizable tab content
  • Clean and modern user interface
• Learning Focus: Responsive design, CSS transitions, HTML structure

95. Event Calendar

• Description: Event scheduling and management calendar
• Features:
  • Add, edit, and delete events
  • View events by day, week, or month
  • Event reminders
  • Calendar navigation
• Learning Focus: DOM manipulation, date handling, user interface design

96. Story Generator

• Description: Generates random stories based on user input
• Features:
  • Customizable story templates
  • Dynamic user input integration
  • Randomized elements for unique stories
  • Option to save and share stories
• Learning Focus: String manipulation, user input handling, DOM manipulation

97. Digital Signature Maker

• Description: Create your digital signature by drawing or typing
• Features:
  • Draw signatures on a canvas
  • Type signatures with customizable fonts
  • Save and download signatures
  • Color and line width customization
  • Signature preview and storage
• Learning Focus: Canvas manipulation, user input handling, local storage management

98. Virtual Art Gallery

• Description: An interactive virtual art gallery
• Features:
  • Multiple gallery themes
  • Interactive art pieces
  • Information panels with artist details
  • Virtual tours
• Learning Focus: HTML/CSS/JavaScript integration, user interaction, multimedia display

99. Random Choice Picker

• Description: Tool to randomly pick a choice from a list of options
• Features:
  • Easy input of multiple choices
  • Random selection algorithm
  • Clear and reset options
  • Visual display of chosen option
• Learning Focus: Array manipulation, randomization, DOM manipulation

100. Truncate Text App

• Description: A tool to truncate long text strings to a specified length
• Features:
  • Customizable maximum text length
  • Option to add ellipsis at the end of truncated text
  • Real-time text preview
  • User-friendly interface
• Learning Focus: String manipulation, DOM manipulation, user interface design

Getting Started

1. Clone the repository
2. Navigate to desired project folder
3. Open index.html in browser

Technologies Used

• HTML5
• CSS3
• Vanilla JavaScript
• Various Web APIs

Contributing

Feel free to contribute to this project.

---

⭐ Star this repository if you find it helpful! ⭐