Welcome to my JavaScript DSA Challenge! This journey is designed to learn Data Structures and Algorithms concepts through engaging and creative web applications. Each day, I'll be working on a new project to reinforce my understanding of fundamental programming concepts in JavaScript. This repository serves as a record of my daily progress as I build various projects from scratch to enhance my understanding of programming concepts using JavaScript.
In this initial practice project, I've decided to create a Role Playing Game (RPG). An RPG is a game in which players assume the roles of characters in a fictional setting. Players take responsibility for acting out these roles within a narrative, either through literal acting or through a process of structured decision-making regarding character development.
The goal of this project is to learn and reinforce fundamental programming concepts in JavaScript by crafting my RPG from scratch. Throughout this project, I will be working with a variety of concepts, including:
- Arrays
- Strings
- Objects
- Functions
- Loops
- If/else statements
By developing an RPG, I aim to not only enhance my coding skills but also to create a dynamic and interactive experience that incorporates the essence of storytelling within a game.
🌈 Day-1 Project Screenshots Explore the live project here.
In the Day 2 project, I extended my coding practice by creating a Calorie Counter application. The purpose of this project is to apply and reinforce fundamental programming concepts in JavaScript while building a dynamic and interactive Calorie Counter. Throughout this project, I will be working with a variety of concepts, including:
Purpose: Ensure valid user input.
Key Concepts:
- Regular Expressions
- Input Sanitization
Purpose: Provide real-time feedback to users.
Key Concepts:
- DOM Manipulation
- Template Literals
Purpose: Respond to user interactions.
Key Concepts:
- addEventListener()
- Event Object
Purpose: Derive meaningful results from user input.
Key Concepts:
- Mathematical Operations
- Conditional Statements
Purpose: Allow users to start fresh.
Key Concepts:
- Reset Function
- Class Manipulation
Purpose: Develop a user-friendly application.
Key Concepts:
- CSS Styling
- User Feedback
Purpose: Apply fundamental JavaScript concepts.
Key Concepts:
- Arrays
- Strings
- Objects
- Functions
- Loops
- If/else statements
Purpose: Define a logical flow for the application.
Key Concepts:
- Sequence of Actions
Purpose: Inform users and handle errors.
Key Concepts:
- alert()
- Error Flags
The Calorie Counter application allows users to input their daily calorie budget, and track calories consumed during breakfast, lunch, dinner, snacks, and calories burned through exercise. The application calculates the remaining calories and provides a summary of the user's budget, consumed calories, and burned calories.
Explore the live project here
In the Day 3 project, I will be creating a basic MP3 player using HTML, CSS, and JavaScript. The project will cover essential string and array methods like find(), forEach(), map(), and join(). These methods are crucial for developing dynamic web applications.
- Handling audio playback
- Managing a playlist
- Implementing play, pause, next, previous, and shuffle functionalities
- Dynamically updating the user interface based on the current song
Explore the live project here.
In the Day 4 project, I focused on working with dates in JavaScript, tackling the challenges of navigating various methods, formats, and time zones. The goal of this project is to enhance my understanding of the JavaScript Date object, including its methods and properties. Additionally, I aimed to master the art of correctly formatting dates.
- JavaScript Date object
- Date methods: getDate(), getMonth(), getFullYear()
- Formatting dates
- Handling time zones
I used the JavaScript Date object to get the current date, including the day, month, and year.
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1; // Note: Months are zero-based
const year = currentDate.getFullYear();Explore the live project here.
In the Day 5 project, I tackled the Palindrome Checker challenge, building a web application to determine whether a given input is a palindrome. A palindrome is a word or phrase that reads the same forward and backward, ignoring punctuation, case, and spacing.
- String Manipulation
- Conditional Statements
- DOM Manipulation
I employed various string manipulation techniques to remove non-alphanumeric characters, convert all characters to the same case, and check for palindromes.
Utilizing conditional statements, I determined whether the input is a palindrome or not and updated the user interface accordingly.
The results were dynamically displayed on the webpage using DOM manipulation, providing real-time feedback to the user.
Explore the live project here.
In this Day-6 project, we're diving into the world of football cards. The goal is to create a web application that processes football team data and dynamically displays player information. You'll work on handling events, manipulating the Document Object Model (DOM), and filtering data based on specific criteria.
- Object Destructuring
- Event Handling
- Data Filtering
- Switch Statements
- Default Parameters
Learn how to efficiently extract values from objects using object destructuring. This skill will be crucial in extracting player information from the football team dataset.
Implement event handling to respond to user interactions. This will allow users to trigger actions like viewing detailed player information or applying filters.
Explore techniques to filter and display specific subsets of football player data. This involves creating a responsive interface that dynamically updates based on user preferences.
Understand how to use switch statements and default parameters for efficient and structured code. These concepts will be applied in various aspects of the project for better control flow.
Discover how to make objects immutable using Object.freeze() and utilize the map() method for transforming data. These techniques will contribute to building a robust and scalable application.
Visualize the live project here.
In this project, we'll dive into creating a TODO application that harnesses the power of local storage. You'll learn how to handle form inputs, manage data persistently, and perform CRUD operations on tasks. The focus will be on implementing event listeners and toggling UI elements to enhance user experience.
- Form Input Handling
- Local Storage Management
- CRUD Operations (Create, Read, Update, Delete)
- Event Listeners
- UI Element Toggling
Explore the process of capturing and processing user input from a form. Understand how to extract information efficiently and use it to create new tasks in the TODO list.
Learn to utilize local storage to store and retrieve TODO tasks persistently. This will enable users to access their tasks even after closing and reopening the web application.
Implement Create, Read, Update, and Delete operations on TODO tasks. Users will have the ability to add new tasks, mark them as completed, edit existing tasks, and remove tasks from the list.
Implement event listeners to respond to user actions effectively. This includes triggering actions such as task creation, completion, editing, and deletion.
Enhance the user interface by dynamically toggling elements based on the application's state. This will provide a seamless and intuitive user experience.
View the live project here.
In this project, you will be diving into the fascinating world of recursion. Recursion is a programming concept where a function calls itself, allowing you to break down a complex problem into simpler sub-problems. The goal is to build a decimal-to-binary converter using JavaScript. This project will not only enhance your understanding of recursion but also provide insights into the call stack and allow you to visualize the recursion process through an animation.
-
Recursion Fundamentals: You'll delve into the fundamentals of recursion, understanding how a function can call itself to solve a problem.
-
Decimal-to-Binary Conversion: The main objective is to create a converter that takes a decimal number as input and outputs its binary representation.
-
Visual Representation: Through the use of animations, you will visually represent the recursion process. This adds an extra layer to your learning by making abstract concepts more tangible.
-
SetTimeout Function: You'll utilize the
setTimeoutfunction to create a step-by-step animation, allowing you to observe the changes in the call stack. -
Call Stack Exploration: Gain insights into the call stack, understanding how it behaves during recursive function calls.
-
Stack Methods: Explore and use stack-related methods to manage the recursion process effectively.
Explore the live project here.
- JavaScript
- Recursion
setTimeoutfunction- Call stack
- Stack methods
- Clone this Repository:
git clone https://github.com/dadihemasri/Javascript-DSA-challenge.git
javascript-dsa-challenge/
|-- Day-1_Role_Playing_Game/
|-- index.html
|-- script.js
|-- styles.css
|-- Day-2_Next_Project/
|-- ...
|-- Day-3_Another_Project/
|-- ...
|-- ...
Stay tuned for daily updates as I add new projects to this repository. Each project is crafted to build on the concepts I've learned, providing a comprehensive learning experience in JavaScript and Data Structures/Algorithms.
If you have any questions or suggestions, feel free to reach out:
- Email: [dadihemasri1202@gmail.com]
- LinkedIn: [https://www.linkedin.com/in/dadihemasri/]
Happy coding! 🎉