A collection of interactive projects built while learning JavaScript fundamentals. Each project demonstrates core concepts like DOM manipulation, event handling, game logic, array methods, and modern JavaScript features.

This repository documents my journey through JavaScript fundamentals via hands-on projects from "The Complete JavaScript Course 2025: From Zero to Expert!" by Jonas Schmedtmann. Each project is built following the course curriculum and reinforces specific concepts while building upon previous knowledge.

Note: These projects are learning exercises completed as part of the course. All project concepts and implementations are based on the course material by Jonas Schmedtmann.

An interactive number guessing game with score tracking and high score persistence.

Key Concepts:

• DOM manipulation and event handling
• Game state management
• Score tracking and persistence
• Conditional logic and user feedback

Live Demo: Try it here

A reusable modal component with keyboard navigation and accessibility features.

Key Concepts:

• DOM element selection and manipulation
• Event listeners (click, keydown)
• CSS class manipulation
• Accessibility best practices

Live Demo: Try it here

A strategic two-player dice game with risk management and turn-based mechanics.

Key Concepts:

• Complex game logic implementation
• Player state management
• Random number generation
• Turn-based gameplay mechanics

Live Demo: Try it here

Exploration of JavaScript's inner workings, including scope, hoisting, and closures.

Key Concepts:

• Scope and scope chain
• Hoisting and Temporal Dead Zone
• The this keyword
• Closures and lexical scoping

Live Demo: Try it here

A deep dive into modern JavaScript data structures and operators using real-world-style problems and challenges.

Key Concepts:

• Destructuring Arrays and Objects
• Spread & Rest Operators
• Short Circuiting and Nullish Coalescing
• Optional Chaining
• Sets and Maps
• String methods (pad, trim, slice, replace, split, join)
• Advanced Looping (for-of, forEach, Object.entries)

Coding Challenges Included:

• Football betting app using Maps and Sets
• camelCase variable transformer
• String formatting and masking logic
• Dynamic flight status formatter

Live Demo: Try it here

Advanced function concepts including higher-order functions, closures, and IIFE.

Key Concepts:

• Default Parameters & Argument Behavior (value vs. reference)
• Callback Functions & Higher-order Functions
• Functions Returning Functions
• call, apply, and bind methods
• Partial Application
• Event Listener Binding with this
• Coding Poll App Challenge
• IIFE (Immediately Invoked Function Expressions)
• Closures in Practice (secure booking, setTimeout)

Coding Challenges Included:

• Poll app using object methods and bind
• Closure-based booking system
• Event listener that retains scope using closure

Live Demo: Try it here

A fully functional banking application demonstrating advanced array methods and data processing.

Key Concepts:

• Array methods (map, filter, reduce, find, some, every)
• forEach with arrays, maps, and sets
• Method chaining and data transformations
• Array sorting and manipulation
• Creating usernames dynamically
• DOM manipulation with dynamic content
• Login authentication system
• Transfer and loan operations

Features:

• User login with PIN validation
• Display account movements and balance
• Money transfer between accounts
• Loan request functionality
• Account closure capability
• Transaction sorting

Live Demo: Try it here

Enhanced Bankist app with internationalization, number formatting, and timer functionality.

Key Concepts:

• Number parsing, converting, and checking (parseInt, parseFloat, isNaN, isFinite)
• Math operations and rounding (Math.round, Math.ceil, Math.floor, Math.trunc)
• Numeric separators and BigInt
• Date creation and manipulation
• Date calculations and operations
• Internationalization API (Intl.NumberFormat, Intl.DateTimeFormat)
• Timers (setTimeout, setInterval)
• Logout timer implementation

New Features:

• International number formatting
• Date localization and formatting
• Automatic logout timer
• Loan approval delays
• Movement date tracking
• Currency formatting by locale

Live Demo: Try it here

A modern, interactive landing page showcasing advanced DOM manipulation and modern web development techniques.

Key Concepts:

• Advanced DOM selection and manipulation
• Event delegation and propagation
• Smooth scrolling implementation
• Intersection Observer API
• Lazy loading images
• Tabbed components
• Modal windows
• Sticky navigation
• Revealing elements on scroll
• Slider component with navigation

Features:

• Smooth page navigation
• Sticky header on scroll
• Lazy-loaded images for performance
• Interactive tabbed content
• Image slider with dots navigation
• Modal account signup form
• Hover effects and animations
• Responsive design elements

Live Demo: Try it here

• Vanilla JavaScript - Pure JS without frameworks
• HTML5 - Semantic markup
• CSS3 - Modern styling and responsive design
• DOM API - Direct browser interaction
• Intersection Observer API - Modern scroll-based animations
• Intl API - Internationalization and localization

1. Clone the repository:

   git clone https://github.com/RahulGotrekiya/js-learning-journey.git
   cd js-learning-journey

2. Open any project:

   # Navigate to a project folder
   cd 01-Guess-My-Number
   
   # Open in your browser
   open index.html

3. Or use a local server:

   # Using Node.js live-server (if installed)
   npx live-server

This repository contains projects completed while following:

🎓 Course: "The Complete JavaScript Course 2025: From Zero to Expert!"
👨‍🏫 Instructor: Jonas Schmedtmann
🌐 Platform: Udemy

All projects are built following the course curriculum and serve as practical implementations of the concepts taught. This is a learning repository where I practice and apply JavaScript fundamentals through guided projects.

Each project targets specific JavaScript concepts taught in the course:

• DOM Manipulation - Selecting, modifying, and creating elements
• Event Handling - User interactions and browser events
• Game Logic - Implementing rules and win conditions
• State Management - Tracking and updating application state
• Function Concepts - Scope, closures, and higher-order functions
• Array Methods - Functional programming with map, filter, reduce
• Modern JS Features - ES6+ syntax and best practices
• Asynchronous JavaScript - Timers and modern APIs
• Internationalization - Multi-language and locale support

• Try to guess the secret number between 1 and 20
• You start with a score of 20
• Each wrong guess reduces your score
• Beat your high score!

• Roll dice to accumulate points
• "Hold" to save your score and pass the turn
• But be careful - rolling a 1 loses all current points!
• First to 100 wins!

• Demo Accounts:
  • Username: js, PIN: 1111 (Jonas Schmedtmann)
  • Username: jd, PIN: 2222 (Jessica Davis)
• Features:
  • View account balance and transaction history
  • Transfer money between accounts
  • Request loans (must have a deposit ≥ 10% of loan amount)
  • Close account with confirmation
  • Sort transactions
  • Auto-logout after inactivity

• Explore the modern landing page
• Smooth navigation between sections
• Interactive tabbed components
• Image slider with testimonials
• Modal account signup form

This repository follows a structured learning path:

• JavaScript Fundamentals
• DOM Manipulation & Events
• Functions Deep Dive
• Behind the Scenes (Scope, Hoisting, Closures)
• Data Structures & Modern Operators
• Working with Arrays
• Numbers, Dates, Timers
• Advanced DOM and Events
• Object-Oriented Programming
• Asynchronous JavaScript

While this is a personal learning repository documenting my progress through Jonas Schmedtmann's JavaScript course, feedback and suggestions are welcome! Feel free to:

• Open issues for bugs or improvements
• Share your own learning journey
• Discuss course concepts and implementations

Note: These projects are educational exercises from "The Complete JavaScript Course 2025" and are not original creations.

This project is open source and available under the MIT License.

• GitHub: @RahulGotrekiya
• LinkedIn: www.linkedin.com/in/rahulgotrekiya

🌟 If you found this helpful, please star the repository! 🌟

Built with ❤️ while learning JavaScript from Jonas Schmedtmann's course

Special thanks to Jonas Schmedtmann for creating "The Complete JavaScript Course 2025: From Zero to Expert!" - an excellent resource for learning JavaScript fundamentals through practical projects.