This repository contains my solutions and projects from the freeCodeCamp JavaScript Algorithms and Data Structures certification course.
The Football Team Cards project dynamically displays information about Argentina’s 1986 World Cup-winning squad. Using a combination of DOM manipulation, modern JavaScript features, and event handling, this project shows how to process structured data and render it interactively on a web page.
Key Features
- Hardcoded dataset: Player and coach details are stored in a frozen object (Object.freeze() ensures immutability).
- Destructuring: The team, sport, year, and coach values are extracted using object destructuring for readability.
- Dynamic rendering: Player cards are created with the map() method and displayed in the DOM.
- Filtering with dropdown menu: Users can filter players by position (forward, midfielder, defender, goalkeeper) or by those with a nickname.
- Default parameters: The setPlayerCards() function uses a default argument to show all players when no filter is selected. -Switch statement: The dropdown is handled with a switch to select and filter different player groups.
What I learned
- The importance of immutability in data structures with Object.freeze().
- Writing cleaner code with object destructuring and default function parameters.
- Creating dynamic, interactive UI elements with event listeners and filtering logic.
- Using modern JavaScript methods (map(), filter()) to transform data.
This project focuses on working with dates in JavaScript.
What I learned:
- How to create and manipulate Date objects
- How to extract and set specific parts of a date
- How to calculate time differences
- The difference between input and change events
- How to use switch statements for multiple conditions
- How to split strings into arrays and reverse arrays or strings
A simple interactive Rock-Paper-Scissors web game built with HTML, CSS, and JavaScript. Players can select Rock, Paper, or Scissors, compete against a computer with random choices, and see the scores update in real-time. The game ends when either the player or the computer reaches 3 points, and includes a reset button to start a new game.
Features:
- Dynamic score tracking for player and computer
- Randomized computer moves
- Win, lose, and tie messages displayed after each round
- Reset functionality to restart the game
A web app where users enter their daily calorie goal and the calories they’ve eaten for each meal. The program totals the calories, compares them to the goal, and displays whether the user is in a surplus or deficit.
What I Learned
- Connecting HTML form inputs to JavaScript to collect and process user data
- Converting input values from strings to numbers for calculations
- Using arithmetic operations and the ternary operator for conditional output
- Dynamically updating the DOM to display results
- Controlling element visibility with the classList property
- Structuring a simple user input → logic → output flow in a web app
A web app where user can listen music from the list of tracks.
What I Learned
- Web Audio API – working with audio in the browser
- JavaScript features: Spread operator (...), Arrow functions (=>), Optional chaining (?.)
- Array methods: map(), forEach(), filter(), find(), sort(), indexOf(), join()
- Callbacks – passing functions as arguments
- DOM manipulation: textContent, innerText vs createTextNode(), createElement(), appendChild(), setAttribute()
A simple web application built with JavaScript, HTML, and CSS that checks whether an input value is a palindrome. It ignores punctuation, spaces, and capitalization to accurately detect palindromes.
This project was completed as the final assignment for the first part of the JavaScript Algorithms and Data Structures course.