๐๐๐ฒ ๐๐ of 100DaysOfCode
The Age Calculator takes a userโs date of birth and calculates their exact age in years, months, and days. Itโs a simple yet practical tool that showcases date manipulation and calculation in JavaScript.
I learned in this project about the date class and how to handle various date formats.
๐๐๐ฒ ๐๐ of 100DaysOfCode
The Circular Progress Bar visually represents progress or completion status using a circular graphic. This type of progress bar is commonly used in dashboards, fitness trackers, and more.
I learned how to create circular shapes and animations using CSS and SVG (using stroke and stroke-dasharray to animate the SVG), dynamically update the progress value with JavaScript, and implement smooth transitions and animations for visual appeal.
Additionally, I tackled handling edge cases to ensure the progress bar functions correctly at all values.
๐๐๐ฒ ๐๐ of #100DaysOfCode
The Toast 
or Snackbar 
Notification is a small, temporary pop-up message that appears at the bottom or top of the screen to inform users of an event or action. Itโs a subtle way to provide feedback without interrupting the user experience.
Today, I focused on creating a responsive and animated toast notification using HTML, CSS, and JavaScript. I explored different ways to trigger the notification, control its duration, and apply smooth fade-in and fade-out effects. Additionally, I learned how to handle multiple notifications and ensure they stack correctly without overlapping.
๐๐๐ฒ ๐๐ of #100DaysOfCode
Today, I built a Drag and Drop interface that allows users to move elements around on the page with a simple drag action. This feature is commonly used in interactive lists, image galleries, and customizable dashboards to enhance user experience.
I learned how to implement drag-and-drop functionality using the native HTML5 Drag and Drop API, combined with JavaScript to handle drag events. I also explored how to create smooth and intuitive interactions, manage drop zones, and ensure that elements are placed correctly after being dropped. Additionally, I worked on improving the visual feedback during the drag process to make the interface more user-friendly.
๐๐๐ฒ ๐๐ of #100DaysOfCode
Today, I developed a classic Tic Tac Toe game where two players can compete to get three in a row. Itโs a fun project that combines logic, strategy, and interactive gameplay.
I learned how to implement the game logic for detecting wins, losses, and draws, as well as how to dynamically update the game board using JavaScript. I also explored techniques for resetting the game, tracking player turns, and enhancing the user interface to make the game more engaging. It was a great exercise in structuring code for clarity and reusability.
๐๐๐ฒ ๐๐ of #100DaysOfCode 
I built a Spin Wheel game today where users can spin the wheel to land on random values that might represent prizes or outcomes. To create the spin wheel, I leveraged Chart.js, a powerful JavaScript library that simplifies the process of creating various types of charts and visualizations.
I learned how to use Chart.js to create a visually appealing spin wheel, taking advantage of its pie chart functionality to represent the different segments. I explored customizing the chart to rotate and simulate spinning, as well as adding animations and interactivity to make the experience more engaging. Integrating Chart.js into this project made it easier to handle the visual aspects, allowing me to focus more on the game logic and user experience.
๐๐๐ฒ ๐๐ of #100DaysOfCode
I built an Image Comparison Slider today, a tool that allows users to compare two images by sliding a handle back and forth. This type of slider is commonly used to highlight before-and-after scenarios, such as in photo editing or product comparisons.
I learned how to implement a draggable slider using JavaScript to control the width of the images dynamically. I also explored techniques for creating a smooth and responsive sliding experience, ensuring the images align correctly as the user interacts with the slider. This project was a great exercise in combining CSS for layout and JavaScript for interactivity.
๐๐๐ฒ ๐๐ of #100DaysOfCode
I created a Hangman game today, a classic word-guessing challenge where players try to figure out a hidden word by guessing letters. With each incorrect guess, a part of the hangman figure is drawn, and the game ends if the figure is fully drawn before the word is guessed.
I learned how to implement game logic for tracking correct and incorrect guesses, updating the displayed word, and managing the state of the hangman figure. I also explored ways to make the game more interactive by adding visual feedback for the player. This project was a fun dive into creating a simple yet engaging game with JavaScript.
๐๐๐ฒ ๐๐ of #100DaysOfCode
I built an Alarm App today that allows users to set multiple alarms with custom times. This feature-rich app lets you schedule various alarms for different tasks throughout the day, ensuring you stay on top of your schedule.
I learned how to work with the JavaScript ๐๐ข๐ต๐ฆ object to track time and trigger alarms accurately. By comparing the current time with the set alarm times, I was able to implement a system that efficiently handles multiple alarms without relying on timers like ๐ด๐ฆ๐ต๐๐ช๐ฎ๐ฆ๐ฐ๐ถ๐ต or ๐ด๐ฆ๐ต๐๐ฏ๐ต๐ฆ๐ณ๐ท๐ข๐ญ. This approach provided a deeper understanding of date and time manipulation in JavaScript.
๐๐๐ฒ ๐๐ of #100DaysOfCode
I developed a Sliding Image Puzzle today, where users can rearrange pieces of an image by sliding them into the correct position to complete the picture. Itโs a fun and challenging game that tests both logic and spatial reasoning.
I learned how to break an image into smaller pieces and manage their positions using JavaScript. I implemented logic for detecting valid moves and ensuring that only adjacent pieces can slide into the empty space. This project also gave me the opportunity to work on enhancing the user interface, making the puzzle visually appealing and intuitive to interact with.
๐๐๐ฒ ๐๐ of #100DaysOfCode
-This time, I created a Minesweeper game! 
A classic puzzle game where players uncover cells on a grid while avoiding hidden mines. The goal is to clear the board without detonating any mines, using numbered clues to determine the locations of the mines.
I learned a lot when creating this complex game, from implementing game logic for generating a randomized grid with mines and numbers, to managing game states.
A feature thatโs ๐ฃ๐ค๐ฉ ๐๐ข๐ฅ๐ก๐๐ข๐๐ฃ๐ฉ๐๐ yet:
โ Right clicking to add a flag that marks the cell as a potential mine and stops you from accidentally clicking on the cell.
Feel free to try the game and give some feedback. 
๐๐๐ฒ ๐๐ of #100DaysOfCode
Node.js is a game-changer for developers who want to build fast, scalable applications. With its asynchronous, event-driven architecture and non-blocking I/O, Node.js handles multiple operations with ease, making it perfect for real-time applications like chat apps and online games.
๐ช๐ต๐ฎ๐ ๐ถ๐ ๐ก๐ผ๐ฑ๐ฒ.๐ท๐?
Node.js is a runtime environment that allows you to execute JavaScript code outside of a web browser. Itโs built on the V8 JavaScript engine, which is the same engine that powers Google Chrome, making it incredibly fast and efficient.
~Here are some key points about Node.js:
->๐๐ฌ๐ฒ๐ง๐๐ก๐ซ๐จ๐ง๐จ๐ฎ๐ฌ ๐๐ง๐ ๐๐ฏ๐๐ง๐ญ-๐๐ซ๐ข๐ฏ๐๐ง:
Node.js is designed to handle many operations at once. Instead of waiting for tasks to complete, it moves on to other tasks and deals with the results when theyโre ready. This makes it highly efficient for I/O-heavy tasks.
->๐๐จ๐ง-๐๐ฅ๐จ๐๐ค๐ข๐ง๐ ๐/๐:
This feature allows Node.js to handle multiple connections at the same time without the need to create a new thread for each connection, making it lightweight and scalable.
->๐๐ข๐ง๐ ๐ฅ๐-๐๐ก๐ซ๐๐๐๐๐:
Despite being able to handle multiple operations concurrently, Node.js uses a single thread to process tasks. This might seem counterintuitive, but thanks to its event-driven architecture, it can manage thousands of connections at once.
->๐๐ซ๐จ๐ฌ๐ฌ-๐๐ฅ๐๐ญ๐๐จ๐ซ๐ฆ:
Node.js is compatible with various operating systems, including Windows, Linux, and macOS.
->๐๐ข๐๐ก ๐๐๐จ๐ฌ๐ฒ๐ฌ๐ญ๐๐ฆ:
The Node Package Manager (npm) offers a vast collection of libraries and tools, making development faster and easier.
If youโre exploring backend development, Node.js is definitely worth your time. Itโs cross-platform, powerful, and widely used in the industry.
๐๐๐ฒ ๐๐ of #100DaysOfCode
Whether youโre just starting out or scaling up a project, the way you structure your files and folders in Node.js can make or break your development process. Hereโs why it matters:
โ ๐๐๐ข๐ง๐ญ๐๐ข๐ง๐๐๐ข๐ฅ๐ข๐ญ๐ฒ: A clean and logical structure helps you quickly locate files, making updates and debugging more efficient.
โ ๐๐๐๐ฅ๐๐๐ข๐ฅ๐ข๐ญ๐ฒ: A clear structure supports the growth of your project. When adding new features or modules, a well-organized directory system allows for seamless integration without cluttering your codebase.
โ ๐๐จ๐ฅ๐ฅ๐๐๐จ๐ซ๐๐ญ๐ข๐จ๐ง: Working with a team? A standardized file structure ensures everyoneโs on the same page. It reduces onboarding time for new developers and makes code reviews more efficient.
โ ๐๐๐ฌ๐ญ ๐๐ซ๐๐๐ญ๐ข๐๐๐ฌ: Following conventions like placing controllers, models, and routers in their respective directories not only keeps your project clean but also aligns with industry standards, making your project easier to understand for others.
โ ๐๐ซ๐ซ๐จ๐ซ ๐๐๐๐ฎ๐๐ญ๐ข๐จ๐ง: Properly organizing your files helps in avoiding circular dependencies, incorrect imports, and other common errors that can arise from a disorganized codebase.
Organizing your project isnโt just about aestheticsโitโs about creating a solid foundation for sustainable development.
๐๐๐ฒ ๐๐ of #100DaysOfCode
If youโre working with Node.js and MongoDB, understanding Mongoose schemas is crucial for creating robust and scalable applications. Mongoose schemas act as blueprints, defining the structure and rules for your data.
๐๐๐ฒ ๐
๐๐๐ญ๐ฎ๐ซ๐๐ฌ:
โ ๐
๐ข๐๐ฅ๐ ๐๐ฒ๐ฉ๐๐ฌ: Define the data types of each field (String, Number, Date, etc.).
โ ๐๐๐ฅ๐ข๐๐๐ญ๐ข๐จ๐ง: Enforce rules like required fields, value limits, and custom logic.
โ ๐๐ง๐๐๐ฑ๐๐ฌ: Improve query performance with schema-defined indexes.
โ ๐๐ข๐ซ๐ญ๐ฎ๐๐ฅ๐ฌ: Virtuals are fields that donโt get persisted to the database but can be used in code, often for computed properties.
โ ๐๐๐ญ๐ก๐จ๐๐ฌ: Custom instance methods can be added to the schema to perform operations on documents.
The attached schema defines a User model with fields for name, email, age, and a timestamp for when the document is created. Itโs a powerful way to enforce data integrity and enhance your MongoDB queries.
๐๐๐ฒ ๐๐ of #100DaysOfCode
When working with JSON Web Tokens (JWT) in Node.js, understanding how various HTTP status codes relate to authentication and authorization processes is crucial. These status codes help communicate the result of client-server interactions, particularly when handling user access and security.
Hereโs a comprehensive guide to the HTTP status codes youโll frequently encounter when implementing JWT in your applications:
๐๐๐ ๐๐: ๐๐ฎ๐๐๐๐ฌ๐ฌ! Your request was processed, and the JWT is valid, granting access to the resource.
๐๐๐ ๐๐ซ๐๐๐ญ๐๐: A new resource has been successfully created, such as a user account, and a JWT is issued.
๐๐๐ ๐๐๐ ๐๐๐ช๐ฎ๐๐ฌ๐ญ: The server couldnโt understand the request due to invalid syntax. This might happen if the request lacks necessary parameters or the JWT is malformed.
๐๐๐ ๐๐ง๐๐ฎ๐ญ๐ก๐จ๐ซ๐ข๐ณ๐๐: Access denied. This occurs when the JWT is missing, expired, or invalid, meaning authentication has failed.
๐๐๐ ๐
๐จ๐ซ๐๐ข๐๐๐๐ง: Youโre authenticated, but you donโt have the right permissions to access this resource, even with a valid JWT.
๐๐๐ ๐๐จ๐ญ ๐
๐จ๐ฎ๐ง๐: The requested resource couldnโt be found. This isnโt specific to JWT but is often encountered in API development.
๐๐๐ ๐๐ฎ๐ญ๐ก๐๐ง๐ญ๐ข๐๐๐ญ๐ข๐จ๐ง ๐๐ข๐ฆ๐๐จ๐ฎ๐ญ: The session has expired, often due to a JWT that is no longer valid because of expiration.
๐๐๐ ๐๐ง๐ฉ๐ซ๐จ๐๐๐ฌ๐ฌ๐๐๐ฅ๐ ๐๐ง๐ญ๐ข๐ญ๐ฒ: The server understands the request but canโt
process it due to semantic errors, like an invalid JWT payload.
๐๐๐ ๐๐ง๐ญ๐๐ซ๐ง๐๐ฅ ๐๐๐ซ๐ฏ๐๐ซ ๐๐ซ๐ซ๐จ๐ซ: Something went wrong on the server, possibly during JWT processing or verification.
๐๐๐ ๐๐๐ซ๐ฏ๐ข๐๐ ๐๐ง๐๐ฏ๐๐ข๐ฅ๐๐๐ฅ๐: The server is currently unable to handle the request, which could affect JWT validation or issuance.
๐๐๐ฒ ๐๐ of #100DaysOfCode
After defining a schema, the next step is to create a model. A model in Mongoose provides an interface to the database for CRUD (Create, Read, Update, Delete) operations. Itโs the bridge between your code and the database.
-๐๐ก๐ฒ ๐ฎ๐ฌ๐ ๐ฆ๐จ๐๐๐ฅ๐ฌ?
Models are where the magic happens! They allow you to interact with the MongoDB collection that corresponds to the defined schema, making data handling straightforward and efficient.
Attached is an example a model User is created from the schema and exported to be used in other files. Then this model is used to create and save a new user to the database.
๐๐ฆ๐น๐ต ๐ถ๐ฑ: ๐๐ฐ๐ธ ๐ต๐ฐ ๐ค๐ณ๐ฆ๐ข๐ต๐ฆ ๐ข๐ฏ๐ฅ ๐ช๐ฏ๐ด๐ฆ๐ณ๐ต ๐ฅ๐ฐ๐ค๐ถ๐ฎ๐ฆ๐ฏ๐ต๐ด ๐ช๐ฏ๐ต๐ฐ ๐บ๐ฐ๐ถ๐ณ ๐๐ฐ๐ฏ๐จ๐ฐ๐๐ ๐ค๐ฐ๐ญ๐ญ๐ฆ๐ค๐ต๐ช๐ฐ๐ฏ ๐ธ๐ช๐ต๐ฉ ๐ฆ๐ข๐ด๐ฆ.
๐๐๐ฒ ๐๐ of #100DaysOfCode
Creating documents in MongoDB is a breeze with Mongoose. The ๐๐๐๐๐๐ function allows you to insert new documents into your collection, using the model youโve defined.
๐๐ก๐ฒ ๐ข๐ฌ ๐ญ๐ก๐ข๐ฌ ๐ฎ๐ฌ๐๐๐ฎ๐ฅ?
The create function not only saves the data to the database but also returns the saved document, making it easy to confirm the operation or use the result in your code.
In the attached snippet, the ๐๐ด๐ฆ๐ณ.๐ค๐ณ๐ฆ๐ข๐ต๐ฆ method inserts a new document into the User collection and returns the saved document in the promise.
๐๐๐ฒ ๐๐ of #100DaysOfCode
One of the most powerful features of Mongoose is its ability to query your database with ease. The ๐๐ข๐ง๐ function is a versatile tool that allows you to search for documents that match certain criteria.
๐๐ก๐ฒ ๐ข๐ฌ ๐ข๐ญ ๐ฉ๐จ๐ฐ๐๐ซ๐๐ฎ๐ฅ?
With find, you can retrieve multiple documents at once, filter results, and even control what fields are returned. Itโs the backbone of many database operations in your application.
In the attached snippet, User.find is used to retrieve all users who are 25 years old. The result is an array of documents that match the query.
๐๐๐ฒ ๐๐ of #100DaysOfCode
๐๐๐๐
๐ถ๐๐ ๐๐ ๐ด๐๐๐๐๐๐๐ -When you want to retrieve a single document that matches specific criteria, Mongooseโs ๐๐๐๐
๐ถ๐๐ is the function to use. It returns the first document that matches the query or null if no document is found.
๐๐ก๐ฒ ๐ข๐ฌ ๐ญ๐ก๐ข๐ฌ ๐ฎ๐ฌ๐๐๐ฎ๐ฅ?
๐๐๐๐
๐ถ๐๐ is perfect for scenarios where youโre looking for a unique document or the first match in a collection. Itโs a quick way to fetch a single record without needing to filter through an entire array of results.
In the attached snippet, ๐๐๐๐
๐ถ๐๐ is used to find the first user with the email john@example.com. If no user is found, it returns null.
๐๐๐ฒ ๐๐ of #100DaysOfCode
When working with Mongoose, validators play a crucial role in ensuring the integrity and correctness of your data. Mongoose offers a variety of validators that can be applied directly to schema fields, and it also allows you to create custom validators to meet specific needs. Letโs dive into the different types of validators you can use in Mongoose.
๐. ๐๐ฎ๐ข๐ฅ๐ญ-๐ข๐ง ๐๐๐ฅ๐ข๐๐๐ญ๐จ๐ซ๐ฌ
Mongoose provides a set of built-in validators that cover common validation scenarios. These are directly applied to schema fields and handle most validation tasks out of the box.
๐๐ฒ๐ฟ๐ฒโ๐ ๐ฎ ๐น๐ผ๐ผ๐ธ ๐ฎ๐ ๐๐ผ๐บ๐ฒ ๐ฐ๐ผ๐บ๐บ๐ผ๐ป ๐ฏ๐๐ถ๐น๐-๐ถ๐ป ๐๐ฎ๐น๐ถ๐ฑ๐ฎ๐๐ผ๐ฟ๐:
-๐ซ๐๐ช๐ฎ๐ข๐ซ๐๐: Ensures a field is not empty.
-๐ฆ๐ข๐ง and ๐ฆ๐๐ฑ: Enforce minimum and maximum values for numbers.
-๐ฆ๐ข๐ง๐ฅ๐๐ง๐ ๐ญ๐ก and ๐ฆ๐๐ฑ๐ฅ๐๐ง๐ ๐ญ๐ก: Set minimum and maximum lengths for strings.
-๐๐ง๐ฎ๐ฆ: Restricts a field to a set of predefined values.
-๐ฆ๐๐ญ๐๐ก: Validates a string against a regular expression pattern.
๐. ๐๐ฎ๐ฌ๐ญ๐จ๐ฆ ๐๐๐ฅ๐ข๐๐๐ญ๐จ๐ซ๐ฌ
Sometimes, built-in validators arenโt enough, and you need more control. Mongoose allows you to define custom validators that let you implement complex validation logic.
Custom validators are perfect for scenarios that require specific business rules or logic that isnโt covered by built-in validators.
๐. ๐๐ฌ๐ฒ๐ง๐๐ก๐ซ๐จ๐ง๐จ๐ฎ๐ฌ ๐๐๐ฅ๐ข๐๐๐ญ๐จ๐ซ๐ฌ
Sometimes, validation involves operations like checking the uniqueness of a value against the database. Mongoose supports asynchronous validators for these cases.
