JavaScript Algorithms and Data Structures

freeCodeCamp (Beta) · 25 Projects · Fully Certified

A comprehensive, project-driven curriculum covering core JavaScript fundamentals, algorithms, data structures, asynchronous programming, and object-oriented design through 25 real-world builds.

"From loops and functions to async APIs and sorting algorithms — every concept applied immediately through a real, working project."

🔗 View Live Certification

Overview  •  Skills  •  Projects  •  Certification Projects  •  Tech Stack

This repository contains all 25 projects completed as part of the freeCodeCamp JavaScript Algorithms and Data Structures (Beta) certification — a hands-on, project-first curriculum designed for engineers who learn by building.

Unlike theory-heavy courses, every concept in this curriculum is introduced through a real project — from string manipulation and sorting algorithms in the early stages, through DOM interaction, local storage, OOP with classes, recursion, regular expressions, and asynchronous data fetching in the later stages.

The final five certification projects were independently scoped and built to meet freeCodeCamp's automated technical specification tests — demonstrating production-aware JavaScript programming skills.

Algorithmic pattern generation using loops, arrays, and string manipulation.

Generates a customizable triangle pattern using a specified character — supports both regular and inverted orientations. A clean exercise in breaking down a visual output into algorithmic steps.

Key Skills: for loops · Array construction · String .repeat() · Conditional logic · Function decomposition

Classic game implementation with score tracking and DOM-driven UI.

A fully playable Rock-Paper-Scissors game where the player competes against the computer. Tracks scores, determines round results, announces winners, and resets the game — all driven by JavaScript and event listeners.

Key Skills: Random number generation · Conditional logic · Score state management · DOM updates · Event listeners · Reset functionality

Event-driven UI interaction with array-based color selection.

Randomly selects a background color from a curated array of dark hex codes on every button click. A focused exercise in event handling, array indexing, and dynamic CSS manipulation via JavaScript.

Key Skills: Array indexing · Math.random() · addEventListener · DOM style manipulation · Function separation

Data processing logic — averages, grades, and pass/fail determination.

Calculates a class average from an array of scores, assigns a letter grade based on thresholds, and determines whether the student passed or failed. Demonstrates clean function composition for data processing.

Key Skills: Array iteration · Average calculation · Conditional grading logic · String concatenation · Function composition

Text-based adventure game with full game state management.

A complete text-based RPG featuring locations, monsters, weapons, inventory, combat, health management, and random events. One of the most architecturally complex projects in the curriculum — applying nearly every core JS concept simultaneously.

Key Skills: Arrays and objects · Nested data structures · Game state transitions · Random number generation · DOM manipulation · Error handling · Combat mechanics

Form-driven calorie tracking app with real-time budget feedback.

A dynamic calorie counter that allows users to log meals, set a daily calorie budget, and receive real-time feedback on surplus or deficit. Validates input using regular expressions and provides visual feedback through CSS class toggling.

Key Skills: Form handling · Input validation with regex · Template literals · CSS class manipulation · parseInt / mathematical operations · Error feedback UI · Encapsulated function design

Fully functional MP3 player with playlist management and shuffle.

A complete audio player featuring play, pause, skip, previous, shuffle, and delete functionality. Manages a dynamic playlist using array methods and updates the UI in real time based on audio events.

Key Skills: Audio object API · map, filter, sort array methods · Event-driven UI · Dynamic HTML generation · Shuffle algorithm · ARIA accessibility labels · Conditional rendering

JavaScript Date API — formatting and display based on user selection.

A utility tool that formats a JavaScript Date object into multiple output formats based on dropdown selection. Demonstrates the full JavaScript Date API and event-driven UI updates.

Key Skills: Date object methods · getFullYear, getMonth, getDate · Dropdown event handling · String formatting · Dynamic DOM updates

Data rendering with switch statements, destructuring, and array filtering.

Renders football player cards from a data object, with filtering by position via a dropdown. Implements Object.freeze() for immutable data, default parameters, and switch-based conditional rendering.

Key Skills: Object destructuring · Object.freeze() · Default function parameters · switch statements · filter and map · Template literals · Dropdown event handling

Full CRUD task manager with local storage persistence.

A complete task management application supporting create, read, update, and delete operations. Uses localStorage to persist tasks between browser sessions, and implements modal dialogs for confirming unsaved changes.

Key Skills: CRUD operations · localStorage · Form handling and validation · DOM manipulation · Event delegation · Modal dialog logic · Toggle UI state · Conditional rendering

Recursive algorithm with step-by-step visual animation.

Converts a decimal number to binary using a recursive function, then animates the recursive call stack visually using setTimeout-based sequencing. One of the most conceptually rich projects in the curriculum.

Key Skills: Recursion · setTimeout animation sequencing · DOM manipulation · Keyboard event handling · Algorithm visualization · Edge case handling (0 and 1)

Sorting algorithm comparison — Bubble, Selection, and Insertion Sort.

Implements three classic sorting algorithms from scratch and applies them to user-provided numerical input. Demonstrates the mechanics of each algorithm with real data and updates the UI with the sorted result.

Key Skills: Bubble sort · Selection sort · Insertion sort · In-place array manipulation · Algorithm comparison · Dropdown event handling · DOM updates

Statistical analysis — mean, median, mode, range, variance, and standard deviation.

A statistical calculation tool that accepts a list of numbers and computes six statistical measures. Implements all calculations using functional array methods and updates the UI dynamically with each result.

Key Skills: reduce, sort, filter, map · Mathematical operations · Mode with frequency counting · Standard deviation formula · Regular expressions for input parsing · Error handling for invalid input

Mini spreadsheet engine with formula parsing and cell references.

A functional spreadsheet application supporting basic mathematical expressions and cross-cell formula references (e.g., =SUM(A1:B3)). Parses formulas using regular expressions and evaluates them dynamically.

Key Skills: Regular expressions for formula parsing · eval-safe expression evaluation · Cell reference resolution · Dynamic element creation · map, filter, reduce · Event-driven cell updates · Object methods as formula functions

Regex-powered spam detection engine.

Detects spam messages using a library of regular expression patterns. Tests user-submitted text against multiple patterns using the some() array method — a focused study in practical regex design.

Key Skills: Regular expressions · Capture groups · Case-insensitive i flag · Array.some() · Event handling · Conditional feedback display · Defensive input validation

Class-based shopping cart with totals, display, and cart management.

A shopping cart implementation using ES6 class syntax. Supports adding items, viewing cart contents, calculating totals, and clearing the cart — with confirmation dialogs for destructive actions.

Key Skills: ES6 class and instance methods · forEach and reduce · Object destructuring · Template literals · toFixed() for currency formatting · Toggle cart display · Alert and confirm dialogs

Canvas-based 2D platformer with physics, collision detection, and checkpoints.

A fully playable platformer game built on the HTML <canvas> element. Features a player character, platforms, gravity simulation, keyboard controls, checkpoint system, and a game loop driven by requestAnimationFrame.

Key Skills: HTML Canvas 2D API · requestAnimationFrame game loop · Gravity and velocity simulation · Collision detection · Keyboard input handling · OOP with Player, Platform, and Checkpoint classes · Viewport-proportional sizing · Game state management

Yahtzee-style dice game with round logic and score tracking.

A multi-round dice game where players roll five dice, select scoring categories, and accumulate points. Manages full game state — current dice values, rounds remaining, and cumulative score — with UI updates on every interaction.

Key Skills: Array iteration · Random dice generation · Conditional game logic · Round and score state management · DOM manipulation · Reusable helper functions · Event handling

Async data fetching with progressive load-more pagination.

Fetches author data from freeCodeCamp's API using the Fetch API and renders author cards dynamically. Implements a "Load More" button using Array.slice() for paginated display without a full page reload.

Key Skills: fetch() API · async/await · Error handling with try/catch · slice() for pagination · forEach DOM rendering · Progressive data loading · Error message display

Live forum leaderboard powered by the freeCodeCamp API.

Fetches real-time forum topic data from freeCodeCamp's Discourse API and renders a ranked leaderboard table. Uses Promises and Async/Await for clean asynchronous control flow.

Key Skills: fetch() API · Promises · async/await · map and join for rendering · Dynamic table generation · Error handling and console logging · Real-time data display

The following five projects were independently designed and built to satisfy freeCodeCamp's official certification requirements. Each was submitted against a defined set of automated user story tests.

Brief: Build an application that checks whether a user-entered word or phrase is a palindrome.

A clean, validated palindrome checker that strips non-alphanumeric characters, normalizes case, reverses the cleaned string, and compares it to the original — providing clear, accessible result feedback.

Demonstrates: String manipulation pipeline · Regex application · Defensive input validation · Clean conditional logic

Brief: Build a converter that transforms Arabic decimal numbers into Roman numeral notation.

A complete Roman numeral converter with full input validation. Uses a predefined value-to-symbol mapping array and a greedy subtraction algorithm to build the correct Roman numeral for any integer from 1 to 3999.

Demonstrates: Algorithm design · Lookup table pattern · Greedy algorithm · Robust input validation · Clean function encapsulation

Brief: Build a US phone number validator that accepts multiple valid formats.

Validates US telephone numbers in all commonly accepted formats using a single regular expression. Supports formats with and without country code, with parentheses, hyphens, and spaces.

Demonstrates: Practical regex design · Multi-format pattern matching · Clean UI interaction · Defensive validation strategy

Brief: Build a cash register that calculates and returns change using available drawer currency.

A fully functional cash register that calculates the exact change to return, using bills and coins from the cash drawer. Handles three distinct states: sufficient change available (OPEN), exact cash-out (CLOSED), and insufficient funds (INSUFFICIENT_FUNDS).

Demonstrates: Greedy algorithm in financial context · Floating point handling · Multi-state output logic · Object-based denomination mapping

Brief: Build an application that fetches and displays Pokémon data from a live public API.

A fully functional Pokémon search tool that queries the PokéAPI by name or ID, then renders complete Pokémon details — name, ID, weight, height, sprite image, and all six base stats — in a clean, dynamic UI.

Demonstrates: Live REST API integration · async/await data fetching · Dynamic DOM rendering · Graceful error handling · Responsive data display

The freeCodeCamp JavaScript Algorithms and Data Structures certification demonstrates practical JavaScript competency across the full breadth of the language:

• Core JavaScript mastery — variables, functions, scope, closures, loops, and conditionals applied in real projects
• Data structures in practice — arrays, objects, nested structures, and localStorage used to solve real problems
• Algorithm implementation — sorting algorithms, recursion, greedy algorithms, and string processing built from scratch
• DOM and event-driven programming — interactive UIs driven entirely by JavaScript without frameworks
• Regular expressions — practical regex applied to input validation, spam detection, and formula parsing
• Object-oriented JavaScript — ES6 classes, instances, destructuring, and default parameters
• Asynchronous JavaScript — fetch, Promises, and async/await used to integrate live public APIs
• Project delivery — five independently scoped projects meeting defined automated technical specifications

javascript-algorithms-data-structures/
│
├── 01-triangle-pattern-generator/
├── 02-rock-paper-scissors/
├── 03-random-background-color-changer/
├── 04-student-grade-checker/
├── 05-rpg-adventure-game/
├── 06-calorie-counter/
├── 07-music-player/
├── 08-date-formatter/
├── 09-football-team-cards/
├── 10-todo-app/
├── 11-decimal-to-binary-converter/
├── 12-number-sorter/
├── 13-statistics-calculator/
├── 14-spreadsheet-builder/
├── 15-spam-filter/
├── 16-shopping-cart/
├── 17-platformer-game/
├── 18-dice-game/
├── 19-fcc-authors-page/
├── 20-fcc-forum-leaderboard/
│
├── 21-palindrome-checker/           ← Certification Project
├── 22-roman-numeral-converter/      ← Certification Project
├── 23-telephone-number-validator/   ← Certification Project
├── 24-cash-register/                ← Certification Project
├── 25-pokemon-search-app/           ← Certification Project
│
└── README.md

Each folder contains an index.html, styles.css, and script.js. All projects run directly in the browser with no build tools, bundlers, or external dependencies.

# Clone this repository
git clone https://github.com/NarendraKoya999/freeCodeCamp-JavaScript-Projects.git

# Navigate into any project folder
cd freeCodeCamp-JavaScript-Projects/Dice Game

# Open in your browser
open index.html

# Recommended: use VS Code Live Server extension for the best development experience