JavaScript Algorithms and Data Strucures (Beta) - 25 Projects

Live Certification:

JavaScript Algorithms and Data Structures (Beta)

Practice and Built Projects

1.Triangle Pattern Generator

Description: This project generates a triangle pattern using a specified character, with options for regular or inverted patterns.

Topics Covered:

• Variables: Declaring and initializing variables to store pattern details such as the character to use, the number of rows, and whether the pattern is inverted.
• Loops: Utilizing for loops to iterate and construct each row of the pattern.
• Functions: Creating functions to handle the logic for padding and constructing each row of the pattern.
• String Manipulation: Using string methods to repeat characters and concatenate strings to form the desired pattern.
• Conditional Statements: Using conditional statements to determine the order of rows in the pattern.
• Arrays: Using arrays to store and manage rows of the pattern.

2. Rock-Paper-Scissors Game

Description: This project is a simple implementation of the classic game Rock-Paper-Scissors. The player competes against the computer, with the first to reach 3 points declared the winner.

Topics Covered:

• Variables: Declaring and initializing variables to store player scores and the computer's score.
• Functions: Creating functions to generate random computer choices, determine round results, show round outcomes, and reset the game.
• DOM Manipulation: Utilizing JavaScript to interact with HTML elements for displaying scores and round results, as well as handling button clicks.
• Conditional Statements: Using conditional statements to check for round outcomes and end game conditions.
• Event Listeners: Adding event listeners to buttons for player choices and the reset button.

3. Random Background Color Changer

Description: This project randomly changes the background color of a webpage from a predefined array of dark colors whenever a button is clicked.

Topics Covered:

• Variables: Initializing an array to store dark color hex codes.
• Functions: Creating a function to generate a random index within the array length and another function to change the background color.
• DOM Manipulation: Utilizing JavaScript to interact with HTML elements such as the body background and text content.
• Event Handling: Attaching an event listener to a button to trigger the background color change.

4. Student Grade and Passing Status Checker

Description: This program determines a student's grade based on their score and checks if they passed or failed a course. It also provides the class average.

Topics Covered:

• Functions: Creating functions to calculate the class average, determine a student's grade, and check if a student passed the course.
• Conditional Statements: Using conditional statements to assign grades and determine passing status.
• Array Iteration: Iterating through an array to calculate the class average.
• String Concatenation: Combining strings to form messages about the student's grade and passing status.

5. RPG (Role-Playing Game)

Description: Create a text-based RPG adventure game using JavaScript, featuring a player, weapons, monsters, and locations.

Topics Covered:

• Variables: Declaring and initializing variables to store player stats, weapon attributes, and game state.
• Arrays and Objects: Using arrays to store data for weapons, monsters, locations, and inventory. Implementing objects to represent player stats, monster attributes, and location details.
• Functions: Creating functions to handle game logic for actions like buying health and weapons, fighting monsters, and navigating between locations.
• Conditional Statements and Loops: Utilizing conditional statements to control game flow based on player decisions and game state. Incorporating loops for tasks such as iterating over arrays and implementing game mechanics.
• DOM Manipulation (Optional): Optionally incorporating DOM manipulation for user interaction in a web-based RPG.
• Game State Management: Managing the game's state transitions between locations, combat encounters, victory, and defeat screens.
• Random Number Generation: Generating random numbers for gameplay elements such as monster attacks and random events.
• Error Handling: Implementing error handling for scenarios like insufficient gold to purchase items or encountering unexpected game states.

6. Calorie Counter

Description: This project is a simple calorie counter implemented in JavaScript. It allows users to track their daily calorie intake and monitor their budget. The calorie counter dynamically updates the UI based on user input and provides feedback on consumed calories versus the set budget.

Topics Covered

• DOM Manipulation: Interacting with HTML elements to dynamically update the user interface.
• Event Handling: Responding to user actions like clicks and form submissions.
• Form Handling: Processing form submissions and preventing default browser behavior.
• Input Validation: Checking user input for correctness using regular expressions.
• Error Handling: Managing errors and providing feedback to the user.
• Conditional Statements: Making decisions based on certain conditions.
• String Manipulation: Modifying and extracting information from strings.
• Arrays and Loops: Iterating through collections of elements to perform operations.
• Template Literals: Creating HTML strings with embedded variables for dynamic content.
• CSS Manipulation: Adding or removing CSS classes to control element visibility.
• Mathematical Operations: Performing calculations for calorie tracking.
• Encapsulation: Organizing code into reusable functions for clarity and maintainability.

7. Music Player

Description: Code a basic MP3 player with HTML, CSS, and JavaScript. Learn audio playback, playlist management, and UI updates.

Topics Covered:

• DOM Manipulation: Interacting with the DOM to update HTML elements dynamically.
• Event Handling: Responding to user interactions such as button clicks and audio playback events.
• Audio Playback: Using the Audio object to control audio playback, including playing, pausing, and advancing to the next song.
• Array Methods: Utilizing array methods like map, filter, and sort to manipulate and iterate through playlists.
• Dynamic HTML Generation: Generating dynamic HTML content based on playlist data.
• Conditional Rendering: Conditionally rendering UI elements based on the state of the player.
• Accessibility: Implementing accessible features such as aria labels for screen reader compatibility.
• Shuffle Functionality: Implementing a shuffle feature to randomize the playlist order.

8. Date Formatter

Description: Covering JavaScript date methods to format dates.

Topics Covered:

• DOM Manipulation: Interacting with HTML elements to dynamically update the user interface.
• Event Handling: Responding to user actions like changes in dropdown selections.
• JavaScript Date Methods: Utilizing JavaScript's built-in date methods to manipulate and format dates.

9. Football Team Cards

Description: Explore switch statements, default parameters, and array methods with football team cards.

Topics Covered:

• Object Destructuring: Extracting values from an object using destructuring syntax.
• Object Freezing: Freezing an object to prevent its properties from being modified.
• Template Literals: Using template literals to create dynamic HTML content.
• Default Parameters: Providing default values for function parameters.
• Event Handling: Responding to changes in the dropdown list selection using event listeners.
• Array Methods: Utilizing array methods like map, filter, and join to manipulate and iterate through data.
• Switch Statements: Implementing conditional logic based on multiple cases using switch statements.

10. Todo App

Description: Develop a TODO application with features for adding, editing, deleting, and displaying tasks. Utilize local storage for data persistence and form handling for task management.

Topics Covered:

• Form Handling: Implementing form submission and input validation for task creation and update.
• Local Storage: Storing task data locally to maintain state between sessions and browser reloads.
• CRUD Operations: Performing CRUD (Create, Read, Update, Delete) operations on task data.
• DOM Manipulation: Dynamically updating the DOM to display tasks and respond to user interactions.
• Event Handling: Listening for events such as button clicks and form submissions to trigger actions.
• Conditional Rendering: Displaying different UI elements based on certain conditions, such as whether a form is open or closed.
• Modal Dialogs: Using modal dialogs to confirm user actions, such as closing a form with unsaved changes.
• Toggle Functionality: Toggling the visibility of UI elements, such as the task form or confirmation dialog.

11. Decimal to Binary Converter

Description: Build a decimal-to-binary converter using recursion and visualize the process.

Topics Covered:

• Recursion: Implementing a recursive algorithm to convert decimal numbers to binary.
• Event Handling: Handling user input through button clicks and keyboard events.
• DOM Manipulation: Interacting with HTML elements to display results and animations.

12. Number Sorter

Description: Understand sorting algorithms and apply them to numerical data.

Topics Covered:

• Sorting Algorithms: Implementing bubble sort, selection sort, and insertion sort algorithms.
• Array Manipulation: Modifying arrays in-place to sort numerical data.
• Event Handling: Responding to user interactions like button clicks to trigger sorting.
• DOM Manipulation: Updating the UI to display sorted numerical values.
• Functionality: Providing functionality to sort numerical input using different algorithms.

13. Statistics Calculator

Description: Develop a statistics calculator application to perform calculations such as mean, median, mode, range, variance, and standard deviation on a given set of numbers.

Topics Covered:

• Array Methods: Utilizing array methods like reduce, sort, filter, and map for data manipulation and calculation.
• Mathematical Operations: Performing mathematical operations such as addition, subtraction, multiplication, and division to calculate statistical values.
• Error Handling: Implementing error handling to deal with invalid input or edge cases, such as checking for NaN values in the input array.
• Object Methods: Defining methods within objects to encapsulate functionality for calculating statistical values.
• DOM Manipulation: Updating the HTML content dynamically based on calculated statistical values using DOM manipulation methods like querySelector and textContent.
• Regular Expressions: Using regular expressions to split input strings and extract numerical values from user input.

14. Spreadsheet Builder

Description: Implement a spreadsheet application with support for mathematical expressions and interactive interfaces.

Topics Covered:

• Regular Expressions: Using regular expressions to parse and evaluate mathematical expressions.
• Object Methods: Defining methods within objects to perform specific operations, such as evaluating formulas.
• Array Methods: Utilizing array methods like map, filter, and reduce for data manipulation and calculation.
• Conditional Statements: Employing conditional statements to handle different cases, such as even numbers or function calls.
• Event Handling: Adding event listeners to input fields to trigger updates when values change.
• Dynamic Element Creation: Dynamically creating HTML elements using JavaScript based on certain criteria, such as spreadsheet rows and columns.
• Cell References: Implementing functionality to support cell references within formulas, allowing users to refer to other cells in calculations.

15. Spam Filter

Description: Implement a spam filter to detect spam messages using regular expressions.

Topics Covered:

• Regular Expressions: Using regular expressions to define patterns for detecting spam messages.
• Capture Groups: Employing capture groups to match specific patterns within messages.
• Case Insensitivity: Utilizing the i flag to perform case-insensitive matching in regular expressions.
• Array Methods: Using the some method to check if any of the spam patterns match the message.
• Event Handling: Adding event listeners to buttons for checking messages against the spam filter.
• Conditional Statements: Implementing conditional statements to display appropriate messages based on spam detection results.
• Alerts: Displaying alerts to prompt users to enter a message if the input field is empty.

16. Shopping Cart

Description: Implement a shopping cart feature with the ability to add items, view the cart, and calculate totals.

Topics Covered:

• DOM Manipulation: Utilizing the DOM to interact with HTML elements and update the shopping cart display.
• Event Handling: Adding event listeners to buttons for adding items to the cart and toggling the cart display.
• Array Methods: Using array methods like forEach and reduce to iterate over products and calculate totals.
• Classes and Instances: Defining a ShoppingCart class to manage cart operations and creating instances to interact with.
• Conditional Statements: Implementing conditional statements for cart clearing and showing/hiding the cart.
• Template Literals: Utilizing template literals to dynamically generate HTML for product display in the cart.
• Object Destructuring: Extracting properties from product objects using object destructuring for display and calculations.
• Alerts and Confirmations: Displaying alerts and confirmation dialogs for cart clearing and user interaction.
• String Formatting: Formatting prices and totals using string interpolation and toFixed method for displaying currency.

17. Platformer Game

Description: Create a platformer game with HTML canvas, featuring a player, platforms, and checkpoints.

Topics Covered:

• Canvas Drawing: Utilizing the HTML canvas element and its 2D rendering context for graphics.
• Game Loop: Implementing a game loop using requestAnimationFrame() for continuous animation.
• Physics Simulation: Simulating gravity and collision detection for the player and platforms.
• User Input Handling: Responding to keyboard input to move the player character.
• Object-Oriented Programming: Defining classes for the player, platforms, and checkpoints to organize game elements.
• Game State Management: Managing the game's start screen, checkpoint screen, and checkpoint collision detection.
• Proportional Sizing: Dynamically sizing game elements based on the viewport size.

18. Dice Game

Description: Manage game state, implement logic, and update UI for a dice game.

Topics Covered:

• Event Handling: Handling user interactions such as button clicks and input changes.
• DOM Manipulation: Interacting with HTML elements to display game information and updates.
• Array Iteration: Iterating through arrays to perform operations such as updating dice values.
• Conditional Statements: Using conditional statements to control game flow and logic.
• Functions: Defining and using functions to encapsulate reusable pieces of code, such as rolling dice and updating scores.

19. FCC Authors Page

Description: Fetch data and dynamically update the DOM to display authors' information.

Topics Covered:

• Asynchronous JavaScript: Fetching data from an external source asynchronously using fetch.
• DOM Manipulation: Dynamically updating the DOM to display fetched data.
• Error Handling: Handling errors in fetching data and displaying error messages to the user.
• Array Methods: Using array methods like slice and forEach to manipulate and iterate through data.
• Event Handling: Responding to user actions like button clicks to load more data.

20. FCC Forum Leaderboard

Description: Utilize Fetch API, promises, and Async/Await to create a forum leaderboard.

Topics Covered:

• Asynchronous JavaScript: Utilizing the Fetch API and Async/Await for asynchronous data fetching.
• Promises: Handling asynchronous operations and chaining promises to fetch and display data.
• DOM Manipulation: Dynamically updating the DOM to display fetched forum data.
• Error Handling: Handling errors in fetching data and logging them to the console.
• Array Methods: Using array methods like map and join to manipulate and iterate through data.

Certification Projects

21. Palindrome Checker

Description: Implement a palindrome checker that determines whether a word or phrase entered by the user is a palindrome.

Topics Covered:

• Event Handling: Attaching an event listener to a button click for user interaction.
• Input Validation: Ensuring that the input is not empty before proceeding with the palindrome check.
• String Manipulation: Cleaning the input by removing non-alphanumeric characters and converting it to lowercase for consistency.
• Palindrome Check: Reversing the input string and comparing it with the original to determine if it's a palindrome.
• DOM Manipulation: Updating the result displayed on the webpage based on the outcome of the palindrome check.
• Conditional Rendering: Displaying different messages depending on whether the input is a palindrome or not. .

22. Roman Numeral Converter

Description: Develop a Roman numeral converter that converts Arabic numerals (decimal numbers) to their equivalent Roman numeral representation.

Topics Covered:

• DOM Manipulation: Accessing input, button, and output elements from the HTML document to enable user interaction.
• Event Handling: Adding click event listeners to the conversion button for triggering the conversion process.
• Input Validation: Checking if the input is empty or not a valid number before proceeding with the conversion.
• Conditional Logic: Implementing conditional statements to handle different scenarios such as empty input, invalid input, and input out of range.
• Algorithm: Developing the conversion algorithm from decimal numbers to Roman numerals using a predefined mapping of values.
• Function Definition: Declaring a function to encapsulate the conversion logic for reusability.
• Output Display: Updating the output element with the converted Roman numeral representation of the input number.

23. Telephone Number Validator

Description: Create a web application to validate US phone numbers in various formats.

Topics Covered:

• Event Handling: Adding click event listeners to the check and clear buttons for user interaction.
• DOM Manipulation: Accessing input and output elements from the HTML document to display results.
• Input Validation: Checking if the user input is empty or follows the format of a valid US phone number.
• Regular Expressions: Utilizing regular expressions to define patterns for valid US phone numbers.
• Function Definition: Declaring functions to validate and format US phone numbers for reuse and maintainability.
• Output Display: Updating the output element with the validation results and the formatted phone number if valid.

24. Cash Register

Description: Develop a cash register application to calculate change based on the provided cash.

Topics Covered:

• Variables and Constants: Declaring and initializing variables for price, cash given, and currency units.
• Objects: Creating an object currencyUnits to store the value of each currency denomination.
• Function Definition: Defining a function checkCashRegister to calculate the change due based on the price, cash given, and cash in the drawer.
• Conditional Statements: Using conditional statements to determine the status of the cash register (INSUFFICIENT_FUNDS, CLOSED, or OPEN).
• Loops: Iterating through the cash in the drawer to calculate the change due.
• Event Handling: Adding a click event listener to the purchase button to trigger the calculation of change.
• DOM Manipulation: Updating the output element with the status and details of the change due.

25. Pokémon Search App

Description: This app allows users to search for Pokémon using the PokéAPI. It fetches data about the Pokémon based on the user's input and displays various details such as name, ID, weight, height, and stats.

Key Features:

• Search Functionality: Users can enter the name or ID of a Pokémon to search for.
• Display Pokémon Details: The app displays details such as name, ID, weight, height, and stats (HP, attack, defense, special attack, special defense, and speed) of the searched Pokémon.
• Handle Specific Pokémon: The app handles specific Pokémon like Pikachu and Gengar, providing their predefined details.

Topics Covered:

• Event Handling: Adding a click event listener to the search button to trigger the search functionality.
• Fetching Data: Using the Fetch API to retrieve data from the PokéAPI based on the user's input.
• Error Handling: Handling errors if the Pokémon is not found or if there is an issue with the API request.
• DOM Manipulation: Updating the DOM to display Pokémon details dynamically based on the fetched data.
• Conditional Statements: Checking specific conditions to handle Pikachu and Gengar differently.