Hello community!
Iโve been challenged to start the #100DayCodeChallenge, and guess what?! Challenge Accepted!! 
So, for the next 100 days, Iโll be sharing my knowledge, learning, and experiences.
Below is my progress from previous days, and Iโll now be updating regularly from today. If youโre up for it, join me on this adventure! 
๐๐๐ฒ ๐: Introducing ๐๐ฅ๐จ๐๐ฌ
no, not the slimesโฆ although quite similar in not having a defined form or structure
A Blob (short for Binary Large Object) is an object that represents immutable raw binary data and can take many forms. Itโs commonly used to handle File uploading, Image processing, and large data operations. Blobs can be read as text or binary data or converted into a ReadableStream for further processing.
โ ๐ฝ๐ก๐ค๐ ๐๐ง๐๐๐ฉ๐๐ค๐ฃ:
Blobs are created using the Blob() constructor, which takes an array of parts (data that is stored in the blob), and mainly the type of the blobโs data. For example, text/plain, image/jpeg, application/json, audio/mp3, โฆ
โ ๐พ๐ง๐๐๐ฉ๐๐ฃ๐ ๐ฝ๐ก๐ค๐ ๐๐๐:
Blob URLs allow you to reference Blob objects in your applications as if they were regular URLs. This is particularly useful for creating downloadable links or embedding multimedia content.
โ ๐๐๐ซ๐ค๐ ๐๐ฃ๐ ๐ฝ๐ก๐ค๐ ๐๐๐:
Of course, after you are done with the URL, you need to free up the memory used by the blob URL by revoking it. 
๐๐๐ฒ ๐ : ๐๐ซ๐จ๐ฆ๐ข๐ฌ๐๐ฌ ๐ข๐ง ๐๐
A Promise in JavaScript is a way to handle asynchronous operations like downloading a file and sending/receiving a package from the backend. They make the user able to continue in the page and/or doing something else without waiting for the operation to finish. Promises also are used for better error handling, better flow of control definition in asynchronous logic, and improving Code readability.
And always resolve your promises, donโt keep them pending 
๐๐๐ฒ ๐ of 100DaysOfCode
A callback is a function that is passed to another function as an argument and is intended to be executed after some event or task has been completed. They can be used to refactor code even more by refactoring functions, a simple example of this would be a simple calculate function that takes two variables and an operator.
Callbacks are also used to handle asynchronous operations, such as fetching data from a server, reading files, or waiting for user input.
And so, to avoid callback hell, one can use ๐ฉ๐ซ๐จ๐ฆ๐ข๐ฌ๐๐ฌ using then/catch blocks, or using ๐๐ฌ๐ฒ๐ง๐/๐๐ฐ๐๐ข๐ญ.
For more clarification, please refer to the attached code.
๐๐๐ฒ ๐ of 100DaysOfCode
Before knowing what rest parameters are, I would like to talk first about the โargumentsโ object in JS.
The โargumentsโ object is an ๐ข๐ณ๐ณ๐ข๐บ-๐ญ๐ช๐ฌ๐ฆ object that is found as a local variable within all ๐ฏ๐ฐ๐ฏ-๐ข๐ณ๐ณ๐ฐ๐ธ functions. You can refer to a functionโs arguments inside that function by using its โargumentsโ object.
I said it is an array-like object; since, like arrays, they have entries for each argument the function was called with, with the first entryโs index at 0(ex. arguments[0]), and the function length is also included within. However, they donโt have other array functions like forEach and map functions.
The โargumentsโ object can access any argument of a function even when not specified in the declaration of the said function, which means that the function would have access for infinite arguments.
Now back to rest parameters 
much like โargumentsโ, they allow the function to have access to indefinite number of arguments as an ๐๐๐๐๐.
A function definitionโs last parameter can be prefixed with " โฆ " which will cause all remaining (user supplied) parameters to be placed within an Array object.
Rest Parameters are not limited to only the length function, they can perform what any array can do like using slice, forEach, map, sort, etcโฆ
As they are used as the last parameter, it leaves space for other parameters to be specified.
๐๐๐ฒ ๐ of 100DaysOfCode
Default parameters in JavaScript allow you to initialize a function with default values if no arguments are provided or if โ๐ถ๐ฏ๐ฅ๐ฆ๐ง๐ช๐ฏ๐ฆ๐ฅโ is passed as an argument. This feature helps make your functions more robust and reduces the need for additional code to handle cases where arguments are not provided.
Default parameters can be used:
โ to simplify function calls by eliminating the need to pass values explicitly for all parameters.
โ to avoid โundefinedโ values.
โ to improve code readability.
โ with destructuring to provide default values for arrays and/or object properties.
->with expressions, including calls to other functions, allowing for complex default values.
๐๐๐ฒ ๐ of 100DaysOfCode
๐น๐ผ๐ฐ๐ฎ๐น๐ฆ๐๐ผ๐ฟ๐ฎ๐ด๐ฒ in JavaScript is a type of web storage that allows websites to store data persistently in a userโs browser. Unlike ๐ด๐ฆ๐ด๐ด๐ช๐ฐ๐ฏ๐๐ต๐ฐ๐ณ๐ข๐จ๐ฆ, which stores data for a single session (until the browser tab is closed), ๐ญ๐ฐ๐ค๐ข๐ญ๐๐ต๐ฐ๐ณ๐ข๐จ๐ฆ retains data even after the browser is closed and reopened.
Why would one use ๐ญ๐ฐ๐ค๐ข๐ญ๐๐ต๐ฐ๐ณ๐ข๐จ๐ฆ?
โ Data remains available across browser sessions, so users can return to your site later and still have their data.
โ Reduces the need for repeated server requests, improving load times and reducing server load.
โ Simple API for storing, retrieving, and removing data.
โ Typically allows for 5-10MB of storage per origin, which is more than cookies.
However, one should not store any valuable / important information since the data stored in ๐ญ๐ฐ๐ค๐ข๐ญ๐๐ต๐ฐ๐ณ๐ข๐จ๐ฆ is accessible through JavaScript, so it can be susceptible to cross-site scripting (XSS) attacks.
๐๐๐ฒ ๐ of 100DaysOfCode
Coming from a C background perspective, I thought that, in JavaScript, object properties would be very much like the structures in C and can only be accessed by using the dot notation, while bracket notation is used for array properties.
Little did I know, that was only one way in JS. Objects in JS are collections of key-value pairs, and there are several ways to access the values stored within these objects.
โ ๐๐ผ๐ ๐ก๐ผ๐๐ฎ๐๐ถ๐ผ๐ป:
๐ฐ๐ฃ๐ซ๐ฆ๐ค๐ต.๐ฑ๐ณ๐ฐ๐ฑ๐ฆ๐ณ๐ต๐บโ ๐๐ฟ๐ฎ๐ฐ๐ธ๐ฒ๐ ๐ก๐ผ๐๐ฎ๐๐ถ๐ผ๐ป:
๐ฐ๐ฃ๐ซ๐ฆ๐ค๐ต['๐ฑ๐ณ๐ฐ๐ฑ๐ฆ๐ณ๐ต๐บ'] โ ๐จ๐๐ถ๐ป๐ด ๐ฉ๐ฎ๐ฟ๐ถ๐ฎ๐ฏ๐น๐ฒ๐ ๐๐ถ๐๐ต ๐๐ฟ๐ฎ๐ฐ๐ธ๐ฒ๐ ๐ก๐ผ๐๐ฎ๐๐ถ๐ผ๐ป:
Same as Bracket Notation, but the property name is stored in a variable, allowing for a more flexible access of the properties.
โ ๐๐ฒ๐๐๐ฟ๐๐ฐ๐๐๐ฟ๐ถ๐ป๐ด๐๐ฐ๐ฐ๐ฒ๐๐๐ถ๐ป๐ด ๐ก๐ฒ๐๐๐ฒ๐ฑ ๐ข๐ฏ๐ท๐ฒ๐ฐ๐๐:
Nested objects can be accessed by chaining dot or bracket notation, or mixing between them.
โ ๐๐ฒ๐๐๐ฟ๐๐ฐ๐๐๐ฟ๐ถ๐ป๐ด:
Destructuring assignment can be used to extract values from objects and store them in variables.
Each of these methods offers flexibility depending on the situation, such as the need for dynamic property access or dealing with nested structures.
๐๐๐ฒ ๐ of 100DaysOfCode
-In JavaScript, objects are mutable by default. This means that their properties can be changed after they are created. However, there are times when we want to ensure that an object remains immutable โ preventing any modifications to it or its nested objects.
Why is ๐๐ฎ๐ฎ๐ถ๐ต๐ข๐ฃ๐ช๐ญ๐ช๐ต๐บ important?
โ Immutable objects ensure that the state cannot be modified unexpectedly, making the code more predictable and easier to understand.
โ With immutability, tracking changes and understanding state transitions becomes simpler, which aids in debugging and testing.
โ It simplifies the implementation of undo and redo functionalities, like those in text editors, as previous states are easily retrievable.
Hereโs a practical way to achieve immutability using a technique called ๐๐๐๐ฉ ๐ ๐ซ๐๐๐ณ๐ข๐ง๐ .
๐๐ฆ๐ฆ๐ฑ ๐๐ณ๐ฆ๐ฆ๐ป๐ช๐ฏ๐จ is achieved by recursively calling the build-in method ๐๐ฃ๐ซ๐ฆ๐ค๐ต.๐ง๐ณ๐ฆ๐ฆ๐ป๐ฆ() to ensure that all nested arrays and objects are frozen, and thus Immutable.
๐๐๐ฒ ๐ of 100DaysOfCode
In JavaScript, other than the traditional for loop, there are several types of for loops each suited to different kinds of tasks.
โ ๐๐ซ๐๐๐ข๐ญ๐ข๐จ๐ง๐๐ฅ โ๐๐จ๐ซโ ๐ฅ๐จ๐จ๐จ๐ฉ:
This loop consists of Initialization (let i = 0), Condition (i < 5) and Increment (i++).
The traditional โ๐ง๐ฐ๐ณโ loop is useful when you know in advance how many times you need to execute a statement or a block of statements.
โ โ๐๐จ๐ซ-๐ข๐งโ ๐๐จ๐จ๐ฉ:
This loop iterates over the enumerable properties of an object. Itโs typically used for iterating over the properties of objects.
However, โ๐ง๐ฐ๐ณ-๐ช๐ฏโ should not be used to iterate over arrays where the order of elements is important because it iterates over all enumerable properties, not just the numeric indexes.
โ โ๐๐จ๐ซ-๐จ๐โ ๐๐จ๐จ๐ฉ:
The โ๐ง๐ฐ๐ณ-๐ฐ๐งโ loop iterates over iterable objects like arrays, strings, maps, sets, etc. Itโs preferred for arrays and other iterable objects.
This loop allows you to directly access the values of the iterable.
โ โ๐๐จ๐ซ๐๐๐๐กโ ๐ฆ๐๐ญ๐ก๐จ๐:
Although not a loop itself, the โ๐ง๐ฐ๐ณ๐๐ข๐ค๐ฉโ method is commonly used for iterating over arrays. Itโs a higher-order function that executes a provided function once for each array element.
This method is convenient but does not support โ๐ฃ๐ณ๐ฆ๐ข๐ฌโ or โ๐ค๐ฐ๐ฏ๐ต๐ช๐ฏ๐ถ๐ฆโ statements.
๐ฐ๐ ๐บ๐๐๐๐๐๐:
โ Use a traditional ๐๐จ๐ซ loop for simple numeric iterations.
โ Use ๐๐จ๐ซ-๐ข๐ง for iterating over object properties.
โ Use ๐๐จ๐ซ-๐จ๐ for iterating over iterable objects like arrays.
โ Use ๐๐จ๐ซ๐๐๐๐ก for array iterations when you donโt need to break out of the loop early.
๐๐๐ฒ ๐๐ of 100DaysOfCode
Array methods in JavaScript are built-in functions that you can use to perform common tasks on arrays, such as adding, removing, or manipulating elements.
โ ๐ฝ๐๐๐ต: Adds one or more elements to the end of an array.
โ ๐ฝ๐ผ๐ฝ: Removes the last element from an array.
โ ๐๐ต๐ถ๐ณ๐: Removes the first element from an array.
โ ๐๐ป๐๐ต๐ถ๐ณ๐: Adds one or more elements to the beginning of an array.
โ ๐๐น๐ถ๐ฐ๐ฒ: Returns a shallow copy of a portion of an array into a new array object.
โ ๐๐ฝ๐น๐ถ๐ฐ๐ฒ: Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
โ ๐ฐ๐ผ๐ป๐ฐ๐ฎ๐: Merges two or more arrays.
โ ๐ณ๐ผ๐ฟ๐๐ฎ๐ฐ๐ต: Executes a provided function once for each array element.
โ ๐บ๐ฎ๐ฝ: Creates a new array with the results of calling a provided function on every element in the calling array.
โ ๐ณ๐ถ๐น๐๐ฒ๐ฟ: Creates a new array with all elements that pass the test implemented by the provided function.
โ ๐ฟ๐ฒ๐ฑ๐๐ฐ๐ฒ: Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
โ ๐ณ๐ถ๐ป๐ฑ: Returns the value of the first element in the array that satisfies the provided testing function.
โ ๐ณ๐ถ๐ป๐ฑ๐๐ป๐ฑ๐ฒ๐ : Returns the index of the first element in the array that satisfies the provided testing function.
โ ๐ถ๐ป๐ฐ๐น๐๐ฑ๐ฒ๐: Determines whether an array includes a certain value among its entries, returning true or false as appropriate.
โ ๐๐ผ๐ฟ๐: Sorts the elements of an array in place and returns the array.
โ ๐ฟ๐ฒ๐๐ฒ๐ฟ๐๐ฒ: Reverses the order of the elements in an array in place.
๐๐๐ฒ ๐๐ of 100DaysOfCode
MongoDB is a NoSQL database that offers a flexible, scalable, and powerful way to store and manage data. Unlike traditional relational databases, MongoDB uses a document-oriented model, making it perfect for handling unstructured or semi-structured data.
๐ช๐ต๐ฎ๐ ๐ฎ๐ฟ๐ฒ ๐๐ผ๐บ๐ฒ ๐ธ๐ฒ๐ ๐ณ๐ฒ๐ฎ๐๐๐ฟ๐ฒ๐ ๐ผ๐ณ ๐ ๐ผ๐ป๐ด๐ผ๐๐?
โ ๐๐๐ก๐๐ฆ๐-๐ฅ๐๐ฌ๐ฌ: MongoDB stores data in flexible, JSON-like documents, meaning you donโt need to define a schema upfront. This allows for easy data modeling and rapid iteration.
โ ๐๐๐๐ฅ๐๐๐ข๐ฅ๐ข๐ญ๐ฒ: Designed with scalability in mind, MongoDB can handle large volumes of data and high traffic loads. It supports horizontal scaling through sharding, making it ideal for growing applications.
โ ๐๐จ๐ฐ๐๐ซ๐๐ฎ๐ฅ ๐๐ฎ๐๐ซ๐ฒ ๐๐๐ง๐ ๐ฎ๐๐ ๐: MongoDB offers a rich query language with support for ad-hoc queries, indexing, and real-time aggregation. You can easily retrieve and manipulate data using its expressive query syntax.
โ ๐๐ข๐ ๐ก ๐๐๐ซ๐๐จ๐ซ๐ฆ๐๐ง๐๐: With features like in-memory storage engine, replication, and sharding, MongoDB delivers high performance for read and write operations, ensuring your application runs smoothly.
๐ช๐ต๐ ๐๐ผ๐ ๐๐ต๐ผ๐๐น๐ฑ ๐๐๐ฒ ๐ ๐ผ๐ป๐ด๐ผ๐๐:
โ ๐ ๐ฅ๐๐ฑ๐ข๐๐ข๐ฅ๐ข๐ญ๐ฒ: The document model allows for storing complex data structures in a single record, making it easier to manage and evolve your data schema.
โ ๐๐๐ฏ๐๐ฅ๐จ๐ฉ๐๐ซ-๐ ๐ซ๐ข๐๐ง๐๐ฅ๐ฒ: MongoDB integrates well with popular programming languages and frameworks, providing extensive documentation and a strong community support.
โ ๐๐ฅ๐จ๐ฎ๐-๐๐๐๐๐ฒ: MongoDB Atlas, the cloud version of MongoDB, offers automated deployments, backups, and monitoring, so you can focus on building your application.
Iโm looking forward to diving deeper into MongoDB and sharing more insights as I progress through this challenge.
๐๐๐ฒ ๐๐ of 100DaysOfCode
๐ฟ๐๐๐พ๐ค๐ฃ๐ฉ๐๐ฃ๐ฉ๐๐ค๐๐๐๐ -->First, what is ๐๐๐๐๐ฐ๐ฏ๐ต๐ฆ๐ฏ๐ต๐๐ฐ๐ข๐ฅ๐ฆ๐ฅ?
๐๐๐๐๐ฐ๐ฏ๐ต๐ฆ๐ฏ๐ต๐๐ฐ๐ข๐ฅ๐ฆ๐ฅ is an event that is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
This event is useful when you want your JavaScript code to interact with the DOM as soon as it is available, ensuring that all the elements you might need to manipulate are accessible.
->Now, when to use ๐๐๐๐๐ฐ๐ฏ๐ต๐ฆ๐ฏ๐ต๐๐ฐ๐ข๐ฅ๐ฆ๐ฅ?
Running code raw (without ๐๐๐๐๐ฐ๐ฏ๐ต๐ฆ๐ฏ๐ต๐๐ฐ๐ข๐ฅ๐ฆ๐ฅ) is only feasible if you place your script at the end of the <body> tag. This ensures that the DOM is already loaded by the time the script executes. This method can make your HTML and JavaScript more concise and readable but requires careful placement.
This approach is suitable for simpler scripts or when you have a clear structure, ensuring the script is at the end of the <body> to guarantee the DOM is loaded.
For most scenarios, breaking your code into DOM-independent and DOM-dependent parts is advisable. This provides a balance between ensuring your DOM manipulations are safe and keeping your code efficient.
This approach involves dividing your code into DOM-dependent and DOM-independent parts. You place DOM-independent code (like variable declarations, function definitions, or initial computations) outside the ๐๐๐๐๐ฐ๐ฏ๐ต๐ฆ๐ฏ๐ต๐๐ฐ๐ข๐ฅ๐ฆ๐ฅ event listener, and DOM-dependent code inside it.
๐๐๐ฒ ๐๐ of 100DaysOfCode
โ :๐ฉ๐ข๐ด Selector:
The :๐ฉ๐ข๐ด selector is a new addition to CSS that allows you to select an element if it contains a specific descendant. Itโs essentially a parent selector, which weโve long been waiting for in CSS.
โ :๐ฏ๐ฐ๐ต Selector:
The :๐ฏ๐ฐ๐ต selector is a CSS pseudo-class that allows you to exclude elements that match a certain condition. It helps in filtering out elements that you donโt want to style.
โ Combining :๐ฉ๐ข๐ด and :๐ฏ๐ฐ๐ต:
By combining these two selectors, you can create complex conditions for styling elements. For example, you can make a category filter using only HTML and CSS.
Below is a simple code that showcase the category filter example using the :has and :not selectors as well as :checked selector (returns true when a radio button / checkbox / option is checked or selected).
๐๐๐ฒ ๐๐ of 100DaysOfCode
Ever felt frustrated when you need to change a color or spacing value across multiple CSS rules? Say hello to CSS Variables!
โ ๐ช๐ต๐ฎ๐ ๐ฎ๐ฟ๐ฒ ๐๐ฆ๐ฆ ๐ฉ๐ฎ๐ฟ๐ถ๐ฎ๐ฏ๐น๐ฒ๐?
CSS Variables, also known as custom properties, allow you to store values (like colors, fonts, or sizes) in one place and reuse them throughout your stylesheet. They make your CSS cleaner, more maintainable, and super flexible.
โ ๐๐ผ๐ ๐๐ผ ๐๐ฒ๐ฐ๐น๐ฎ๐ฟ๐ฒ ๐ฉ๐ฎ๐ฟ๐ถ๐ฎ๐ฏ๐น๐ฒ๐:
CSS variables are declared within a selector that defines their scope. They are typically defined in the โ:๐ซ๐จ๐จ๐ญโ pseudo-class to make them globally available throughout the document.
โ ๐๐ผ๐ ๐๐ผ ๐จ๐๐ฒ ๐ฉ๐ฎ๐ฟ๐ถ๐ฎ๐ฏ๐น๐ฒ๐:
To use a CSS variable, you reference it with the ๐ท๐ข๐ณ() function.
โ ๐ช๐ต๐ ๐จ๐๐ฒ ๐๐ฆ๐ฆ ๐ฉ๐ฎ๐ฟ๐ถ๐ฎ๐ฏ๐น๐ฒ๐?
๐๐๐ฒ ๐๐ of 100DaysOfCode 
Today, I challenged myself to build a fully responsive navigation bar from scratch using only HTML and CSS. At first it was challenging to make it work seamlessly across all devices.
However, it was possible thanks to the CSS property @๐ข๐๐๐๐(๐ข๐๐ญ-๐ฌ๐๐๐ฉ๐: x), which helps in applying styles based on the maximum width of the screen hence creating responsive web designs that look and function well on a variety of devices, from mobile phones to desktop computers.
๐๐๐ฒ ๐๐ of 100DaysOfCode
You probably think canโt you just use any gradient function (linear-gradient for example) as a value for the border-color property?
The answer to that would be no, you canโt.
So how can it be done?
Here is where the ::๐๐๐๐๐๐ & ::๐๐๐๐๐ pseudo elements come to play.
โ ๐๐ก๐๐ญ ๐๐ซ๐ ๐ญ๐ก๐๐ฌ๐ ๐ฉ๐ฌ๐๐ฎ๐๐จ-๐๐ฅ๐๐ฆ๐๐ง๐ญ๐ฌ?
The ::๐๐๐๐๐๐ & ::๐๐๐๐๐ pseudo elements in CSS are used to insert content before or after the content of an element. They are particularly useful for adding decorative or informative content without altering the HTML structure.
โ ๐๐ฎ๐ญ ๐๐จ๐ฐ ๐๐๐ง ๐ญ๐ก๐๐ฒ ๐ฎ๐ฌ๐๐ ๐๐จ๐ซ ๐๐จ๐ซ๐๐๐ซ๐ข๐ง๐ ?
These pseudo-elements can be used to create gradient borders by positioning them absolutely around an element, applying a gradient background, and extending their dimensions slightly beyond the elementโs borders. This setup creates the appearance of a border with gradient colors without altering the elementโs original structure.
๐๐๐ฒ ๐๐ of 100DaysOfCode
Hello community, for the next few days Iโll be sharing some mini JavaScript projects that Iโll working on.
Todayโs Project is a ๐ช๐ฒ๐ฎ๐๐ต๐ฒ๐ฟ ๐๐ฝ๐ฝ.
The Weather App fetches real-time weather data from an API and displays it in a user-friendly format. Itโs a great way to practice handling API requests and manipulating DOM elements.
๐๐๐ฒ ๐๐ of 100DaysOfCode
The Random Password Generator creates secure passwords of varying lengths, ensuring a mix of uppercase, lowercase, numbers, and special characters. It also includes a convenient copy function to easily use the generated passwords.
Through this project, I learned about the navigator: clipboard property, the entry point to ๐๐น๐ถ๐ฝ๐ฏ๐ผ๐ฎ๐ฟ๐ฑ ๐๐ฝ๐ถ, which can be used to implement cut, copy, and paste features within a web application.
๐๐๐ฒ ๐๐ of #100DaysOfCode
The QR Code Generator creates QR codes for any given text or URL. This tool is incredibly useful for quickly sharing information in a compact, scannable format.
Feel free to scan the code in video and let me know your results.
