├── LLD-1 (HTML
    └── CSS)
    │   ├── 1_Web Fundamentals and Introduction to HTML.md
    │   ├── 2_HTML (Lists , Tables and Forms).md
    │   ├── 3_Introduction to CSS.md
    │   ├── 4_CSS Display , Box model and Positioning.md
    │   ├── 5_Flexbox and Media Queries.md
    │   ├── 6_CSS Grid.md
    │   └── 7_CSS (specificity , inheritance , rendering).md
├── LLD-2 (JavaScript)
    ├── DOM
    │   ├── 10_Debouncing and Throttling.md
    │   ├── 1_Introduction to DOM.md
    │   ├── 2_Event and Event Handling.md
    │   ├── 3_Dynamic DOM.md
    │   ├── 4_Kanban Board - 1(Design and Structure of the App).md
    │   ├── 5_Kanban Board-2 (DOM Manipulation).md
    │   ├── 6_ Kanban Board -3(Bussiness Logics & Local Storage).md
    │   ├── 7_Kanban Board -4(local storage).md
    │   ├── 8_UI Case Studies-1.md
    │   └── 9_UI Case Studies-2.md
    └── JavaScript
    │   ├── JS-1 Introduction to JavaScript.md
    │   ├── JS-2 Code Execution and ES6.md
    │   ├── JS-3 Functional Programming.md
    │   ├── JS-4 OOPS-1.md
    │   ├── JS-5 OOPS-2.md
    │   ├── JS-6 OOPS-3.md
    │   ├── JS-7 Asynchronous Programming-1.md
    │   └── JS-8 Asynchronous Programming-2.md
├── LLD-3 (React)
    ├── React-1 (Introduction and Setup).md
    ├── React-10 : Asynchronous Redux and Thunk-2.md
    ├── React-11 : React Redux Interview Question 1.md
    ├── React-12: React Redux Interview Question 2.md
    ├── React-2 (State and Props).md
    ├── React-3 (Components Lists and Froms).md
    ├── React-4: IMDB Project- Part 1 (HTTP and useEffect).md
    ├── React-5 : IMDB-Part 2 (Client side Routing and React Router).md
    ├── React-6: IMDB Part 3 (Pagination Sorting, Searching, filtering).md
    ├── React-7 IMDB Part 4 (Adding Features to WatchList.md
    ├── React-8: Prop drilling and State management.md
    └── React-9 : Asynchronous Redux and Thunk.md
└── LLD-4 (MERN)
    ├── FullStack-10: Project Part 6- (Book a Show).md
    ├── FullStack-11: Project Part 7- (Payment API and Deployment).md
    ├── FullStack-1: Intro to Backend Dev with Node.js & Express.md
    ├── FullStack-2: Introduction to Express.md
    ├── FullStack-3: Intro to MongoDB and Mongoose.md
    ├── FullStack-4: MVC Architecture and CRUD.md
    ├── FullStack-5: Project Part 1- (Authentication & Authorization.md
    ├── FullStack-6: Project Part 2- (Creating User's & Admins Route).md
    ├── FullStack-7: Project Part 3- (Implementing Theatre API).md
    ├── FullStack-8: Project Part 4- (Implementing Shows API).md
    └── FullStack-9: Project Part 5- (Listing Data from DataBase).md


/LLD-1 (HTML/CSS)/1_Web Fundamentals and Introduction to HTML.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## Introduction
  3 | 
  4 | When we think about accessing a website, there's more happening behind the scenes than meets the eye. The URL, or Uniform Resource Locator, is what we usually type into the address bar to access a web page. However, the URL represents much more than just a web address. It's a pathway to the actual resource we're trying to access on the internet.
  5 | 
  6 | 
  7 | ## Process
  8 | To break it down, when we enter a URL, the full form of URL comes into play: **Uniform Resource Locator**. This term accurately describes what it does — it locates a specific resource on the internet. This resource could be anything from a text document to a video, and the server's job is to provide us with that resource.
  9 | 
 10 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/110/original/upload_06940025115633bec555d541d722b876.png?1695109040)
 11 | 
 12 | 
 13 | A **server**, in this context, isn't a physical location but rather a program running somewhere in the world. This program generates the website content for us. It's important to note that a server is not a database. Rather, it's a responsive entity that resides somewhere in the vast expanse of the digital world. Imagine it as a helpful entity that receives your request and promptly serves you the requested information.
 14 | 
 15 | 
 16 | ## Dairy Farm Analogy
 17 | Here's an analogy to help clarify the roles involved: Imagine you own a dairy farm and have numerous customers who regularly place orders for dairy products. To manage this influx of orders, you have an **operations team** that handles the order-taking process. They ensure that customers' requests are recorded accurately and are then forwarded to the **production team**.
 18 | 
 19 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/111/original/upload_9cef5b39282b29f01216e706282bbb64.png?1695109075)
 20 | 
 21 | 
 22 | In the context of websites, the operations team can be likened to the **DNS (Domain Name System)** system. The DNS system acts like an operations team, taking in requests and translating them into specific IP addresses. Think of DNS as a phonebook for the internet. When you enter a domain name like "scaler.com," the DNS system translates it to an IP address that points to a particular server.
 23 | 
 24 | However, it's important to note that the server itself is not where the data comes from. Instead, it's comparable to the dairy farm in our analogy—it's responsible for assembling and providing the products. In our website world, the actual data resides in a **database**. This database is akin to a **warehouse** for the dairy farm. All the products are stored there, ready to be accessed when needed.
 25 | 
 26 | When a request is made, the server applies specific protocols and data logic to retrieve the necessary information from the database. This process is what ensures that we receive the correct data as a response to our request.
 27 | 
 28 | Bringing it all together, the customers in our dairy farm analogy represent clients or users of the website. The operations team corresponds to the DNS system, efficiently directing requests. The dairy farm itself serves as the server, assembling and providing the desired information. And finally, the warehouse embodies the database, housing all the necessary data for the website.
 29 | 
 30 | In the grand scheme of things, even though we might simply see a website's interface through our browser, there's a complex interplay of components behind every web page that ensures we get the right information at the right time.
 31 | 
 32 | 
 33 | ### HTML boiler plate code
 34 | 
 35 | #### Code
 36 | ```html
 37 | <!doctype html>
 38 | <html lang = "en">
 39 |   <head>
 40 |     <meta charset = "utf - 8">
 41 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1">
 42 |     <title>Bootstrap demo</title>
 43 |   </head>
 44 |   <body>
 45 |     <h1>Hello, world ! </h1>
 46 |   </body>
 47 | </html>
 48 | ```
 49 | 
 50 | ### Structure your code
 51 | #### Div
 52 | Div elements are often used to structure and style sections of a web page, making it easier to apply CSS styles or JavaScript functionality to specific groups of content.
 53 | 
 54 | #### Code:
 55 | 
 56 | ```html
 57 | <!DOCTYPE html>
 58 | <html>
 59 | <head>
 60 |     <title>Basic HTML</title>
 61 | </head>
 62 | <body>
 63 |     <div>
 64 |         <h2>Welcome to Scalar Topics</h2>
 65 |         <p>
 66 |          We're glad you're here
 67 |         </p>
 68 |     </div>
 69 | </body>
 70 | </html>
 71 | ```
 72 | #### Output
 73 | 
 74 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/112/original/upload_b1f0471a9f3040bdd40eb364e9101835.png?1695109208)
 75 | 
 76 | #### Section
 77 | Sections are used to structure the content of a web page into logical parts, such as chapters, articles, or different sections of a document.
 78 | 
 79 | #### Code: 
 80 | ```html
 81 | <!DOCTYPE html>
 82 | <html>
 83 | <head>
 84 |     <title>Basic HTML</title>
 85 | </head>
 86 | <body>
 87 |     <section>
 88 |         <h2>Section Title</h2>
 89 |         <p>This is a section of content.</p>
 90 |         
 91 |     </section>
 92 | </body>
 93 | </html>
 94 | ```
 95 | ### Tags and buttons
 96 | 
 97 | ### Header tags
 98 | 
 99 | Header tags are used to structure the hierarchy of content on a webpage, with `<h1>` typically being the main title and `<h2>`, `<h3>`, and so on used for subsections. They help improve the accessibility and readability of content.
100 |     
101 | #### Code:
102 | 
103 | ```html
104 | <h1>Main Heading</h1>
105 | <h2>Subheading</h2>
106 | <h3>Sub-subheading</h3>
107 | ```
108 | 
109 | #### Output
110 | 
111 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/113/original/upload_0666ce092529c955114832a23824d462.png?1695109287)
112 | 
113 | #### Anchor tags
114 | Anchor tags are used to link to other web pages or resources, both within the same website or externally to other websites.
115 | 
116 | #### Code:
117 | ```html
118 | <!DOCTYPE html>
119 | <html>
120 | <head>
121 |     <title>Basic HTML</title>
122 | </head>
123 | <body>
124 |     <section>
125 |         <a href = "https://www.scaler.com/topics/autoboxing-in-java/">Learn autoboxing - in - java</a>
126 |     </section>
127 | </body>
128 | </html>
129 | 
130 | ```
131 | #### Output
132 | 
133 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/114/original/upload_a280807eb2f3df89d88691096051f0eb.png?1695109351)
134 | 
135 | #### Image tags
136 | Image tags are used to display graphics, photographs, icons, or any other visual content on a webpage. The alt attribute provides alternative text for accessibility and SEO purposes.
137 | 
138 | #### Code:
139 | ```html
140 | <!DOCTYPE html>
141 | <html>
142 | <head>
143 |     <title>Basic HTML</title>
144 | </head>
145 | <body>
146 |    <img src = "img.jpg" alt = "Description of the image">
147 | </body>
148 | </html>
149 | ```
150 | #### Output
151 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/115/original/upload_4f0ea4a42e75394bc79c854cbe6cafce.png?1695109387)
152 | 
153 | #### Buttons
154 | Button elements are used to create clickable elements that can trigger actions when clicked, such as submitting a form or triggering JavaScript functions.
155 | 
156 | #### Code:
157 | ```html
158 | <button type = "button"> BUTTON </button>
159 | ```
160 | #### Output
161 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/116/original/upload_e873e3ecb310330c64503dafcf33ad53.png?1695109456)
162 | 
163 | 
164 | 


--------------------------------------------------------------------------------
/LLD-1 (HTML/CSS)/2_HTML (Lists , Tables and Forms).md:
--------------------------------------------------------------------------------
  1 | ## List
  2 | 
  3 | In HTML you can structure your content in a more readable and organized manner using lists. There are two types of lists such as 
  4 | 1. Ordered lists `<ol>` and,
  5 | 2. Unordered lists `<ul>`
  6 | 
  7 | ## 1. Ordered List
  8 | An ordered list is used to create a list of items that have a specific sequence or order. Each item in an ordered list is typically numbered, and the numbers usually increment in a sequential manner.
  9 | Each list item is defined with the `<li>` (list item) element, this will be more clear further in this article.
 10 | 
 11 | An ordered list can store content in two ways as well: 
 12 | 1. Non-alphabetically ordered
 13 | 2. Alphabetically ordered
 14 | 
 15 | #### 1.1 Ordered List
 16 | In the following code you can clearly see that the output generated is not structured alphabetically but listed in an orderely fashion
 17 | 
 18 | #### Pseudocode
 19 | 
 20 | ```html
 21 | <!DOCTYPE html>
 22 | <html>
 23 | <head>
 24 |     <title>List Examples</title>
 25 | </head>
 26 | <body>
 27 |     <ol>
 28 |         <li>Banana</li>
 29 |         <li>Apple</li>
 30 |         <li>Strawberry</li>
 31 |     </ol>
 32 | </body>
 33 | </html>
 34 | ```
 35 | #### Output:
 36 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/117/original/upload_2e99c2e6057a7cefa9e96c95d9c27f37.png?1695110158)
 37 | 
 38 | ### 1.2. Alphabetical Ordered List
 39 | In order to structure list in alphabetical fashion we can use `type = "A"` between `<ol>` tags
 40 | #### Pseudocode
 41 | ```html
 42 | <!DOCTYPE html>
 43 | <html>
 44 | <head>
 45 |     <title>Alphabetical Ordered List</title>
 46 | </head>
 47 | <body>
 48 |     <h1>Alphabetical Ordered List Example</h1>
 49 | 
 50 |     <ol type = "A">
 51 |         <li>Banana</li>
 52 |         <li>Apple</li>
 53 |         <li>Strawberry</li>
 54 |     </ol>
 55 | 
 56 | </body>
 57 | </html>
 58 | ```
 59 | **Output:**
 60 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/118/original/upload_ef0ce2a0099cb2aed2158fe245251153.png?1695110223)
 61 | 
 62 | ### 2. Unordered List
 63 | Use `<ul>` tags for displaying a list with the help of symbols/shapes. In this case we're considering shapes. 
 64 | #### Pseudocode
 65 | ```html
 66 | <!DOCTYPE html>
 67 | <html>
 68 | <head>
 69 |     <title>List Examples</title>
 70 | </head>
 71 | <body>
 72 |     <ul type = "circle">
 73 |         <li>Banana</li>
 74 |         <li>Apple</li>
 75 |         <li>Strawberry</li>
 76 |     </ul
 77 | </body>
 78 | </html>
 79 | ```
 80 | #### Output:
 81 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/119/original/upload_c4298d24e8363ee59290b3ea888e16ca.png?1695110251)
 82 | 
 83 | 
 84 | ## Tables in HTML
 85 | 
 86 | We gnerally tables are used to organize and display data in a structured format. Tables consist of rows and columns, where each cell is capable of storing data in form of text, images, links, or other HTML elements. But in-order to create tables in HTML one needs to be familiar with certain tags and attributes used such as:
 87 | 1. `<table`:  tag is used to define the beginning of a table
 88 | 2.`<td>`: tag represents a table cell that contains data
 89 | 3. `<tr>`: tag represents a table row
 90 | 4. `<th>` : tag represents a table header and is used to label columns or provide additional information about the data
 91 | 5. `<thead>`: tag is used to group the header content in a table. It typically contains one or more `<tr>` elements with `<th>` elements inside.
 92 | 6. `<tbody>`: tag groups the body content of the table. 
 93 | 7. `<caption>`: tag is used to provide a title or caption for the table. It is placed immediately after the opening `<table>` tag.
 94 | 8. **border attribute**: is used to specify the thickness of the border around the table and its cells.
 95 | 
 96 | 
 97 | #### Pseudocode
 98 | ```html
 99 | <!DOCTYPE html>
100 | <html>
101 | <head>
102 |     <title>List Examples</title>
103 | </head>
104 | <body>
105 |     <table border style = "text-align: center;">
106 |     <caption>Student's Marksheet</caption>
107 |     <thead>
108 |       <th>Student</th>
109 |       <th>Roll No.</th>
110 |       <th>Marks</th>
111 |     </thead>
112 |     <tbody>
113 |       <tr>
114 |          <td>1</td>
115 |          <td>2016911</td>
116 |          <td>98</td>
117 |       </tr>
118 |       <tr>
119 |          <td>2</td>
120 |          <td>2015911</td>
121 |          <td>78</td>
122 |       </tr>
123 |     </tbody>
124 |    </table>
125 | </body>
126 | </html>
127 | ```
128 | #### Output:
129 | 
130 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/120/original/upload_051534e2f8bbaa444c5fff971dbba317.png?1695110359)
131 | 
132 | ## HTML Forms
133 | 
134 | Just like any other forms are used to collect information, in context of HTML it collects user input on a web page. They allow users to enter data, make selections, and submit that information to a server for processing. HTML forms are created using a combination of form-related tags and input elements such as 
135 | 1. `<form>`: tag defines the beginning of a form and contains the elements that make up the form, such as text fields, checkboxes, and buttons. It has several attributes, including action (specifying the URL to which the form data should be submitted) and method (specifying the HTTP request method, usually "**GET**" or "**POST**")
136 | 2. `<input>`: The `<input>` tag is used to create various types of form input fields. The type attribute specifies the type of input field to be displayed. Common type values include:
137 |    * **text:** Creates a single-line text input.
138 |    * **password:** Creates a password input field (text is masked for security).
139 |    * **checkbox:** Creates a checkbox for binary (true/false) choices.
140 |    * **radio:** Creates a radio button for selecting one option from a group.
141 |    * **submit:** Creates a submit button to send the form data.
142 |    * **button:** Creates a generic button.
143 |    * **file:** Allows users to upload files.
144 |    * **date, email, number, and more:** Various input types for specific data formats.
145 | 3. `<label>`: tag is used to associate a label with a form element, making the form more accessible and user-friendly. The for attribute of the `<label>` tag should match the id attribute of the form element it labels.
146 | 4. `<select>`: tag creates a dropdown list, allowing users to select one option from a list of choices. It contains one or more `<option>` elements.
147 | 5. `<option>`: tag defines an individual item in a `<select>` dropdown list. The value attribute specifies the value that will be sent to the server when the form is submitted.
148 | 6. `<button>`: acts as an input element in HTML and is used for various purposes in a form including the submission of a form. We have different types of input elements as well such as checkboxes `<input type = "checkbox">`, radio buttons `<input type = "radio">`, and other input elements as needed to gather user input
149 | 
150 | #### Pseudocode
151 | ```html
152 | <!DOCTYPE html>
153 | <html>
154 | <head>
155 |     <title>List Examples</title>
156 | </head>
157 | <body>
158 |    <form>
159 |       <label>Name</label>
160 |       <input type = "text">
161 | 
162 |       <label>Email</label>
163 |       <input type = "email">
164 | 
165 |       <label>Phone</label>
166 |       <input type = "number" maxlength = "10">
167 | 
168 |       <label>age</label>
169 |       <input type = "number" min = "1" max = "100">
170 | 
171 |       <label>Birthday</label>
172 |       <input type = "date" min = "1905 - 06 - 18" max = "2002 - 06 - 10">
173 | 
174 |       <p>Food</p>
175 |       <label>Apple</label>
176 |       <input type = "checkbox">
177 |       <label>Orange</label>
178 |       <input type = "checkbox">
179 |       <label>Banana</label>
180 |       <input type = "checkbox">
181 | 
182 |       <p>Gender</p>
183 |       <label>Male</label>
184 |       <input type = "radio">
185 |       <label>Female</label>
186 |       <input type = "radio">
187 | 
188 |       <label for = "">Eyecolor</label>
189 |       <select>
190 |          <option>Blue</option>
191 |          <option>Black</option>
192 |          <option>Red</option>
193 |       </select>
194 | 
195 | 
196 | 
197 |    </form>
198 | </body>
199 | </html>
200 | ```
201 | #### Output:
202 | 
203 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/121/original/upload_f466e18fe597bb978dd2f93f02a9c0f7.png?1695110510)
204 | 
205 | 
206 | 
207 | ##  Inline Elements
208 | 
209 | In HTML, elements are categorized as either block-level elements or inline elements. Inline elements do not create new block-level containers and flow within the content of surrounding elements. The `<span> `element is one such common inline element used for various purposes. It's a generic inline container that is often used to apply styles or attributes to a specific portion of text within a larger block of content.
210 | 
211 | #### Pseudocode
212 | 
213 | ```html
214 | <!DOCTYPE html>
215 | <html>
216 | <head>
217 |     <title>Span in Inline Element Example</title>
218 | </head>
219 | <body>
220 |     <h1>Inline Element with Span</h1>
221 | 
222 |     <p>This is a <strong><span style = "color: red ; ">red</span></strong> word.</p>
223 | 
224 | </body>
225 | </html>
226 | <!DOCTYPE html>
227 | <html>
228 | <head>
229 |     <title>Span in Inline Element Example</title>
230 | </head>
231 | <body>
232 |     <h1>Inline Element with Span</h1>
233 | 
234 |     <p>This is a <strong><span style = "color: red;">red</span></strong> word.</p>
235 | 
236 | </body>
237 | </html>
238 | 
239 | ```
240 | #### Output:
241 | 
242 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/122/original/upload_c10b7b956b460dadbe2f8996096eed32.png?1695111073)
243 | 
244 | 
245 | 


--------------------------------------------------------------------------------
/LLD-1 (HTML/CSS)/3_Introduction to CSS.md:
--------------------------------------------------------------------------------
  1 | # Agenda:
  2 | - What is CSS
  3 | - Need for CSS
  4 | - CSS Selectors
  5 | - Properties of CSS (color, background, fonts, and texts)
  6 | 
  7 | So, lets start!
  8 | 
  9 | 
 10 | >Various ways of using CSS
 11 | They are: 
 12 | 1. Inline
 13 | 2. Internal
 14 | 3. External
 15 | 
 16 | 
 17 | These are the things that we will discuss. Now, let us see them one by one.
 18 | 
 19 | 
 20 | - Create a basic HTML file and add a heading **h1** inside the body tag entitled: "Heading 1" and open it in a browser to show how it looks.
 21 | - Now, let us see how to add CSS to this element.
 22 | 
 23 | 
 24 | # Steps to add style tag:
 25 | - Add `<style>` and `</style>` tag inside the head tag of your HTML file. Inside this **style** tag, you can use all the CSS stylings.
 26 | - Select the element that you need to add CSS.
 27 | - For example, h1 and add curly braces to it. Inside this, you can define the CSS properties as shown below:
 28 | 
 29 | ```HTML=
 30 | h1{
 31 |     color : brown;
 32 | }
 33 | 
 34 | 
 35 | 
 36 | # Using CSS in three different ways:
 37 | 
 38 | ## 1. Internal CSS 
 39 | - When you write CSS in the same HTML file. (using the style tag)
 40 | 
 41 | 
 42 | ## 2. Inline CSS
 43 | - It is writing CSS for a particular element. (using style attribute.) 
 44 | 
 45 | ### Example
 46 | ```
 47 | <h2 style = "color: red;"> I am heading 2 </h2>
 48 | ```
 49 | - Here we are providing the CSS to that specific element "h2" only, known as Inline CSS. Always try to add a style tag inside the **head tag**.
 50 | - Inline CSS has more priority than Internal CSS.
 51 | 
 52 | 
 53 | ## 3. External CSS
 54 | - You can create a separate file for CSS having the extension "**.css**".
 55 | - Here you do not need to use any HTML tag. You can directly write your CSS and properties.
 56 | 
 57 | ### Example
 58 | 
 59 | ```HTML=
 60 | H3{
 61 |     color: green;
 62 | }
 63 | ```
 64 | To reflect these CSS into your HTML file, you need to link that CSS file to the HTML file.
 65 | - Use the "link" tag to do this as shown below.
 66 | 
 67 | ```
 68 | <link rel="CSS_file_name" href="./CSS_file_name.css">
 69 | ```
 70 | - You can add the file location in the **href** to add the CSS file if it is at some other location in your system.
 71 | 
 72 | > These are the three ways that can be used to apply CSS to your HTML file. Now we will discuss the ways of selecting a particular element.
 73 | 
 74 | 
 75 | - As we have seen in the previous example, **h1{}** was the selector. But there are more ways of selecting elements.
 76 | - Have a brief discussion about how the students can select an element as the previous method that we learned till now.
 77 | 
 78 | ## Descendent selectors
 79 | - Anything down the order can be termed as a descendent. For example, a father is the descendent of their child.
 80 | - Now, you need to select the obvious list as shown in the image and make it blue color.
 81 | 
 82 | 
 83 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/035/original/upload_741aa927d48eecd0dcd6ec59f15eba43.png?1695311213)
 84 | 
 85 | 
 86 | - For that first discuss the "**descent selector**". 
 87 | - When you select **ol li{}** as the selector then all the elements will get blue. So you need to select the specific parents that are "div" as shown in the example.
 88 | 
 89 | - We will write the selector as:
 90 | ```HTML=
 91 | div li{
 92 |     color: blue;
 93 | }
 94 | ```
 95 | Now moving to Children Selectors.
 96 | 
 97 | ## Children selectors
 98 | Let us take an example as shown below.
 99 | 
100 | 
101 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/036/original/upload_6e331819a556124295cda866b1ad80df.png?1695311277)
102 | 
103 | 
104 | There are two span tags. Here we need to make the text "I am the direct son" blue using CSS.
105 | 
106 | - Use the greater than **">"** symbol to use direct children.
107 | 
108 | ```html=
109 | div > h1 > span{
110 |     color: blue;
111 | 
112 | }
113 | ```
114 | - It means that you are directing to apply CSS to the span element that is directly children to the **h1**.
115 | 
116 | Let's see another type of selector which is the Classes
117 | 
118 | ## Classes
119 | 
120 | - It is a very important part when you are learning CSS.
121 | - Classes are defined as separate entities of similar elements.
122 | - For real real-life example, if you are in class 10, then all the students there should be in class 10 only.
123 | - Similarly, in CSS, similar elements having the same behavior are separated in a specific class as shown below code:
124 | 
125 | 
126 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/037/original/upload_130e57374ed680b30734deba9ee0b2c7.png?1695311313)
127 | 
128 | 
129 | - We use dot (.) to select a class and apply CSS to them. Here the name of the class is test so we will apply CSS to this class as below:
130 | 
131 | ```HTML=
132 | .test{
133 |     color: blue;
134 | }
135 | ```
136 | This will be applied to both the elements of the class namely the **test**.
137 | 
138 | > Discuss a question having two different classes namely **class1** and **class2** and apply CSS on them to make one class **blue** and one class **red**.
139 | - Solution:
140 | ```HTML=
141 | .class1{
142 |     color: blue;
143 | }:
144 | 
145 | .class2{
146 |     color: red;
147 | }
148 | ```
149 | ### Question on multiple classes
150 | 
151 | Suppose a situation when there are two or more than two classes for a single element as shown below and you have to make some specific elements blue.
152 | 
153 | 
154 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/038/original/upload_1a43d7aa8cd4e546b6264e88799e956b.png?1695311389)
155 | 
156 | 
157 | - Here we need to select multiple classes **m1** and **m2** and make them blue.
158 | - Solution:
159 | ```HTML=
160 | .m1.m2{    <!-- it is multiple selector -->
161 |     color : blue;
162 | }
163 | ```
164 | Here you will use multiple classes as shown in the example to apply the CSS to some specific elements in such cases.
165 | 
166 | ### Question on a combination of all the previously discussed selectors.
167 | 
168 | You have to make the text "**I'm here, find me**" blue as shown in the question image below. Feel free to use any selector or combination of selectors you want.
169 | 
170 | 
171 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/039/original/upload_e17f8e227f4328a482d1cc22803e0dc5.png?1695311505)
172 | 
173 | 
174 | 
175 | - **Solution**:
176 | 
177 | ```HTML=
178 | .c1 .c2{
179 |     color: blue;
180 | }
181 | ```
182 | 
183 | ### Question on Class with Children Combinator
184 | 
185 | In this question you need to make the select and make the text "**I'm a direct son**" blue.
186 | 
187 | 
188 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/041/original/upload_6e8bceeaca78cf983eb897650d522316.png?1695311598)
189 | 
190 | 
191 | - **Solution**:
192 | ```HTML=
193 | .c1>p{
194 |     color: blue;
195 | }
196 | ```
197 | 
198 | ### Question on id selector
199 | - The id selector uses the id attribute of an HTML element to select a specific element.
200 | 
201 | - The id of an element is unique within a page, so the id selector is used to select one unique element.
202 | - We use "#" to address the id.
203 | 
204 | 
205 | ### Example
206 | 
207 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/042/original/upload_0a85830042d3f0d832f66b0c11e9ab40.png?1695311661)
208 | 
209 | - You need to select **s2** with the "id=the-one" and make blue
210 | 
211 | - Solution:
212 | ```HTML=
213 | #the-one{
214 |     color: blue;
215 | }
216 | ```
217 | 
218 | ### Question on attribute selector
219 | 
220 | - CSS attribute selectors are used to select and style HTML elements with the specified attributes and values.
221 | - Let us take an example as shown below. Here we need to select the button element and make the color blue.
222 | 
223 | 
224 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/044/original/upload_106e606616e173b79a0a71bd501d9812.png?1695311699)
225 | 
226 | 
227 | - **Solution**:
228 | ```HTML=
229 | input[value="Select me"]{
230 |     color: blue;
231 | }
232 | ```
233 | Here you can write the element like "input" and start the bracket "[]". Inside the bracket, you can write the attribute that you are selecting to apply CSS.
234 | 
235 | - That's how the attribute selector works.
236 | 
237 | # 1. Normal Color 
238 | - The very basic way of using colors is as follows as we have discussed earlier that is `h1{color: color_name;}`
239 | - Using this method you can use the 140 colors of CSS. But what do you need to use a color apart from these 140 colors?
240 | 
241 | # 2. RGB
242 | - Then we use the **RGB value** to change the element colors. 
243 | - RGB is the color concept that shows how you can create any color using a definite proportion of these three colors that are **Red**, **Green**, and **Blue**.
244 | The range of RGB values is from **(000 to 255)**.
245 | 
246 | Let us take an example how to use RGB values for CSS.
247 | 
248 | 
249 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/045/original/upload_001bf16ebd83d5ea0df12fc19d263397.png?1695311917)
250 | [
251 | 
252 | - You can also add **opacity** property where you pass the RGB values. 
253 | - Range of opacity is from (0.00 to 1.00)
254 | - For example-
255 | 
256 | ```HTML=
257 | color : rgba(255, 165, 100, 0.50);
258 | ```
259 | 
260 | 
261 | 
262 | # 3. Color code (Hexadecimal code)
263 | - Color codes are three-byte hexadecimal numbers (meaning they consist of **six digits**), with each byte, or pair of characters in the Hex code, representing the intensity of **red**, **green**, and **blue** in the color respectively.
264 | - We have hex code for every color in CSS.
265 | - You can find these codes on Google search also.
266 | 
267 | 
268 | - You can use these hex codes to paste into your CSS thing.
269 | - Remember to apply hashtag **"#"** before the codes. For example- **#DC143C** 
270 | 
271 | Now, let us see the 4th method of CSS Colors.
272 | 
273 | # 4. HSC 
274 | - It stands for **Hue**, **Saturation**, and **Lightness**.
275 | 
276 | ## Example
277 | ```HTML=
278 | h2{
279 |     color : hsl(100%, 15%, 25%)
280 | }
281 | ```
282 | - In this, we define these three properties in percentage.
283 | 
284 | 
285 | 
286 | # Final Question of the session
287 | 
288 | Now, let us summarize the session and use all the previous selectors and color properties to solve this problem shown below:
289 | 
290 | 
291 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/046/original/upload_cf0319b7c90943234aa84a26a0e8ff6f.png?1695312027)
292 | 
293 | 
294 | - **Solution**:
295 | First, we will add a style tag and then write all the CSS provided in the question like this:
296 | 
297 | 
298 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/047/original/upload_2ea1f412f739128739787f0498ccba03.png?1695312161)
299 | 
300 | 
301 | Coming to the point 6 of the question. Let us first see what is pseudo selector.
302 | 
303 | ## Pseudo selector
304 | - When you hover over any element and it changes its behavior, it is known as a Pseudo selector.
305 | - For example, if you go on a sign-in button it becomes popped up.
306 | 
307 | ```HTML=
308 | a.hover{
309 |     color : hsla(100%, 15%, 25%, 0.6)
310 | }
311 | ```
312 | 
313 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/050/048/original/upload_14bb1001ae9af53dda59aa7200cd2c8f.png?1695312197)
314 | 
315 | 


--------------------------------------------------------------------------------
/LLD-1 (HTML/CSS)/4_CSS Display , Box model and Positioning.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | The topics we are going to cover in today's session are:
  4 | - Previous lecture recap with left topics
  5 | - CSS Fonts
  6 | - Box Model
  7 | - Display Property in CSS
  8 | 
  9 | So, let us start with the session.
 10 | 
 11 | 
 12 | So, in the previous lecture, we left the background color in CSS.
 13 | - It works the same as the color.
 14 | - You can add CSS code for background color as :
 15 | ```HTML=
 16 | h1{
 17 |     background-color : blue;
 18 | }
 19 | ```
 20 | 
 21 | ## **Example**:
 22 | 
 23 | [IMAGE_1 START SAMPLE]
 24 | ![](https://hackmd.io/_uploads/ryUXY8npn.png)
 25 | [IMAGE_1 FINISH SAMPLE]
 26 | 
 27 | Here you will select the class namely "background" and apply CSS to them. It will be reflected to all the **h1s** inside that div tag.
 28 | 
 29 | > `color` is used to change the text color but `background-color` is used to change the color area behind that text.
 30 | 
 31 | - You can also use an image as the text background. To do this, you need to provide the image URL in the CSS as shown below:
 32 | ```HTML=
 33 | h1{
 34 |     background-color : url(" url_of_that_specific_image.jpg ");
 35 | }
 36 | ```
 37 | 
 38 | You can set the background size as:
 39 | ```HTML=
 40 | h1{
 41 |     background-color : url(" url_of_that_specific_image.jpg ");
 42 |     background-size : 400px;
 43 | }
 44 | ```
 45 | - In the CSS background property, when it finds any empty space, it starts to repeat its element. You can use the property `background : no-repeat;` to avoid it. 
 46 | - -You can customize the repetition of the BG image using the X and Y axis. 
 47 | 
 48 | - You can customize various aspects of the font such as size, look, and many dynamics of it. Let us see them one by one.
 49 | - First, create a file as shown below:
 50 |   
 51 | [IMAGE_2 START SAMPLE]
 52 | ![](https://hackmd.io/_uploads/rJ3VYLh62.png)
 53 | [IMAGE_2 FINISH SAMPLE]
 54 | 
 55 | Then we will apply CSS to the fonts. First, let us see font family.
 56 | 
 57 | ## Font family
 58 | - The different types of font available in the CSS are termed as font family.
 59 | - The font-family property can hold several font names as a "**fallback**" system. If the browser does not support the first font, it tries the next font.
 60 | - Font family are like "times", "courier", "arial". If you want to use a single font from this, you can just remove the other font styles from the font family.
 61 | - Syntax:
 62 | ```HTML=
 63 | .heading_1{
 64 |     font-family: your_desired_font
 65 | }
 66 | ```
 67 | 
 68 | ## Font weight
 69 | - This font property is used to decide the intensity of the font.
 70 | - It's value ranges from lightest **100px** to boldest **800px**.
 71 | - Syntax:
 72 | 
 73 | ```HTML=
 74 | font-weight: 800px;
 75 | ```
 76 | 
 77 | ## Font size
 78 | - It refers to the size of the text.
 79 | - Syntax:
 80 | ```HTML=
 81 | font-size: xx-larger;
 82 | ```
 83 | ```HTML=
 84 | font-size: 50%;
 85 | ```
 86 | 
 87 | - There is also a font-style that you can choose to customize your font like bold, italic, etc.
 88 | 
 89 | ## Google font
 90 | - If you are not unable to get the font requirement from the above font properties, then you can use the Google font option.
 91 | - You just need to go to the Google search and search "**google font**". Refer website: `https://fonts.google.com/`.
 92 | - Here you can find and choose the font. Click over the font and you will get a lot of options to customize that font.
 93 | - Click on "**select font_style**" and select the link there.
 94 | - Then paste it on your HTML file head tag as shown below.
 95 | 
 96 | [IMAGE_3 START SAMPLE]
 97 | ![](https://hackmd.io/_uploads/Hyn8KInT3.png)
 98 | [IMAGE_3 FINISH SAMPLE]
 99 | 
100 | - Now copy the font family from the Google font website and you can use it in the CSS.
101 | - Since you have imported the Google fonts using API till now. Now you can just copy the font family from Google font and paste it at the font family section in the link of the head tag.
102 | 
103 | - Font and text can be seen as similar but they are not.
104 | - Font focus on the look and styling but Text is the internal working of your text such as spacing, line width, etc.
105 | - First, create a file of HTML is shown below
106 | 
107 | [IMAGE_4 START SAMPLE]
108 | ![](https://hackmd.io/_uploads/Sy-OFI263.png)
109 | [IMAGE_4 FINISH SAMPLE]
110 | 
111 | First, let us see the text alignment property
112 | 
113 | ## Text Alignment
114 | - It is used to make the alignment of your text like from the left, from the right, or in the center.
115 | - Syntax:
116 | 
117 | ```HTML=
118 | .heading_1{
119 |     text-align : left;
120 | }
121 | 
122 | ```
123 | 
124 | ## Text Decoration
125 | - It is used to make your text attractive using some properties.
126 | - These are oval-line, line-through, underline, etc.
127 | - Syntax:
128 | 
129 | ```HTML=
130 | .heading_1{
131 |     text-decoration : oval-line;
132 | }
133 | ```
134 | 
135 | ## Word Spacing
136 | - It defines how many spaces are there between any two consecutive words.
137 | - It is defined using the pixel values.
138 | - Syntax:
139 | 
140 | ```HTML=
141 | .heading_1{
142 |     text-decoration : oval-line;
143 |     word-spacing : 100px;
144 | }
145 | ```
146 | ## Line Height
147 | - It defines the height between two consecutive lines.
148 | - Syntax:
149 | 
150 | ```HTML=
151 | .heading_1{
152 |     text-decoration : oval-line;
153 |     word-spacing : 100px;
154 |     line-height : 100px;
155 | }
156 | ```
157 | These are all text and font properties.
158 | 
159 | 
160 | - Anything that we create in HTML and CSS takes the form of a box.
161 | - You can check this by inspecting.
162 | - Go to any website that we have created till now, select an html element paragraph and right click, then click on **inspect**. Here you see the boxing of your content in the right panel.
163 | 
164 | Always remember to add height and width to your box otherwise, it will not be visible. Make the box as shown below.
165 | 
166 | [IMAGE_5 START SAMPLE]
167 | ![](https://hackmd.io/_uploads/SkQYFU2a2.png)
168 | [IMAGE_5 FINISH SAMPLE]
169 | 
170 | You can customize the size of the box by changing the height and width values.
171 | 
172 | > Take a real-life example of creating a township including steps like making land cut, house placing, etc. to discuss the box concept. And introduce `padding`.
173 | 
174 | ## Padding
175 | - It is the empty area inside the container.
176 | - You can apply the padding outside your content but it should be inside your container box.
177 | - Syntax to add padding:
178 | 
179 | ```HTML=
180 | h1{
181 |     padding : 20px;
182 | }
183 | ```
184 | - **Increasing the padding** area **decreases the container** space. Because padding is only inside that specific container, it can not go outside of the box.
185 | 
186 | 
187 | ## Margin
188 | - The CSS margin properties are used to create space around two different elements, outside of any defined borders.
189 | - It prevents your elements from getting overlapped.
190 | - Syntax:
191 | - Create another box as in the previous example then,
192 | 
193 | ```HTML=
194 | .box_2{
195 |     width: 100px;
196 |     height: 120px;
197 |     background-color: blue;
198 | }
199 | ```
200 | - There are already some margins by CCS default. But you can customize it as :
201 | 
202 | ```HTML=
203 | .box_2{
204 |     width: 100px;
205 |     height: 120px;
206 |     background-color: blue;
207 |     margin : 0px;
208 | }
209 | ```
210 | > You can use the universal selector (*) to apply the desired CSS property to all the elements.
211 | 
212 | Syntax: 
213 | ```
214 | *{
215 |    CSS_Property
216 | }
217 | ```
218 | 
219 | ## Applying Margins, Padding and Border 
220 | - First, let us create three containers:
221 | 
222 | [IMAGE_6 START SAMPLE]
223 | ![](https://hackmd.io/_uploads/BkXsY836h.png)
224 | [IMAGE_6 FINISH SAMPLE]
225 | 
226 | - The CSS that we apply in the containers will be applied to all the containers because they all have the same name.
227 | - When you apply margin 20px, it gets reflected in the element from all sides.
228 | - If you want to apply margin from a specific side say top, then :
229 | 
230 | ```HTML=
231 | .container{
232 |     background-color : lightgreen;
233 |     martin-top : 20px;
234 | }
235 | ```
236 | - Likewise, you can apply margin for **bottom**, **left** and **right** side too.
237 | 
238 | Now, let us apply padding.
239 | 
240 | - If you apply padding to the container, it gets reflected in the **div tag**. You can check by applying padding to the container.
241 | - So, it should be avoided. Rather it is best practice to **apply padding to the elements** by targeting the element separately in the style tag  as:
242 | 
243 | ```HTML=
244 | h1{
245 |     padding : 20px;
246 | }
247 | ```
248 | 
249 | Coming to margins,
250 | - If can apply four values to the margin property as `margin : 10px 20px 30px 40px;` it will be reflected as `margin : top right bottom left`
251 | - You can try using different margin values to see the different results. 
252 | - If you pass three values to the margin property and forget the last value, as `margin: 10px 20px 30px;`, then it will be reflected as "10 px for top and 20 px as left and right both and 40px for bottom".
253 | - If you pass two values to the margin property as `margin : 10px 20px;`, then it will be reflected as "10px for top and bottom, and 20px as left and right.
254 | 
255 | > All these concepts are similar for **padding**. You just need to use padding in place of margins. And the rest of the rules will be the same.
256 | 
257 | 
258 | ## Border
259 | - Border is defined as that extra space that you can create around your HTML elements.
260 | - There are many types of borders such as **solid**, **dashed**, **dotted**, etc. that you need to define in the syntax to see it.
261 | - Syntax:
262 | 
263 | ```HTML=
264 | .container{
265 |     background-color : lightgreen;
266 |     martin-top : 20px;
267 |     border : 2px solid red;
268 | }
269 | ```
270 | ### Border Alignment Properties
271 | - border-top : 5px solid blue ;
272 | - border-left: 2px solid red;
273 | - border-right: 6px dashed green;
274 | - border bottom: 5px solid red;
275 | 
276 | ### Border Radius Properties
277 | - It is used to apply curved edges to the borders
278 | - Syntax:
279 | 
280 | ```HTML=
281 | border-radius : 20px;
282 | ```
283 | You can also apply this radius to a specific side of the border for example : `` border-top-right_radius: 20px;``
284 | 
285 | 
286 | > These are the all properties and concepts (Margins, Padding, and Borders) that together are termed as "**Box Model** in CSS".
287 | 
288 | 
289 | 
290 | 
291 | # Question
292 | What is the order of values when passing all four values in the margin?
293 | # Choices
294 | 
295 | - [ ] top right left bottom
296 | - [ ] right left top bottom
297 | - [ ] top bottom left right
298 | - [x] top right bottom left
299 | 
300 | 
301 | > Summarizing
302 | - Everything that we create in an HTML is taken as a Box known as **Box Model**.
303 | - It will have two dimensions that are Height and Width. 
304 | - And these boxes have three properties that are **Margin**. **Padding**, and **Border**.
305 | 
306 | 
307 | 
308 | First, let us create a file as shown below to understand the working of the Display property:
309 | 
310 | [IMAGE_7 START SAMPLE]
311 | ![](https://hackmd.io/_uploads/H1pRtL2T3.png)
312 | [IMAGE_7 FINISH SAMPLE]
313 | 
314 | > Note: Rem is also a unit to define pixels. It converts the pixel into 10 times. For example **5rem** is **50px**.
315 | 
316 | 
317 | When you see the output you can see that the border is taking the whole area of paragraphs. But it should be on the paragraph **p1** only.
318 | 
319 | Now, let us add a span tag to the file as shown below:
320 | 
321 | [IMAGE_8 START SAMPLE]
322 | ![](https://hackmd.io/_uploads/Bk8TjInTh.png)
323 | [IMAGE_8 FINISH SAMPLE] 
324 | 
325 | When you run this file, You can see that these **span tags** are not acting as a paragraph. This means that there are no borders applied to it.
326 | 
327 | Now, give this span tag border, height, and width property as :
328 | 
329 | ```HTML=
330 | span{
331 |     border: 2px solid blue;
332 |     height: 50px;
333 |     width: 50px; 
334 | }
335 | ```
336 | Now give the p tag height and width as :
337 | 
338 | ```HTML=
339 | p{
340 |     border: 2px solid red;
341 |     height: 50px;
342 |     width: 50px;
343 | }
344 | ```
345 | You can see in the output that there are no changes seen in the span tag.
346 | 
347 | > Note: Block elements can have customizable height and width but you can not provide height and width to the inline elements (**span tag** in this case). 
348 | 
349 | 
350 | Here comes the need for **Display property**
351 | 
352 | - Add a random image to the file using **img src tag**.
353 | - Also add an anchor tag entitled "click me".
354 | - You can see that you can provide customizable height and width to the image. Here, it is working as both inline and block elements.
355 | - CSS allows the user to add all of these tags as a Display property.
356 | - Syntax:
357 | 
358 | ```HTML=
359 | p{
360 |     display : inline;
361 | }
362 | ```
363 | This makes your element an **inline-block**. That's the work of the Display property in CSS. After that, you can provide height and width to the inline elements too.
364 | 
365 | 
366 | 


--------------------------------------------------------------------------------
/LLD-1 (HTML/CSS)/7_CSS (specificity , inheritance , rendering).md:
--------------------------------------------------------------------------------
  1 | # CSS Cascading, Specificity, Inheritance and Overflow
  2 | 
  3 | 
  4 | ### Introduction
  5 | 
  6 | Before starting with the topic, let us understand the simple definition of *Priority and Specific*. These two words create a concept in CSS that is known as Specificity.
  7 | 
  8 | **Priority:** Suppose three tasks are to be done. All the tasks can be arranged based on the task that has to be done first. The task with the highest priority will be on the top.
  9 | 
 10 | **Specific:** Suppose you are diagnosed with fever then the doctor prescribes you with some medicines that are *particular* to the disease i.e., fever. 
 11 | 
 12 | 
 13 | ### What is Cascading in CSS?
 14 | 
 15 | Cascade is defined as top-to-bottom flow.
 16 | 
 17 | *Example:* 
 18 | ```css!
 19 | .h1{
 20 |     colour: red;
 21 | }
 22 | .h1{
 23 |     colour: blue;
 24 | }
 25 | ```
 26 | The output will be blue because cascading always goes down therefore blue comes later therefore priority will be given to the later part.
 27 | 
 28 | **CSS Cascading involves Specificity and Inheritance which will be covered in this lecture.**
 29 | 
 30 | 
 31 | 
 32 | ### Specificity
 33 | 
 34 | To understand specificity let's take an example.
 35 | 
 36 | **First**: Create an HTML file to understand specificity.
 37 | **Second**: Create an unordered list of let's say "fruits".
 38 | 
 39 | ```htmlembedded!
 40 | <body>  
 41 |     <ul>
 42 |         <li>Apple</li>
 43 |         <li>Mango</li>
 44 |         <li>Orange</li>
 45 |     </ul>
 46 | </body>
 47 | ```
 48 | 
 49 | **Third**: Assign 'id' and 'class' to your unordered list.
 50 | 
 51 | ```htmlembedded!
 52 | <body>
 53 |     <ul id = "fruits">
 54 |         <li>Apple</li>
 55 |         <li class ="favourite">Mango</li>
 56 |         <li>Orange</li>
 57 |     </ul>
 58 | </body>
 59 | ```
 60 | 
 61 | **Fourth**: Using CSS, make the colour of the class "favourite" blue.
 62 | 
 63 | The Selector will be id i.e., "fruits" Inside this id select a list element and then a specific class i.e., "favourite".
 64 | 
 65 | ```htmlembedded!
 66 | <style>
 67 |     ul#fruits li.favourite{
 68 |       color: blue;  
 69 |     }    
 70 | </style>
 71 | ```
 72 | 
 73 | **Fifth**: Using CSS, change the colour of the unordered list to blue as well.
 74 | 
 75 | ```htmlembedded!
 76 | <style>
 77 |     ul#fruits li.favourite{
 78 |       color: blue;  
 79 |     }    
 80 |     
 81 |     ul#fruits li{
 82 |         color: blue;
 83 |     }
 84 | </style>
 85 | ```
 86 | 
 87 | **[Ask the learners]**
 88 | 
 89 | What will happen if we change the colour of the unordered list to blue after changing the colour of class "favourite" to red?
 90 | 
 91 | ```htmlembedded!
 92 | <style>
 93 |     ul#fruits li.favourite{
 94 |       color: red;  
 95 |     }    
 96 |     
 97 |     ul#fruits li{
 98 |         color: blue;
 99 |     }
100 | </style>
101 | ```
102 | 
103 | --> The result will be that **"Mango" will be of red** colour and the rest list elements will be blue because it is using the **Specificity** property.
104 | Hover over the selector `ul#fruits li` you will see "Selector Specificity: (1,0,2)".
105 | 
106 | Before understanding the Selector Specificity values: 
107 | 
108 | **[Ask the learners]**
109 | 
110 | What if the style attribute is applied in the list tag with class = "favourite"?
111 | 
112 | ```htmlembedded!
113 | <body>
114 |     <ul id = "fruits">
115 |         <li>Apple</li>
116 |         <li class ="favourite" style= "color: yellow;">Mango</li>
117 |         <li>Orange</li>
118 |     </ul>
119 | </body>
120 | ```
121 | 
122 | --> The result will be that **the value of Mango will turn to "yellow"** and the rest of the list elements will remain blue because the style attribute does not get affected by the style tag.
123 | 
124 | ### Understanding values in specificity
125 | 
126 | Specificity can have **four** values if the style attribute is also included.
127 | 
128 | 
129 | 
130 | | Style attribute | IDs | Classes | Elements |
131 | | :--------: | :--------: | :--------: | :---------: |
132 | 
133 | #### How to count specificity?
134 | 
135 | The selector `ul#fruits li` has "Selector Specificity: (1,0,2)". But how?
136 | 
137 | There is 1 ID i.e., fruits. There is no class added in the selector. There are 2 elements in the selector: ul and li. Therefore the value will be (1,0,2).
138 | 
139 | Similarly, the value of the selector `ul#fruits li.favourite` is (1,1,2).
140 | 
141 | #### How does the Selector Specificity make sure what selector should be applied?
142 | 
143 | > Remove style attribute from the list element with class = "favourite".
144 | 
145 | By comparing both the Selector Specificity values box by box: we see the value of the selector `ul#fruits li.favourite` is (1,1,2) which means it has 1 class while the other selector has no class. Therefore, the `ul#fruits li.favourite` selector will be applied.
146 | 
147 | **[Ask the learners]**
148 | 
149 | Arrange them from the least effective to the most effective selector.
150 | 1. `.test`
151 | 2. `h1.test`
152 | 3. `#try`
153 | 4. `h1`
154 | 
155 | --> **4<1<2<3** is the order.
156 | 
157 | Let's compare the values of each one of them.
158 | 1. `.test` - It has one class. Therefore, the value is (0,1,0).
159 | 2. `h1.test` - It has one class and one element. Therefore, the value is (0,1,1).
160 | 3. `#test` - It has one ID. Therefore, the value is (1,0,0).
161 | 4. `h1` - It has one element. Therefore, the value is (0,0,1).
162 | 
163 | **[Ask the learners]**
164 | 
165 | Calculate the value of the Selector Specificity of the following selector.
166 | `#try ul div.test h2{}`
167 | 
168 | --> **(0,1,1,3)**
169 | 
170 | ID - #try
171 | Class - .test
172 | Element - ul, div, h2
173 | 
174 | | Style attribute | ID| Class|Element|
175 | | :--------: | :--------: | :--------: | :-------: |
176 | | 0| 1   | 1  |3|
177 | 
178 | **[Ask the learners]**
179 | 
180 | Calculate the value of the Selector Specificity of the following selector.
181 | `#try span img .test .main header`
182 | 
183 | --> **(0,1,2,3)**
184 | 
185 | ID - #try
186 | Class - .test, .main
187 | Element - span, img, header
188 | 
189 | | Style attribute | ID| Class|Element|
190 | | :--------: | :--------: | :--------: | :-------: |
191 | | 0| 1   | 2 |3|
192 | 
193 | > You can use [Keegan](https://https://specificity.keegan.st/) to calculate Specificity value.
194 | 
195 | 
196 | ### Keyword - `!important`
197 | 
198 | If the keyword !important is used then it follows the cascading rule regardless of the Specificity Value. Use this keyword only once in a selector. If it is used twice for the same selector then the Specificity rule will be followed.
199 | 
200 | #### Example
201 | 
202 | ```css!
203 | ul#fruits li.favourite{
204 |       color: red;  
205 |     }    
206 |     
207 | ul#fruits li{
208 |       color: blue !important;
209 |     }
210 | ```
211 | 
212 | All the list elements will turn into a blue colour regardless of the Specificity Value.
213 | 
214 | > Priority of Inline CSS will be more than Internal CSS and External CSS.
215 | 
216 | > The priorities of the External CSS file and Internal CSS file can be changed by following the cascading rule. That means, whatever comes later will be followed.
217 | 
218 | 
219 | ### CSS Inheritance
220 | 
221 | #### Definition
222 | As the last names are inherited in a family same way inheritance works in CSS which inherits some property from the parent.
223 | 
224 | We will be looking at the four properties - **Default, Inherit, Initial and Unset**.
225 | 
226 | Let's take an example where we create an unordered list and add href to all the list elements:
227 | 
228 | ```htmlembedded!
229 | <ul>
230 |     <li>Default <a href="">Link</a> Color </li>
231 |     <li>Inherit <a href="">Link</a> Color </li>
232 |     <li>Initial <a href="">Link</a> Color </li>
233 |     <li>Unset <a href="">Link</a> Color </li>
234 | </ul>
235 | ```
236 | 
237 | First, Let's assign classes to the three properties: Inherit, Initial and Unset.
238 | 
239 | ```htmlembedded!
240 | <ul>
241 |     <li>Default <a href="">Link</a> Color </li>
242 |     <li class = "class-1">Inherit <a href="">Link</a> Color </li>
243 |     <li class = "class-2">Initial <a href="">Link</a> Color </li>
244 |     <li class = "class-3">Unset <a href="">Link</a> Color </li>
245 | </ul>
246 | ```
247 | 
248 | ### Inherit Property
249 | 
250 | Inherit is defined as the properties inherited from the parent. The properties applied to the parent are inherited by the child. 
251 | 
252 | For example
253 | 
254 | ```htmlembedded!
255 | <style>
256 |     div{
257 |         color: blue;
258 |     }
259 | </style>
260 | <body>
261 |     <div>
262 |         <h2>
263 |             Heading
264 |         </h2>
265 |     </div>
266 | </body>
267 | ```
268 | 
269 | The result will be that the heading tag will inherit the colour that is applied to the div element as it is the parent of the h2 tag.
270 | 
271 | If the parent is not specified then the parent will always be the body tag by default.
272 | 
273 | To understand it better, let's take "class-1" from our unordered list of inheritance properties and apply `color: inherit` to the anchor tag.
274 | 
275 | ```css!
276 | body{
277 |     color: red;
278 | }
279 | .class-1 a{
280 |     color: inherit;
281 | }
282 | ```
283 | 
284 | The term inherit means that whatever the colour of the parent tag is **(the default colour of CSS is black in most browsers)**, will be applied to the anchor tag of class: class-1 as well.
285 | 
286 | ### Initial Property
287 | 
288 | The initial property will always take the default properties.
289 | 
290 | ```css!
291 | body{
292 |     color: red;
293 | }
294 | .class-1 a{
295 |     color: inherit;
296 | }
297 | .class-2 a{
298 |     color: initial;
299 | }
300 | ```
301 | 
302 | The color of the class-2 anchor tag will take the default color i.e., black.
303 | 
304 | > There exists properties that cannot be inherited like display, and columns etc., You can check [w3schools](https://https://www.w3schools.com/cssref/css3_pr_columns.php) for more details on the properties.
305 | 
306 | ### Unset property
307 | 
308 | Unset depends on the inherited value.
309 | Unset checks if any properties in the body can be inherited will be inherited.
310 | 
311 | For example:
312 | 
313 | ```css
314 | body{
315 |     color: red;
316 |     display: inline;
317 | }
318 | .class-1 a{
319 |     color: inherit;
320 | }
321 | .class-2 a{
322 |     color: initial;
323 | }
324 | .class-3 a{
325 |     color: unset;
326 | }
327 | ```
328 | 
329 | 
330 | ### CSS Overflow
331 | 
332 | When the content goes out of the container is known as **Overflow**.
333 | 
334 | Let's take an example where we create a div element and add content of 100 words to it. We create a container and give it a static width and height.
335 | 
336 | ```htmlembedded!
337 | <style>
338 |     .content-box{
339 |         border: 2px solid tomato;
340 |         width: 200px;
341 |         height: 200px;
342 |     }
343 | </style>
344 | <body>
345 |     <div class = "content-box">
346 |         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
347 |     </div>
348 | </body>
349 | ```
350 | 
351 | The result will be that the box will not contain the whole content and it will create an overflow condition. Therefore, we will use overflow to overcome it. We can use auto, hidden, scroll and visible overflow properties.
352 | 
353 | #### Example
354 | 
355 | Let's understand how:
356 | 
357 | ```htmlembedded!
358 | <style>
359 |     .content-box{
360 |         border: 2px solid tomato;
361 |         width: 200px;
362 |         height: 200px;
363 |         overflow: hidden; /* the content going outside of the container will be hidden */
364 |     }
365 | </style>
366 | <body>
367 |     <div class = "content-box">
368 |         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.
369 |     </div>
370 | </body>
371 | ```
372 | 
373 | #### Properties of Overflow
374 | 
375 | **Hidden**: The content that remains outside the container will be hidden or not visible. It does not occupy space where the content is hidden.
376 | 
377 | **Scroll**: A scroll bar is added inside the container so that you can go through the whole content inside the container.
378 | 
379 | **Auto**: It works similarly to scroll the only difference is that scroll will always show scroll inside the container while auto will only show when the content is overflowing.
380 | 
381 | **Visible**: It will make the content visible. There will be no change.
382 | 
383 | > The container takes only the space designated to it. Therefore, the overflow content will overlap with the other content added after the container.
384 | 
385 | **[Ask the learners]**
386 | 
387 | How will we apply the overflow condition if we make the container horizontal for the following div content?
388 | 
389 | ```htmlembedded!
390 | <div class = "horizontal-content">
391 |     Scaler
392 | </div>
393 | ```
394 | 
395 | --> 
396 | ```htmlembedded!
397 | <style>
398 |     .horizontal-content{
399 |         font-size: 30px;
400 |         width: 50px;
401 |         height: 30px;
402 |         
403 |         border: 2px solid black;
404 |         
405 |         overflow: hidden;
406 |     }
407 | </style>
408 | ```
409 | 
410 | We can add any other property as well it will work similarly to the vertical container.
411 | 
412 | > If you want to hide the vertical or horizontal scroll bar you can use the following syntax: `overflow-x: hidden;` or `overflow-y: hidden;`.
413 | 
414 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/10_Debouncing and Throttling.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | ## SetTimeout Method
  4 | 
  5 | `SetTimeout` is a method that allows you to execute a specific function after a certain delay.
  6 | 
  7 | **Syntax:**
  8 | ```javascript
  9 | SetTimeoutCfn(function, delay);
 10 | ```
 11 | 
 12 | - `function`: The function you want to execute after the delay.
 13 | - `delay`: The time interval (in milliseconds) after which the specified function should be executed.
 14 | 
 15 | For example, if you want to start an animation after a delay of 1, 2, or 3 seconds, you could use the following code:
 16 | 
 17 | ```javascript
 18 | function startAnimation() {
 19 |     // Code to start the animation
 20 | }
 21 | 
 22 | // Using SetTimeout to call the startAnimation function after a delay
 23 | SetTimeoutCfn(startAnimation, 1000); // 1000 milliseconds (1 second)
 24 | SetTimeoutCfn(startAnimation, 2000); // 2000 milliseconds (2 seconds)
 25 | SetTimeoutCfn(startAnimation, 3000); // 3000 milliseconds (3 seconds)
 26 | ```
 27 | 
 28 | 
 29 | ```javascript
 30 | // Declare a variable to hold the timeout ID
 31 | let animationTimeout;
 32 | 
 33 | // Function to start the animation
 34 | function startAnimation() {
 35 |     // Code to start the animation
 36 |     console.log("Animation started");
 37 | }
 38 | 
 39 | // Function to stop the animation
 40 | function stopAnimation() {
 41 |     // Clear the timeout to prevent the animation from starting
 42 |     clearTimeout(animationTimeout);
 43 |     console.log("Animation stopped");
 44 | }
 45 | 
 46 | // Using SetTimeout to call the startAnimation function after a delay
 47 | animationTimeout = setTimeout(startAnimation, 2000); // Starts after 2000 milliseconds (2 seconds)
 48 | 
 49 | // You can call stopAnimation to cancel the scheduled animation
 50 | // For example, if you want to stop it before it starts
 51 | stopAnimation();
 52 | ```
 53 | 
 54 | In this example, we've introduced a variable `animationTimeout` to store the ID returned by the `setTimeout` function. This ID represents the scheduled timeout. When you want to stop the animation, you call `clearTimeout(animationTimeout)`, which cancels the scheduled animation and prevents it from starting.
 55 | 
 56 | Remember that using the `clearTimeout` function only has an effect if the specified timeout has not yet occurred. If the timeout has already triggered and the animation has started, clearing the timeout won't have any impact on the ongoing animation.
 57 | 
 58 | ## Debouncing
 59 | **Debouncing** is a technique used in web development to control the rate at which a function is executed, particularly in response to frequent events like scrolling, resizing, or typing. It ensures that a function is only executed after a certain period of inactivity, effectively reducing the number of times the function is called and improving performance.
 60 | 
 61 | The basic idea behind debouncing is to postpone the execution of a function until a certain amount of time has passed since the last event. This is particularly useful when you want to avoid triggering a function multiple times rapidly, which can lead to unnecessary computations or actions.
 62 | 
 63 | Here's a simple example of debouncing using JavaScript:
 64 | 
 65 | ```javascript
 66 | // Debounce function: accepts a function and a delay
 67 | function debounce(func, delay) {
 68 |     let timeoutId;
 69 | 
 70 |     // Return a function that will be executed after the delay
 71 |     return function() {
 72 |         // Clear the previous timeout
 73 |         clearTimeout(timeoutId);
 74 | 
 75 |         // Set a new timeout
 76 |         timeoutId = setTimeout(func, delay);
 77 |     };
 78 | }
 79 | 
 80 | // Function to be debounced
 81 | function processInput() {
 82 |     console.log("Processing input...");
 83 | }
 84 | 
 85 | // Create a debounced version of the processInput function
 86 | const debouncedProcessInput = debounce(processInput, 300);
 87 | 
 88 | // Simulate frequent user input (e.g., typing)
 89 | document.addEventListener("input", debouncedProcessInput);
 90 | ```
 91 | 
 92 | In this example, the `debounce` function takes two arguments: the function you want to debounce (`func`) and the delay period (`delay`). It returns a new function that, when invoked, will clear any existing timeout and set a new one to execute the original function after the specified delay.
 93 | 
 94 | The debounced version of the `processInput` function (`debouncedProcessInput`) is then used as an event listener for the "input" event. This means that the `processInput` function will only be executed after the user has stopped typing for 300 milliseconds. If the user continues typing, the timeout will be reset, ensuring that the function is only executed once there's a pause in typing.
 95 | 
 96 | This technique is useful in scenarios where you want to avoid overwhelming the system with frequent function calls, especially for tasks like live search suggestions, updating search results, or handling user interactions.
 97 | 
 98 | Certainly! Let's walk through the theoretical explanation of the debouncing code using the provided IDs and time intervals: `id=1` with `1000ms`, `id=2` with `2000ms`, `id=3` with `2500ms`, and `id=4` with `3000ms`. We'll use these values to simulate events and understand how the debouncing mechanism works.
 99 | 
100 | **Scenario and Explanation:**
101 | 
102 | Imagine that we have a user interface with a search bar. The user is typing in the search bar to perform a search, and we want to send a network request to fetch search results. However, we don't want to send a network request for every keystroke; instead, we want to wait until the user has finished typing or paused before sending the request.
103 | 
104 | Here's how the events play out:
105 | 
106 | 1. `id=1`, 1000ms: The user starts typing. This event triggers the `debouncedSendNetworkRequest` function, which is set to execute after a delay of 1000ms. Since the user hasn't finished typing yet, the timer is reset to 1000ms.
107 | 
108 | 2. `id=2`, 2000ms: The user continues typing. Another event occurs while the timer is still counting down. The timer is reset to 2000ms.
109 | 
110 | 3. `id=3`, 2500ms: The user is still typing, but this time there's less than 2500ms left on the timer. The timer is reset to 2500ms.
111 | 
112 | 4. `id=4`, 3000ms: The user has stopped typing, and there's no further event triggering. The timer reaches 0 after 3000ms of inactivity. At this point, the `debouncedSendNetworkRequest` function is finally executed since there hasn't been any activity for the duration of the timeout.
113 | 
114 | **Explanation of Code:**
115 | 
116 | Let's use the provided code example to explain how this works in JavaScript:
117 | 
118 | ```javascript
119 | // Debounce function for network requests
120 | function debounceNetworkRequest(func, delay) {
121 |     let timeoutId;
122 | 
123 |     return function() {
124 |         clearTimeout(timeoutId);
125 | 
126 |         timeoutId = setTimeout(func, delay);
127 |     };
128 | }
129 | 
130 | // Function to send network request
131 | function sendNetworkRequest() {
132 |     // Code to send the network request
133 |     console.log("Network request sent");
134 | }
135 | 
136 | // Create a debounced version of the network request function
137 | const debouncedSendNetworkRequest = debounceNetworkRequest(sendNetworkRequest, 1000);
138 | 
139 | // Simulate user typing events
140 | console.log("User starts typing...");
141 | debouncedSendNetworkRequest(); // id=1, 1000ms
142 | debouncedSendNetworkRequest(); // id=2, 2000ms
143 | debouncedSendNetworkRequest(); // id=3, 2500ms
144 | console.log("User stops typing...");
145 | debouncedSendNetworkRequest(); // id=4, 3000ms
146 | ```
147 | 
148 | As the code simulates user typing events and the associated debounced function calls, you'll notice that the actual network request is only sent when the user stops typing or pauses for at least 3000ms (the highest delay among the simulated events). This demonstrates how debouncing effectively postpones the execution of the function until the user's input has settled.
149 | 
150 | 
151 | 
152 | ## Throttling 
153 | 
154 | Throttling is another technique used in web development to control the rate at which a function is executed, particularly in response to frequent events. Unlike debouncing, where the function is delayed until a certain period of inactivity occurs, throttling ensures that the function is executed at a steady rate, but not more frequently than a defined interval.
155 | 
156 | In your example, let's explain throttling using the provided IDs and time intervals: `id=1` with `1000ms`, `id=2` with `2000ms`, `id=3` with `2500ms`, and `id=4` with `3000ms`.
157 | 
158 | **Scenario and Explanation:**
159 | 
160 | Imagine the same user interface with a search bar, and the user is typing to perform a search. In this case, we want to ensure that the network request is sent at a controlled rate, regardless of how quickly the user types. This helps to prevent excessive network requests and maintain a smoother user experience.
161 | 
162 | Here's how the events play out using throttling:
163 | 
164 | 1. `id=1`, 1000ms: The user starts typing. The `throttledSendNetworkRequest` function is triggered. Since there's been more than 1000ms since the last execution, the network request is sent immediately.
165 | 
166 | 2. `id=2`, 2000ms: The user continues typing. An event occurs within 2000ms of the last execution. However, the throttling mechanism prevents the `throttledSendNetworkRequest` function from executing immediately. The function will be queued to execute after 1000ms (the throttle interval).
167 | 
168 | 3. `id=3`, 2500ms: The user is still typing, and an event occurs within the 1000ms throttle interval. However, the function execution is still delayed, as it hasn't been 1000ms since the last execution.
169 | 
170 | 4. `id=4`, 3000ms: The user has stopped typing, and an event occurs after 3000ms since the last execution. The `throttledSendNetworkRequest` function is triggered again, as the throttle interval has passed.
171 | 
172 | **Explanation of Code:**
173 | 
174 | Here's how the throttling code example works in JavaScript:
175 | 
176 | ```javascript
177 | // Throttle function for network requests
178 | function throttleNetworkRequest(func, delay) {
179 |     let lastExecution = 0;
180 | 
181 |     return function() {
182 |         const now = Date.now();
183 | 
184 |         if (now - lastExecution >= delay) {
185 |             func();
186 |             lastExecution = now;
187 |         }
188 |     };
189 | }
190 | 
191 | // Function to send network request
192 | function sendNetworkRequest() {
193 |     // Code to send the network request
194 |     console.log("Network request sent");
195 | }
196 | 
197 | // Create a throttled version of the network request function
198 | const throttledSendNetworkRequest = throttleNetworkRequest(sendNetworkRequest, 1000);
199 | 
200 | // Simulate user typing events
201 | console.log("User starts typing...");
202 | throttledSendNetworkRequest(); // id=1, 1000ms
203 | throttledSendNetworkRequest(); // id=2, 2000ms (delayed)
204 | throttledSendNetworkRequest(); // id=3, 2500ms (delayed)
205 | console.log("User stops typing...");
206 | throttledSendNetworkRequest(); // id=4, 3000ms
207 | ```
208 | 
209 | In this code, the `throttleNetworkRequest` function is used to create a throttled version of the network request function. The function execution time is compared to the last execution time, and if the specified delay has passed since the last execution, the function is executed immediately. Otherwise, it's delayed until the delay interval has passed.
210 | 
211 | This mechanism ensures that the network request is sent at a controlled rate, respecting the throttle interval, and prevents excessive requests while still providing timely results to the user.
212 | 
213 | Here's a tabular comparison between debouncing and throttling:
214 | 
215 | | Aspect              | Debouncing                                       | Throttling                                      |
216 | |---------------------|--------------------------------------------------|------------------------------------------------|
217 | | Purpose             | Delay function execution until inactivity       | Limit function execution rate                  |
218 | | Execution           | Executes after a pause in events               | Executes at a steady rate                      |
219 | | Event Resets Timer? | Yes, resets the timer on each event during delay | No, maintains a steady execution interval     |
220 | | Frequency Handling  | Reduces function calls during rapid events     | Limits function calls to a set interval       |
221 | | Use Cases           | Typing (search suggestions), resizing events   | Scrolling, mouse movement, rate-limited APIs   |
222 | 
223 | Remember that the choice between debouncing and throttling depends on the specific use case and the desired behavior for handling frequent events in your application.


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/1_Introduction to DOM.md:
--------------------------------------------------------------------------------
  1 | # Introduction to Document Object Model
  2 | 
  3 | #### Definition
  4 | Dom is a tree structure in which every HTML element is arranged in heirarchical order.
  5 | 
  6 | #### Example
  7 | 
  8 | ```htmlembedded
  9 | <!DOCTYPE html>
 10 | <html lang = "en">
 11 | <head>
 12 |     <meta charset = "UTF - 8">
 13 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
 14 |     <title>Document</title>
 15 | </head>
 16 | <body>
 17 |     <div>
 18 | 
 19 |         <h1>This is heading 2</h1>
 20 | 
 21 |     </div>
 22 | 
 23 |     <div>
 24 | 
 25 |         <h1>This is heading 1</h1>
 26 | 
 27 |         <p>This is Paragraph</p>
 28 | 
 29 |     </div>
 30 | </body>
 31 | </html>
 32 | 
 33 | ```
 34 | 
 35 | #### Output
 36 | 
 37 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/258/original/upload_364afb8e43132cd223c90b39c021e52a.png?1695145205)
 38 | 
 39 | 
 40 | #### DOM tree visualization of above example
 41 | 
 42 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/259/original/upload_604c9f192818c3459c15d376d0569b83.png?1695145257)
 43 | 
 44 | **Note:**
 45 | * We will be uisng javascript to put the interactivity in our web apps or websites.
 46 | * JavaScript is used to put interactivity in DOM elements.
 47 | 
 48 | 
 49 | #### Question
 50 | 
 51 | On clicking the button append hello to the page.
 52 | 
 53 | #### Solution
 54 | 
 55 | **Step 1:**  Slecting html element
 56 | 
 57 | To select oe identify a particular html element we have methods.
 58 | * getElementById
 59 | * QuerySelector
 60 | * QuerySelectorAll
 61 | 
 62 | 
 63 | **Code:** Using getElementById
 64 | 
 65 | ```htmlembedded
 66 | <!DOCTYPE html>
 67 | <html lang = "en">
 68 | <head>
 69 |     <meta charset = "UTF - 8">
 70 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
 71 |     <title>Document</title>
 72 | </head>
 73 | <body>
 74 |     <button id = "btn - 1"> Say Hello </button>
 75 | 
 76 |     <script>
 77 |     
 78 |         // on clicking the button append hello to the page
 79 | 
 80 |         let btn = document.getElementById('btn-1')
 81 |         console.log(btn)
 82 | 
 83 |     </script>
 84 | </body>
 85 | </html>
 86 | 
 87 | ```
 88 | 
 89 | **Output:**
 90 | 
 91 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/260/original/upload_a6d7d3c5b18e7b6ed529ca4088ae1dee.png?1695145319)
 92 | 
 93 | 
 94 | **Code:** Using getElementsByClassName
 95 | 
 96 | ```htmlembedded
 97 | <!DOCTYPE html>
 98 | <html lang = "en">
 99 | <head>
100 |     <meta charset = "UTF - 8">
101 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
102 |     <title>Document</title>
103 | </head>
104 | <body>
105 |     <button class = "btn - 1"> Say Hello </button>
106 | 
107 |     <script>
108 |     
109 |         // on clicking the button append hello to the page
110 | 
111 |         let btn = document.getElementsByClassName('btn - 1')
112 |         console.log(btn)
113 | 
114 |     </script>
115 | </body>
116 | </html>
117 | 
118 | ```
119 | 
120 | **Output:**
121 | 
122 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/261/original/upload_a6d7d3c5b18e7b6ed529ca4088ae1dee_%281%29.png?1695145383)
123 | 
124 | 
125 | **Code:** Using querySelector by ID
126 | 
127 | ```htmlembedded
128 | <!DOCTYPE html>
129 | <html lang = "en">
130 | <head>
131 |     <meta charset = "UTF - 8">
132 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
133 |     <title>Document</title>
134 | </head>
135 | <body>
136 |     <button id = "btn - 1"> Say Hello </button>
137 | 
138 |     <script>
139 |     
140 |         // on clicking the button append hello to the page
141 | 
142 |         let btn = document.querySelector('#btn - 1')
143 |         console.log(btn)
144 | 
145 |     </script>
146 | </body>
147 | </html>
148 | 
149 | ```
150 | 
151 | **Output:**
152 | 
153 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/262/original/upload_7fbdad793912e0939837795b61709f36.png?1695145503)
154 | 
155 | **Code:** Using querySelector by class
156 | 
157 | ```htmlembedded
158 | <!DOCTYPE html>
159 | <html lang = "en">
160 | <head>
161 |     <meta charset = "UTF - 8">
162 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
163 |     <title>Document</title>
164 | </head>
165 | <body>
166 |     <button id = "btn - 1"> Say Hello </button>
167 |     <button class = "btn - 1"> Say Bye </button>
168 | 
169 |     <script>
170 |     
171 |         // on clicking the button append hello to the page
172 | 
173 |         let btn = document.querySelector('.btn-1')
174 |         console.log(btn)
175 | 
176 |     </script>
177 | </body>
178 | </html>
179 | 
180 | ```
181 | 
182 | **Output:**
183 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/265/original/upload_4718ed7f5720b3cee58f8644ee6a62d2.png?1695145596)
184 | 
185 | 
186 | **Code:** Using querySelector by elements
187 | 
188 | The document method querySelector() returns the first element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
189 | 
190 | ```htmlembedded
191 | <!DOCTYPE html>
192 | <html lang = "en">
193 | <head>
194 |     <meta charset = "UTF-8">
195 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
196 |     <title>Document</title>
197 | </head>
198 | <body>
199 |     <button id = "btn - 1"> Say Hello </button>
200 | 
201 |     <script>
202 |     
203 |         // on clicking the button append hello to the page
204 | 
205 |         let btn = document.querySelector('button')
206 |         console.log(btn)
207 | 
208 |     </script>
209 | </body>
210 | </html>
211 | 
212 | ```
213 | 
214 | **Output:**
215 | 
216 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/266/original/upload_a6d7d3c5b18e7b6ed529ca4088ae1dee_%282%29.png?1695145709)
217 | 
218 | **Step 2:** hello should get appended
219 | 
220 | **What is an event?**
221 | Anything that happens depending on some other thins is an event. Let's say you are clicking on button then something will happen (hello is getting printed).  
222 | 
223 | **Method - addEventListener:** We can add any event to any of our elements with using addEventListener method.  
224 | 
225 | 
226 | ```javascript
227 | <!DOCTYPE html>
228 | <html lang = "en">
229 | <head>
230 |     <meta charset = "UTF - 8">
231 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
232 |     <title>Document</title>
233 | </head>
234 | <body>
235 |     <button id = "btn - 1"> Say Hello </button>
236 | 
237 |     <script>
238 |     
239 |         // on clicking the button append hello to the page
240 | 
241 |         let btn = document.querySelector('#btn-1')
242 |         console.log(btn)
243 | 
244 |         btn.addEventListener('click', function(e){
245 |             
246 |             // console.log(e)
247 | 
248 |             let divElem = document.createElement('div')
249 | 
250 |             divElem.innerText = 'Hello'
251 | 
252 |             let body = document.querySelector('body')
253 | 
254 |             body.appendChild(divElem)
255 | 
256 |         })
257 | 
258 |     </script>
259 | </body>
260 | </html>
261 | 
262 | ```
263 | 
264 | **Output:**
265 | 
266 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/267/original/upload_c04b7917d2c7dd94fad263612d3bae02.png?1695145825)
267 | 
268 | #### Append Hello DOM Tree
269 | 
270 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/270/original/upload_604c9f192818c3459c15d376d0569b83.png?1695145889)
271 | 
272 | 
273 | #### Question
274 | 
275 | Fix the list by inserting the missing element using querySelectorAll and insertBefore
276 | 
277 | #### Solution
278 | 
279 | **Step 1:** creating node list
280 | 
281 | **Note:** Node list is an array like structure which will have your elements in indexed form stored.  
282 | 
283 | ```javascript
284 | <!DOCTYPE html>
285 | <html lang = "en">
286 | <head>
287 |     <meta charset = "UTF - 8">
288 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
289 |     <title>Document</title>
290 | </head>
291 | <body>
292 |     <ul>
293 |         <li>1</li>
294 |         <li>2</li>
295 |         <li>3</li>
296 |         <li>4</li>
297 |         <li>5</li>
298 |         <li>6</li>
299 |         
300 |         <li>8</li>
301 |         <li>9</li>
302 |         <li>10</li>
303 |     </ul>
304 | 
305 |     <script>
306 |         // Fix the list by inserting the missing element using querySelectorAll and insertBefor
307 | 
308 |         let allItems = document.querySelectorAll('li');
309 |         console.log(allItems);      
310 | 
311 |     </script>
312 | </body>
313 | </html>
314 | 
315 | ```
316 | 
317 | **Output:**
318 | 
319 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/271/original/upload_fc8a7cf791547f64129ac0eef13aa66e.png?1695146016)
320 | 
321 | **Step 2:** adding element 
322 | 
323 | ```javascript
324 | <!DOCTYPE html>
325 | <html lang = "en">
326 | <head>
327 |     <meta charset = "UTF - 8">
328 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
329 |     <title>Document</title>
330 | </head>
331 | <body>
332 |     <ul>
333 |         <li>1</li>
334 |         <li>2</li>
335 |         <li>3</li>
336 |         <li>4</li>
337 |         <li>5</li>
338 |         <li>6</li>
339 |         
340 |         <li>8</li>
341 |         <li>9</li>
342 |         <li>10</li>
343 |     </ul>
344 | 
345 |     <script>
346 |         // Fix the list by inserting the missing element using querySelectorAll and insertBefore
347 | 
348 |         let ourList = document.querySelector('ul');
349 |         console.log(ourList);
350 | 
351 |         let allItems = document.querySelectorAll('li');
352 |         console.log(allItems);   
353 |         
354 |         let indexThatHas8 = allItems[6];
355 | 
356 |         let sevenElement = document.createElement('li')
357 |         sevenElement.innerText = '7'
358 | 
359 |         ourList.insertBefore(sevenElement, indexThatHas8)
360 | 
361 |     </script>
362 | </body>
363 | </html>
364 | 
365 | ```
366 | 
367 | **Output:**
368 | 
369 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/273/original/upload_9cda233672dc980dc39259973628c350.png?1695146091)
370 | 
371 | 
372 | #### Question
373 | 
374 | Fix the mathmatical problem using JS 
375 | 
376 | #### Solution
377 | 
378 | ```javascript
379 | <!DOCTYPE html>
380 | <html lang = "en">
381 | <head>
382 |     <meta charset = "UTF - 8">
383 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
384 |     <title>Document</title>
385 | </head>
386 | <body>
387 |     <!-- Q. Fix the mathmatical problem usng JS <br> -->
388 |     <p>2 + 2 = 22</p>
389 | 
390 |     <script>
391 |         let para = document.querySelector('p')
392 |         para.innerText = `2 + 2 = 4`
393 |     </script>
394 |     
395 | </body>
396 | </html>
397 | 
398 | ```
399 | 
400 | **Output:**
401 | 
402 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/274/original/upload_7e599ac46343deed76441a6ec8a415e8.png?1695146150)
403 | 
404 | 
405 | #### Question
406 | 
407 | Write a script which fetches the data-color attribute of the card and double clicking on them and attahces the fetched class to that card and also changes the data-color attribute to "used"
408 | 
409 | #### Solution
410 | 
411 | **classList:** An element can have multiple classes attached to it and all of those classes are collected in a structure called classList.
412 | 
413 | Example:
414 | 
415 | ```javascript
416 | <div class = "card test blue"> Our card </div>
417 | 
418 | ```
419 | 
420 | The classList for this div will be - [card, test, blue]
421 | 
422 | ```javascript
423 | <!DOCTYPE html>
424 | <html lang = "en">
425 |   <head>
426 |     <meta charset = "UTF - 8" />
427 |     <meta http - equiv = "X - UA - Compatible" content = "IE = edge" />
428 |     <meta name = "viewport" content = "width = device - width, initial - scale = 1.0" />
429 |     <title>Document</title>
430 |     <style>
431 |       * {
432 |         box-sizing: border-box;
433 |       }
434 | 
435 |       body {
436 |         display: flex;
437 |         flex-wrap: wrap;
438 |         justify-content: space-around;
439 |         padding-top: 5rem;
440 |       }
441 | 
442 |       .blue {
443 |         background-color: blue;
444 |         box-shadow: 0px 0px 6px 5px;
445 |       }
446 | 
447 |       .green {
448 |         background-color: green;
449 |         box-shadow: 0px 0px 6px 5px;
450 |       }
451 | 
452 |       .red {
453 |         background-color: red;
454 |         box-shadow: 0px 0px 6px 5px;
455 |       }
456 | 
457 |       .card {
458 |         border: 1px solid;
459 |         height: 10rem;
460 |         width: 10rem;
461 |         margin: 2rem;
462 |       }
463 |     </style>
464 |   </head>
465 | 
466 |   <body>
467 |     <div class = "card" data-color = "blue"></div>  
468 |     <div class = "card" data-color = "red"></div>
469 |     <div class = "card" data-color = "blue"></div>
470 |     <div class = "card" data-color = "red"></div>
471 |     <div class = "card" data-color = "red"></div>
472 |     <div class = "card" data-color = "blue"></div>
473 |     <div class = "card" data-color = "green"></div>
474 |     <div class = "card" data-color = "blue"></div>
475 |     <div class = "card" data-color = "green"></div>
476 |     <div class = "card" data-color = "blue"></div>
477 |     <script>
478 |       // Q Write a script which fetches the data-color attribute of the card on 
479 |       //double clicking on them and attaches the fetched class to that card.
480 |       // Also changes the data-color attribute to "used"
481 | 
482 |       let cardsNodeList = document.querySelectorAll('.card')
483 | 
484 |       console.log(cardsNodeList)
485 | 
486 |       for(let i = 0 ; i < cardsNodeList.length; i ++ ){
487 |         cardsNodeList[i].addEventListener('dblclick' , function(e){
488 |           console.log(e.currentTarget)
489 |            let classTobeAttached = e.currentTarget.getAttribute('data-color')
490 | 
491 |            console.log(classTobeAttached)
492 | 
493 |            e.currentTarget.classList.add(classTobeAttached)
494 |            e.currentTarget.setAttribute('data-color' , 'used')
495 | 
496 |         })
497 |       }
498 |     </script>
499 |   </body>
500 | 
501 | ```
502 | 
503 | **Output:**
504 | 
505 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/276/original/upload_108dfa145e3eef14525de6578e2be0f0.png?1695146343)
506 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/5_Kanban Board-2 (DOM Manipulation).md:
--------------------------------------------------------------------------------
  1 | # Full Stack LLD & Projects: JavaScript-8: Kanban Board-2(DOM Implementation & Manipulation)
  2 | 
  3 | 
  4 | 
  5 | **Agenda of this Lecture:**
  6 | 
  7 | * Ticket Generation
  8 | * Adding Task, colour, ID to generated ticket
  9 | * Ticket Removal
 10 | * Locking Mechanism
 11 | * Editing Ticket Content
 12 | 
 13 | 
 14 | 
 15 | ### Explanation 
 16 | 
 17 | We'll begin by implementing the ticket generation feature, which involves creating a function to dynamically generate new task tickets. These tickets will then be manipulated and moved across the columns using DOM (Document Object Model) manipulation.
 18 | 
 19 | In the file `script.js` we will add this function:
 20 | 
 21 | ```javascript 
 22 | function createTicket() {
 23 |   // Create a new ticket container element
 24 |   let ticketCont = document.createElement('div');
 25 | }
 26 | ```
 27 | 
 28 | Now we will add **class** to this particular div using the `setAttribute` : 
 29 | 
 30 | ```javascript 
 31 | function createTicket() {
 32 |   // Create a new ticket container element
 33 |   let ticketCont = document.createElement('div');
 34 | 
 35 |   // Set the class attribute of the ticket container
 36 |   ticketCont.setAttribute('class', 'ticket-cont'); // 
 37 | }
 38 | ```
 39 | 
 40 | Whenever this function is called, a new ticket will be created with class `ticket-cont`.
 41 | 
 42 | As `ticketCont` contains 3 more divs inside, we will create them inside this function using `innerHTML` function
 43 | 
 44 | ```javascript 
 45 | function createTicket() {
 46 |   // Create a new ticket container element
 47 |   let ticketCont = document.createElement('div');
 48 |   ticketCont.setAttribute('class', 'ticket-cont');
 49 | 
 50 |   // Create the HTML content for the ticket container
 51 |   ticketCont.innerHTML = `
 52 |     <div class="ticket-color"></div>
 53 |     <div class="ticket-id">12345/div>
 54 |     <div class="task-area">Random Task</div>`
 55 |   
 56 |   mainCont.appendChild(ticketCont)
 57 | ```
 58 | 
 59 | So we are passing the HTML codes here, so whenever a ticket is created , these 3 divs will also be there.
 60 | 
 61 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/613/original/upload_ed6901a16250a577c26b8e2795b1f89d.png?1695229185)
 62 | 
 63 | 
 64 | 
 65 | ### Explanation
 66 | 
 67 | The `addEventListener` method is used to attach an event listener to a DOM element, allowing you to respond to specific events like clicks, key presses, mouse movements, etc.
 68 | 
 69 | We add an event listener to the `modalCont` element for the 'keydown' event. This event occurs when a key on the keyboard is pressed and then released.
 70 | 
 71 | ```javascript 
 72 | modalCont.addEventListener('keydown', function(e) {
 73 |   let key = e.key;
 74 | 
 75 |   if (key === 'Shift') {
 76 |     createTicket(); // Call the createTicket function to create a new ticket
 77 |     modalCont.style.display = 'none'; // Hide the modal
 78 |     textArea.value = ''; // Clear the textarea's content
 79 |   }
 80 | })
 81 | ```
 82 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/624/original/upload_55a8528debc5766a05e91dfe21a5cad8.png?1695232320)
 83 | 
 84 | 
 85 | 
 86 | ### Explanation
 87 | 
 88 | As of now everything like Task, color and ID of the created task is static. In this we will be making it dynamic.
 89 | 
 90 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/625/original/1.png?1695232401)
 91 | 
 92 | So we can choose color, and the ticket will come with a randomly generated ID.
 93 | 
 94 | To identify and select these priority color divs, we will use `querySelectorAll` method
 95 | 
 96 | We want to select all elements with the class name 'priority-color' using `querySelectorAll` and then iterate through each of these elements using the forEach method. Here's how you can do that:
 97 | 
 98 | ```javascript 
 99 | let allPriorityColors = document.querySelectorAll('.priority-color');
100 | 
101 | allPriorityColors.forEach(function(colorElem) {
102 |   colorElem.addEventListener('click', function() {
103 |     // Remove 'active' class from all priority colors
104 |     allPriorityColors.forEach(function(priorityColorElem) {
105 |       priorityColorElem.classList.remove('active');
106 |     });
107 | 
108 |     // Add 'active' class to the clicked colorElem
109 |     colorElem.classList.add('active');
110 | 
111 |     // Implement additional logic to assign the selected color to a task
112 |     // For example, you can use this space to perform your task color assignment
113 |   });
114 | });
115 | ```
116 | 
117 | In this code, when a color element with the class 'priority-color' is clicked, the event listener:
118 | 
119 | * Iterates through all `allPriorityColors` and removes the 'active' class from each element.
120 | * Adds the 'active' class to the clicked `colorElem`.
121 | * Implements additional logic to assign the selected color to a task 
122 | 
123 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/626/original/2.png?1695232419)
124 | 
125 | So right now we have implemented such that we can select this color, but now we want to get the value of the particular color.
126 | 
127 | Now we will have a **color array**.
128 | 
129 | We define an array of colors and updates the modalPriorityColor variable based on the selected color when a color element is clicked. 
130 | 
131 | ```javascript
132 | let colors = ["lightpink", "lightgreen", "lightblue", "black"];
133 | let modalPriorityColor = colors[colors.length - 1]; // Default to black
134 | 
135 | let allPriorityColors = document.querySelectorAll('.priority-color');
136 | 
137 | allPriorityColors.forEach(function(colorElem) {
138 |   colorElem.addEventListener('click', function() {
139 |     // Remove 'active' class from all priority colors
140 |     allPriorityColors.forEach(function(priorityColorElem) {
141 |       priorityColorElem.classList.remove('active');
142 |     });
143 | 
144 |     // Add 'active' class to the clicked colorElem
145 |     colorElem.classList.add('active');
146 | 
147 |     modalPriorityColor = colorElem.classList[0]; // Update modalPriorityColor
148 |   });
149 | });
150 | ```
151 | 
152 | In this code:
153 | 
154 | * You define an array colors with color names.
155 | * `modalPriorityColor` is initially set to the last color in the array ('black') as the default.
156 | * The event listener loop iterates through each color element and adds a click event listener.
157 | * When a color element is clicked, the 'active' class is toggled as before.
158 | * Additionally, the `modalPriorityColor` is updated to match the class name of the clicked color element, indicating the selected color.
159 | 
160 | 
161 | 
162 | **Passing ticketColor to createTicket Function:**
163 | 
164 | In the `createTicket` function, you need to add a parameter `ticketColor` to the function signature. This parameter is intended to hold the selected color for the ticket. When calling the `createTicket` function inside the `modalCont` event listener, you're passing the `modalPriorityColor` as an argument to this function.
165 | 
166 | This change allows you to set the ticket color dynamically based on the selected priority color. You can use the ticketColor parameter to apply the selected color to the appropriate part of the ticket's HTML content.
167 | 
168 | ```javascript 
169 | function createTicket(ticketColor) {
170 |   // Create a new ticket container element
171 |   let ticketCont = document.createElement('div');
172 |   ticketCont.setAttribute('class', 'ticket-cont');
173 | 
174 |   // Create the HTML content for the ticket container
175 |   ticketCont.innerHTML = `
176 |     <div class="ticket-color" style="background-color: ${ticketColor};"></div>
177 |     <div class="ticket-id">12345</div>
178 |     <div class="task-area">Random Task</div>
179 |   `;
180 |   
181 |   // Append the ticket container to the main container
182 |   mainCont.appendChild(ticketCont);
183 | }
184 | 
185 | // Event listener for 'Shift' key press in modalCont
186 | modalCont.addEventListener('keydown', function(e) {
187 |   let key = e.key;
188 | 
189 |   if (key === 'Shift') {
190 |     createTicket(modelPriorityColor); // Create a new ticket with the selected color
191 |     modalCont.style.display = 'none'; // Hide the modal
192 |     textArea.value = ''; // Clear the textarea's content
193 |   }
194 | });
195 | ```
196 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/628/original/4.png?1695232451)
197 | 
198 | 
199 | Now we need to update the task details
200 | 
201 | * The `createTicket` function accepts two parameters: `ticketColor` for the color of the ticket and `ticketTask` for the content of the ticket's task.
202 | * The `ticketTask` parameter is used to dynamically insert the task content into the task-area div element.
203 | * In the modalCont event listener, the content of the `textAreaCont` element is retrieved using .value and assigned to taskContent.
204 | * When the 'Shift' key is pressed, a new ticket is created with the selected color and task content, and then the modal is hidden.
205 | * The content of the `textAreaCont` element is cleared for the next input.
206 | 
207 | ```javascript 
208 | function createTicket(ticketColor, ticketTask) {
209 |   // Create a new ticket container element
210 |   let ticketCont = document.createElement('div');
211 |   ticketCont.setAttribute('class', 'ticket-cont');
212 | 
213 |   // Create the HTML content for the ticket container
214 |   ticketCont.innerHTML = `
215 |     <div class="ticket-color" style="background-color: ${ticketColor};"></div>
216 |     <div class="ticket-id">12345</div>
217 |     <div class="task-area">${ticketTask}</div>
218 |   `;
219 |   
220 |   // Append the ticket container to the main container
221 |   mainCont.appendChild(ticketCont);
222 | }
223 | 
224 | // Event listener for 'Shift' key press in modalCont
225 | modalCont.addEventListener('keydown', function(e) {
226 |   let key = e.key;
227 | 
228 |   if (key === 'Shift') {
229 |     let taskContent = textAreaCont.value; // Get the content from the textarea
230 |     createTicket(modelPriorityColor, taskContent); // Create a new ticket with the selected color and task content
231 |     modalCont.style.display = 'none'; // Hide the modal
232 |     textAreaCont.value = ''; // Clear the textarea's content
233 |   }
234 | });
235 | ```
236 | 
237 | Now we need to uniquely generate ID for each task created:
238 | 
239 | We will be using an external library **shortID** for this
240 | 
241 | ```javascript 
242 | function createTicket(ticketColor, ticketID, ticketTask) {
243 |   // Create a new ticket container element
244 |   let ticketCont = document.createElement('div');
245 |   ticketCont.setAttribute('class', 'ticket-cont');
246 | 
247 |   // Create the HTML content for the ticket container
248 |   ticketCont.innerHTML = `
249 |     <div class="ticket-color" style="background-color: ${ticketColor};"></div>
250 |     <div class="ticket-id">${ticketID}</div>
251 |     <div class="task-area">${ticketTask}</div>
252 |   `;
253 |   
254 |   // Append the ticket container to the main container
255 |   mainCont.appendChild(ticketCont);
256 | }
257 | 
258 | // Event listener for 'Shift' key press in modalCont
259 | modalCont.addEventListener('keydown', function(e) {
260 |   let key = e.key;
261 | 
262 |   if (key === 'Shift') {
263 |     let taskContent = textAreaCont.value; // Get the content from the textarea
264 |     let ticketID = shortid(); // Generate a unique ticket ID
265 |     createTicket(modelPriorityColor, ticketID, taskContent); // Create a new ticket with the selected color, ticket ID, and task content
266 |     modalCont.style.display = 'none'; // Hide the modal
267 |     textAreaCont.value = ''; // Clear the textarea's content
268 |   }
269 | });
270 | ```
271 | 
272 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/629/original/5.png?1695232474)
273 | 
274 | 
275 | 
276 | To remove the task, we can do similarly to what we did for adding task:
277 | 
278 | ```javascript 
279 | let removeTaskFlag = false;
280 | 
281 | let removeBtn = document.querySelector('.remove-btn'); // Replace with the actual class or ID selector
282 | removeBtn.addEventListener('click', function() {
283 |   removeTaskFlag = !removeTaskFlag; // Toggle the removeTaskFlag when the button is clicked
284 |   
285 |   if (removeTaskFlag) {
286 |     alert('Delete button is activated.');
287 |   }
288 | });
289 | ```
290 | 
291 | ---
292 | 
293 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/6_ Kanban Board -3(Bussiness Logics & Local Storage).md:
--------------------------------------------------------------------------------
  1 | # Full Stack LLD & Projects: JavaScript-9: Kanban Board -3(Bussiness Logics & Local Storage)
  2 | 
  3 | 
  4 | **Agenda of this Lecture:**
  5 | 
  6 | * Locking Mechanism
  7 | * Changing the Priority color of the Task
  8 | * Filtering out Task with using the priority color filter
  9 | * Showing All Tasks on db click
 10 | 
 11 | 
 12 | 
 13 | ### Explanation
 14 | 
 15 | Currently we have just implemented the project, but we dont have any lock in the project. 
 16 | Hence, we will be implementing the lock in this section
 17 | 
 18 | We can use the **font-awesome** and get a lock icon for our tasks.
 19 | 
 20 | 
 21 | ```javascript 
 22 | function createTicket(ticketColor, ticketID, ticketTask) {
 23 |   // Create a new ticket container element
 24 |   let ticketCont = document.createElement('div');
 25 |   ticketCont.setAttribute('class', 'ticket-cont');
 26 | 
 27 |   // Create the HTML content for the ticket container
 28 |   ticketCont.innerHTML = `
 29 |     <div class="ticket-color" style="background-color: ${ticketColor};"></div>
 30 |     <div class="ticket-id">${ticketID}</div>
 31 |     <div class="task-area">${ticketTask}</div>
 32 |     <div class="ticket-lock"><i class="fa-solid fa-lock"></i></div>
 33 |   `;
 34 |   
 35 |   // Append the ticket container to the main container
 36 |   mainCont.appendChild(ticketCont);
 37 | 
 38 |   handleRemoval(ticketCont);
 39 | }
 40 | ```
 41 | 
 42 | * We have added an additional `div` element with the class `ticket-lock` to represent the lock icon for each ticket.
 43 | * Inside the `ticket-lock` div, you're using Font Awesome's icon syntax to include the lock icon using the fa-lock class from the `fa-solid` style.
 44 | 
 45 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/638/original/1.png?1695233411)
 46 | 
 47 | 
 48 | Now we have added the lock, but we need to make it functional now:
 49 | 
 50 | ```javascript 
 51 | let lockClose = 'fa-lock';
 52 | let lockOpen = 'fa-lock-open';
 53 | 
 54 | function handleLock(ticket) {
 55 |   let ticketLockElem = ticket.querySelector('.ticket-lock');
 56 |   let ticketLockIcon = ticketLockElem.children[0];
 57 | 
 58 |   ticketLockIcon.addEventListener('click', function() {
 59 |     console.log('Lock Selected'); // Added single quotes around the log message
 60 |     if (ticketLockIcon.classList.contains(lockClose)) {
 61 |       ticketLockIcon.classList.remove(lockClose);
 62 |       ticketLockIcon.classList.add(lockOpen);
 63 |       
 64 |     } else {
 65 |       ticketLockIcon.classList.remove(lockOpen);
 66 |       ticketLockIcon.classList.add(lockClose);
 67 |       
 68 |     }
 69 |   });
 70 | }
 71 | ```
 72 | 
 73 | 
 74 | Now to make the content editable inside the task section whenever the lock is open, we will make the following changes:
 75 | 
 76 | ```javascript 
 77 | let lockClose = 'fa-lock';
 78 | let lockOpen = 'fa-lock-open';
 79 | 
 80 | function handleLock(ticket) {
 81 |   let ticketLockElem = ticket.querySelector('.ticket-lock');
 82 |   let ticketLockIcon = ticketLockElem.children[0];
 83 | 
 84 |   let ticketTaskArea = ticket.querySelector('.task-area'); // Corrected selector
 85 | 
 86 |   ticketLockIcon.addEventListener('click', function() {
 87 |     console.log('Lock Selected');
 88 |     if (ticketLockIcon.classList.contains(lockClose)) {
 89 |       ticketLockIcon.classList.remove(lockClose);
 90 |       ticketLockIcon.classList.add(lockOpen);
 91 |       ticketTaskArea.setAttribute('contenteditable', 'true'); // Changed 'contenteditable', 'true'
 92 |     } else {
 93 |       ticketLockIcon.classList.remove(lockOpen);
 94 |       ticketLockIcon.classList.add(lockClose);
 95 |       ticketTaskArea.setAttribute('contenteditable', 'false'); // Changed 'contenteditable', 'false'
 96 |     }
 97 |   });
 98 | }
 99 | ```
100 | 
101 | * Corrected the selector for `ticketTaskArea` to use '.task-area'.
102 | * Changed the `contenteditable` attribute value to 'true' or 'false' to correctly toggle the editable state of the task area based on the lock state.
103 | 
104 | 
105 | ### Explanation
106 | 
107 | In this section we will handle the color of the tasks
108 | 
109 | 
110 | 
111 | ```javascript 
112 | function handleColor(ticket) {
113 |   let ticketColorBand = ticket.querySelector('.ticket-color'); // Corrected selector
114 |   ticketColorBand.addEventListener('click', function() {
115 |     let currentColor = ticketColorBand.classList[0]; // Changed index to 0
116 | 
117 |     let currentColorIdx = colors.findIndex(function(color) {
118 |       return currentColor === color;
119 |     });
120 | 
121 |     currentColorIdx++; // Increment the index
122 | 
123 |     let newTicketColorIdx = currentColorIdx % colors.length; // Corrected variable name
124 |     let newTicketColor = colors[newTicketColorIdx]; // Corrected variable name
125 |     
126 |     ticketColorBand.classList.remove(currentColor); // Corrected spelling
127 |     ticketColorBand.classList.add(newTicketColor); // Corrected spelling
128 |   });
129 | }
130 | ```
131 | 
132 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/639/original/2.png?1695233433)
133 | 
134 | 
135 | 
136 | ### Explanation
137 | 
138 | In this feature, we need to filter the task according to the priority color.
139 | 
140 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/640/original/3.png?1695233456)
141 | 
142 | ```javascript 
143 | let toolboxColors = document.querySelectorAll('.color');
144 | 
145 | for (let i = 0; i < toolboxColors.length; i++) {
146 |   toolboxColors[i].addEventListener('click', function() {
147 |     let selectedToolboxColor = toolboxColors[i].classList[0];
148 | 
149 |     let allTickets = document.querySelectorAll('.ticket-cont'); // Corrected selector
150 |     for (let j = 0; j < allTickets.length; j++) {
151 |       allTickets[j].remove(); // Removed square brackets and added j to index
152 | 
153 |       let filteredTickets = ticketsArr.filter(function(ticket) {
154 |         return selectedToolboxColor === ticket.ticketColor;
155 |       });
156 | 
157 |       filteredTickets.forEach(function(filteredTicket) {
158 |         createTicket(
159 |           filteredTicket.ticketColor,
160 |           filteredTicket.ticketTask,
161 |           filteredTicket.ticketID
162 |         );
163 |       });
164 |     }
165 |   });
166 | }
167 | ```
168 | 
169 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/641/original/4.png?1695233480)
170 | 
171 | 
172 | 
173 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/7_Kanban Board -4(local storage).md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | In the previous session, we covered topics such as ticket creation, deletion, locking, and unlocking, as well as dynamically changing the priority color. We comprehensively explored the implementation of these functionalities.
  5 | 
  6 | However, a new issue has arisen. Upon initial usage, the filter buttons function as intended. Yet, upon subsequent clicks, a problem arises where duplicate tickets of the selected color are generated.
  7 | 
  8 | What might be the underlying cause of this problem?
  9 | 
 10 | To address this issue, we're planning to implement a validation process using unique identifier to prevent the occurrence of duplicate tickets.
 11 | 
 12 | 
 13 | This is the code that we have implemented till now for filtering tickets.
 14 | 
 15 | 
 16 | We've executed the loop that iterates through the toolbox colors, covering every index. For each color dip, we've attached corresponding event listeners. When a click event occurs, our first step is to determine which color dip or filter was clicked – for instance, selecting black would mean retrieving tasks labeled with a black priority color.
 17 | 
 18 | Following the color selection from the toolbox, we proceed to match that color with the colors associated with each ticket. We apply a filtering process to narrow down the array of tickets to only include those that match the selected color. The result is an array of filtered tickets, where each ticket object contains information like color values, task details, and IDs.
 19 | 
 20 | At this juncture, we remove the default set of tickets and replace them with the newly filtered array. This is the approach we discussed in the previous session. However, an issue arises when we repeatedly select a color, leading to the duplication of arrays.
 21 | 
 22 | 
 23 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/630/original/1.png?1695232771)
 24 | 
 25 | #### Pseudocode
 26 | ```javascript
 27 | 
 28 | for (let i = 0; i < toolboxColors.length; i++) {
 29 |     toolboxColors[i].addEventListener('click', function() {
 30 |         let selectedToolBoxColor = toolboxColors[i].classList[0];
 31 |         
 32 |         let filteredTickets = ticketsArr.filter(function(ticket) {
 33 |             return selectedToolBoxColor === ticket.ticketColor;
 34 |         });
 35 |         
 36 |         let allTickets = document.querySelectorAll('.ticket-cont');
 37 |         
 38 |         for (let i = 0; i < allTickets.length; i++) {
 39 |             allTickets[i].remove();
 40 |         }
 41 |         
 42 |         filteredTickets.forEach(function(filteredTicket) {
 43 |             createTicket(filteredTicket.ticketColor, filteredTicket.ticketTask, filteredTicket.ticketId);
 44 |         });
 45 |     });
 46 | }
 47 | 
 48 | ```
 49 | 
 50 | 
 51 | To tackle this issue, we're planning to implement a validation mechanism that utilizes unique identifier to ensure that duplicate tickets aren't generated. This way, the filtered ticket array will only consist of distinct tickets corresponding to the selected color.
 52 | 
 53 | 
 54 | So, using the unique IDs associated with each ticket is a great way to prevent duplicates. This way, we can ensure that the same ticket isn't added to the filtered array more than once.
 55 | 
 56 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/631/original/2.png?1695232789)
 57 | 
 58 |  In which part of the code should you integrate this ID-checking mechanism to effectively prevent duplicate tickets from being included in the filtered array?
 59 | 
 60 | Within the createTicket method, we'll implement the following logic: if a ticket possesses an existing ID, it will be used; otherwise, a new unique ID will be generated during its initial creation. It's essential to note that the ticket will only be pushed to the array if it lacks an ID, ensuring avoidance of duplication.
 61 | 
 62 | 
 63 | #### Pseudocode
 64 | ```javascript
 65 | function createTicket(ticketColor, ticketTask, ticketId) {
 66 |     // Adding an identifier
 67 |     let id = ticketId || shortid();
 68 | }
 69 | ```
 70 | 
 71 | Prior to adding the ID to the array, we will perform a validation to ascertain its existence, and only if it indeed exists, will it be appended within the createTicket method.
 72 | 
 73 | #### Pseudocode
 74 | ```javascript
 75 | function createTicket(ticketColor, ticketTask, ticketId) {
 76 |     // Adding an identifier
 77 |     let id = ticketId || shortid();
 78 |     
 79 |     // Other code
 80 |     
 81 |     if (!ticketId) {
 82 |         ticketArr.push({ ticketColor, ticketTask, ticketId: id });
 83 |     }
 84 | }
 85 | 
 86 | ```
 87 | 
 88 | ---
 89 | title: What is local storage?
 90 | description: Gaining Insight into Local Storage and How to Utilize It
 91 | duration: 600
 92 | card_type: cue_card
 93 | ---
 94 | 
 95 | > Note to instructor - Address any questions that the students might have.
 96 | 
 97 | 
 98 |  What kind of ID will the shortid library generate?
 99 | 
100 | It will produce a random ID for the ticket.
101 | 
102 | 
103 | Upon accessing your browser, you'll encounter the inspect page, which offers a variety of elements to explore. Within this inspect interface, navigate to the application tab. Here, you'll be presented with numerous sections such as local storage, session storage, and cookies. For today's discussion, our focus will be on local storage.
104 | 
105 | What exactly is local storage? What are your thoughts on the ideal function of local storage? 
106 | 
107 | The issue lies in data loss when a page is refreshed. We intend for the application to retain data even after a refresh – that's the core purpose of having this feature.
108 | 
109 | This occurrence arises from our utilization of local storage as the repository for all our data. Now, let's delve into the concept of local storage. In essence, it offers the capacity to store up to 5mb of information, enabling your browser to retain such data. Imagine a scenario where you're crafting an application and the need for a database isn't there. In situations where a 5-megabyte threshold suffices, local storage serves as a viable means to preserve and manage the data.
110 | 
111 | 
112 | 
113 | 
114 | 
115 | What is a Windows object?
116 | 
117 | Within JavaScript, resides the window object. This object grants access to an array of properties, methods, and functionalities offered by the Document Object Model (DOM).
118 | 
119 | 
120 | #### Pseudocode
121 | 
122 | ```htmlembedded
123 | <!DOCTYPE html>
124 | <html>
125 | <head>
126 |     <title>Title of the document</title>
127 | </head>
128 | 
129 | <body>
130 |     <!-- The content of the document... -->
131 | </body>
132 | 
133 | <script>
134 |     console.log(window);
135 | </script>
136 | 
137 | </html>
138 | ```
139 | 
140 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/632/original/3.png?1695232812)
141 | 
142 | We can use numerous methods and properties within the browser including local storage feature. Access to local storage is facilitated through the window object. Within local storage, you can engage actions like setting an item and getting an item. The "setItem" function is utilized to store data, while "getItem" serves to retrieve stored data. This data is maintained in a JavaScript-oriented key-value structure.
143 | 
144 | Moreover, there's a "removeItem" capability that permits the deletion of specific entries from local storage. Should the need arise to completely erase all data, the "localStorage.clear" command accomplishes that task.
145 | 
146 | 
147 | 
148 | Now, let's see how we are gonna implement local storage
149 | 
150 |  
151 | In which scenarios will the requirement for local storage arise?
152 | 
153 | Let's review  all our functionalities:
154 | 
155 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/633/original/4.png?1695232834)
156 | 
157 | 
158 | a. Creating a ticket involves storing them within local storage.
159 | b. Updating a ticket, whether altering its color or task, entails updating these modified values in local storage.
160 | c. Deleting a ticket results in its removal from local storage.
161 | 
162 | Notably, if you refrain from deletion and subsequently refresh the page, local storage will retain the instance of that particular ticket, so we need to remove that from local storage to reflect the data.
163 | 
164 | Whenever a ticket creation occurs, we have the option to store it in local storage using the "setItem" method. This involves providing the name of the array as a parameter. Here, during the code insertion within the createTicket method, we will employ the setItem function of localStorage:
165 | 
166 | #### Pseudocode
167 | ```javascript
168 | 
169 | function createTicket(ticketColor, ticketTask, ticketId) {
170 |     if (!ticketId) {
171 |         ticketArr.push({ ticketColor, ticketTask, ticketId: shortid() });
172 |         localStorage.setItem('tickets', JSON.stringify(ticketArr));
173 |     }
174 | }
175 | 
176 | ```
177 | 
178 | It's important to note that local storage accommodates data in string format. Thus, any data you intend to store should be converted into string form before insertion.
179 | 
180 | 
181 | > Note to instructor - Test to determine whether the local storage has been successfully established or not.
182 | 
183 | 
184 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/634/original/5.png?1695232854)
185 | 
186 | After refreshing the page, you'll notice that the data resides within local storage, yet the paradox emerges – despite setting the data, we encounter a loss of the data itself. The situation unfolds as we've successfully stored the data, yet the process of retrieving the values proves elusive.
187 | 
188 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/635/original/6.png?1695232878)
189 | 
190 | 
191 | We employ the stringify method to establish the data, while the reverse, JSON.parse, allows us to retrieve the data back in JSON format.
192 | 
193 | As we initiate the application, our first step is to retrieve all the tickets stored within local storage. If we come across any items designated as "tickets," our subsequent approach revolves around displaying or generating these tickets accordingly. For each of these identified tickets, the createTicket method will be invoked.
194 | 
195 | #### Pseudocode
196 | ```javascript=
197 | 
198 | // local storage
199 | 
200 | if (localStorage.getItem('tickets')) {
201 |     ticketsArr = JSON.parse(localStorage.getItem('tickets'));
202 |     ticketsArr.forEach(function(ticket) {
203 |         createTicket(ticket.ticketColor, ticket.ticketTask, ticket.ticketId);
204 |     });
205 | }
206 | 
207 | ```
208 | 
209 | > Note to instructor - Test this by refreshing the page again; you'll observe that nothing is removed.
210 | 
211 | 
212 | > Note to instructor - Feel free to address any questions that students might have. 
213 | 
214 | 
215 | Initially, let's construct a function that facilitates the retrieval of the ticket's index using its corresponding ID. The ID will help in identifying the ticket that requires updating.
216 | 
217 | #### Pseudocode
218 | ```javascript
219 | 
220 | function getTicketIdx(id) {
221 |     let ticketIdx = ticketArr.findIndex(function(ticketObj) {
222 |         return ticketObj.ticketId === id;
223 |     });
224 |     return ticketIdx;
225 | }
226 | 
227 | ```
228 | 
229 | Within the handleLock function, whenever a lock is unlocked through a click event, it becomes imperative to retrieve the index of the corresponding ticket. This enables us to determine the specific location where this action occurred.
230 | 
231 | 
232 | #### Pseudocode
233 | ```javascript
234 | function handleLock(ticket) {
235 |     let ticketLockElem = ticket.querySelector('.ticket-lock');
236 |     let ticketLockIcon = ticketLockElem.children[0];
237 |     let ticketTaskArea = ticket.querySelector('.task-area');
238 |     
239 |     ticketLockIcon.addEventListener('click', function() {
240 |         let ticketIdx = getTicketIdx(id);
241 |         // Other code
242 |         
243 |         // Updated task
244 |         ticketsArr[ticketIdx].ticketTask = ticketTaskArea.innerText;
245 |         localStorage.setItem('tickets', JSON.stringify(ticketsArr));
246 |     });
247 | }
248 | 
249 | ```
250 | 
251 | Henceforth, it will be retained with an updated task.
252 | 
253 | 
254 | 
255 | 
256 | Now, let's proceed to explore the color feature.
257 | 
258 | 
259 | #### Pseudocode
260 | ```javascript
261 | function handleColor(ticket) {
262 |     let ticketColorBand = ticket.querySelector('.ticket-color');
263 |     
264 |     ticketColorBand.addEventListener('click', function() {
265 |         // getting index
266 |         let ticketIdx = getTicketIdx(id);
267 |         let currentColor = ticketColorBand.classList[1];
268 |         
269 |         let currentColorIdx = colors.findIndex(function(color) {
270 |             return currentColor === color;
271 |         });
272 |         
273 |         currentColorIdx++;
274 |         
275 |         let newTicketColorIdx = currentColorIdx % colors.length;
276 |         let newTicketColor = colors[newTicketColorIdx];
277 |         
278 |         ticketColorBand.classList.remove(currentColor);
279 |         ticketColorBand.classList.add(newTicketColor);
280 |         
281 |         // Updated task
282 |         ticketsArr[ticketIdx].ticketColor = newTicketColor;
283 |         localStorage.setItem('tickets', JSON.stringify(ticketsArr));
284 |     });
285 | }
286 | 
287 | ```
288 | 
289 | 
290 | 
291 | Now, let's evaluate the final feature, which involves deleting data from local storage.
292 | 
293 | 
294 | #### Pseudocode
295 | ```javascript
296 | function handleRemoval(ticket) {
297 |     ticket.addEventListener('click', function() {
298 |         if (!removeTaskFlag) return;
299 |         
300 |         let idx = getTicketIdx(id);
301 |         ticket.remove(); // UI removal
302 |         
303 |         let deletedElement = ticketsArr.splice(idx, 1);
304 |         localStorage.setItem('tickets', JSON.stringify(ticketsArr));
305 |     });
306 | }
307 | 
308 | ```
309 | 
310 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/DOM/9_UI Case Studies-2.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## Agenda
  3 | 
  4 | - What is Event Delegation?
  5 |     - Relation with concept of Bubbling 
  6 | - Machine coding question
  7 |     - Star Rating Component
  8 |     - Counter Component
  9 | 
 10 | We will try to cover most of these topics in today's sessions and the remaining in the next.
 11 | 
 12 | It is going to be a bit challenging, advanced, but very interesting session covering topics that are asked very frequently in interviews.
 13 | 
 14 | So let's start.
 15 | 
 16 | ## Event delegation
 17 | 
 18 | Event delegation and event bubbling are closely related concepts that work hand-in-hand to optimize event handling in web development. When applied together, they provide an efficient way to manage interactions on a large number of elements.
 19 | 
 20 | Imagine you're browsing a website like Amazon, and on the product listing page, there are multiple product cards, each containing an "Add to Cart" button. Here's how event delegation and event bubbling come into play:
 21 | 
 22 | 1. **Event Delegation:**
 23 |    Event delegation involves attaching a single event listener to a common ancestor element (in this case, the container holding the product cards). Instead of placing event listeners on each "Add to Cart" button individually, you attach one listener to the container.
 24 | 
 25 | 2. **Event Bubbling:**
 26 |    Event bubbling refers to the natural propagation of an event through the DOM hierarchy. When an event occurs on a deeply nested element, it first triggers the event handler on that element and then "bubbles up" through its ancestors.
 27 | 
 28 | Now, let's see how these concepts work together:
 29 | 
 30 | - When a user clicks the "Add to Cart" button on a product card, the event starts at the button (target) and then bubbles up through its parent elements.
 31 | - Since you've attached a single event listener to the container holding the product cards, the event bubbles up to the container.
 32 | - The event listener captures the event at the container level and checks whether the clicked element (the button) matches certain criteria (e.g., having the class `add-to-cart`).
 33 | - If the criteria are met, the listener knows that an "Add to Cart" action is intended and can extract information about the specific product from the event's context
 34 | 
 35 | Let's go through an example with code to demonstrate event delegation and event bubbling using different categories of products (headphones, laptops, mobiles) on a web page:
 36 | 
 37 | **HTML Structure:**
 38 | ```html
 39 | <div id="categories">
 40 |   <div class="category" id="headphones">
 41 |     <h2>Headphones</h2>
 42 |     <div class="product">Product A</div>
 43 |     <div class="product">Product B</div>
 44 |   </div>
 45 |   <div class="category" id="laptops">
 46 |     <h2>Laptops</h2>
 47 |     <div class="product">Product X</div>
 48 |     <div class="product">Product Y</div>
 49 |   </div>
 50 |   <div class="category" id="mobiles">
 51 |     <h2>Mobiles</h2>
 52 |     <div class="product">Product P</div>
 53 |     <div class="product">Product Q</div>
 54 |   </div>
 55 | </div>
 56 | ```
 57 | 
 58 | **JavaScript:**
 59 | ```javascript
 60 | const categoriesContainer = document.getElementById('categories');
 61 | 
 62 | categoriesContainer.addEventListener('click', (event) => {
 63 |   const clickedElement = event.target;
 64 |   
 65 |   // Check if the clicked element is a product
 66 |   if (clickedElement.classList.contains('product')) {
 67 |     const category = clickedElement.closest('.category').querySelector('h2').textContent;
 68 |     const product = clickedElement.textContent;
 69 |     
 70 |     console.log(`Clicked on ${product} in the ${category} category.`);
 71 |     // Handle the click action for the product here
 72 |   }
 73 | });
 74 | ```
 75 | 
 76 | In this example:
 77 | 
 78 | - The `categoriesContainer` element is the common ancestor for all categories and products.
 79 | - The event listener is attached to the `categoriesContainer` to capture clicks on any of its child elements.
 80 | - When a product is clicked, the event bubbles up through the category section, reaching the `categoriesContainer`.
 81 | - The listener checks if the clicked element has the class `product`. If it does, it extracts the category and product information and performs the necessary action.
 82 | - This code efficiently handles clicks on products within any category, demonstrating the combined usage of event delegation and event bubbling.
 83 | 
 84 | With this setup, regardless of the number of categories or products, you only need one event listener to handle all clicks, making your code more maintainable and efficient.
 85 | 
 86 | Let's create an example where event delegation is used to change the background color of elements by clicking on them. In this example, we'll create a set of colored boxes, and clicking on any box will change its background color using event delegation.
 87 | 
 88 | **HTML Structure:**
 89 | ```html
 90 | <div id="colorPalette">
 91 |   <div class="color-box" style="background-color: red;"></div>
 92 |   <div class="color-box" style="background-color: green;"></div>
 93 |   <div class="color-box" style="background-color: blue;"></div>
 94 | </div>
 95 | ```
 96 | 
 97 | **JavaScript:**
 98 | ```javascript
 99 | const colorPalette = document.getElementById('colorPalette');
100 | 
101 | colorPalette.addEventListener('click', (event) => {
102 |   const clickedElement = event.target;
103 |   
104 |   // Check if the clicked element is a color box
105 |   if (clickedElement.classList.contains('color-box')) {
106 |     const color = clickedElement.style.backgroundColor;
107 |     document.body.style.backgroundColor = color;
108 |   }
109 | });
110 | ```
111 | 
112 | In this example:
113 | 
114 | - The `colorPalette` element is the common ancestor for all color boxes.
115 | - The event listener is attached to the `colorPalette` to capture clicks on any of its child elements.
116 | - When a color box is clicked, the event bubbles up to the `colorPalette`.
117 | - The listener checks if the clicked element has the class `color-box`. If it does, it extracts the background color of the clicked color box.
118 | - The background color of the `body` element is then set to the extracted color, effectively changing the page's background color.
119 | 
120 | This example demonstrates how event delegation can be used to efficiently manage interactions across a set of elements, in this case, color boxes. By using event delegation, you handle all color box clicks with a single event listener, making the code cleaner and more maintainable.
121 | 
122 | Here are the problem statements for each of the machine coding round problems you mentioned:
123 | 
124 | 1. **Star Rating Component:**
125 |    Design a star rating component that allows users to rate something using stars. The component should display a visual representation of the rating using filled and empty stars. Users can click on the stars to select a rating.
126 | 
127 | 2. **Counter Component:**
128 | 
129 | 3. **Nested Comment System:**
130 |    Build a nested comment system where users can leave comments on a post. Each comment can have replies, creating a nested structure. Users should be able to reply to comments and collapse/expand comment threads.
131 | 
132 | 4. **Product Card Component:**
133 |    Design a product card component that displays information about a product. It should include details like the product name, image, price, and a "Add to Cart" button. Users can click the button to add the product to their cart.
134 | 
135 | 5. **OTP Input Section:**
136 |    Implement an OTP (One-Time Password) input section where users receive an OTP via SMS or email and need to enter it to verify their identity. The component should provide a field for each digit of the OTP and handle the validation process.
137 |    
138 | ### Nested Comment System
139 | Firstly we will be discussing the problem statement of building a nested comment system where users can leave comments on a post. Each comment can have replies, creating a nested structure. Users should be able to reply to comments and collapse/expand comment threads.
140 | 
141 | **Nested Comment System: Overview**
142 | 
143 | A nested comment system allows users to leave comments on a post, and each comment can have replies, forming a threaded or hierarchical structure. Users should also be able to collapse and expand comment threads for better readability. This is commonly seen on social media platforms and discussion forums.
144 | 
145 | - **Nested Structure:** Comments are organized hierarchically, where each comment can have zero or more child comments (replies).
146 | - **Collapse/Expand:** Users can collapse or expand comment threads to show or hide replies, improving readability for lengthy discussions.
147 | - **Event Delegation:** Since comments can be added dynamically, event delegation is useful for handling interactions like replying and collapsing.
148 | 
149 | **HTML Structure:**
150 | 
151 | ```<!DOCTYPE html>
152 | <html lang="en">
153 | <head>
154 |   <meta charset="UTF-8">
155 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
156 |   <link rel="stylesheet" href="styles.css">
157 |   <title>Nested Comments Example</title>
158 | </head>
159 | <body>
160 |   <div id="comments">
161 |     <div class="comment">
162 |       <p>User A: This is a great post!</p>
163 |       <button class="reply-btn">Reply</button>
164 |       <button class="collapse-btn">Collapse</button>
165 |       <div class="replies">
166 |         <div class="comment">
167 |           <p>User B: I agree!</p>
168 |           <button class="reply-btn">Reply</button>
169 |         </div>
170 |       </div>
171 |     </div>
172 |   </div>
173 |   <script src="script.js"></script>
174 | </body>
175 | </html>
176 | 
177 | ```
178 | 
179 | **CSS:**
180 | 
181 | ```css
182 | .comment {
183 |   margin: 10px;
184 |   border: 1px solid #ccc;
185 |   padding: 10px;
186 | }
187 | 
188 | .reply-btn,
189 | .collapse-btn {
190 |   margin-right: 10px;
191 | }
192 | 
193 | .all-comment:not(:first-child) {
194 |   margin-left: 4rem;
195 | }
196 | 
197 | ```
198 | 
199 | **JavaScript:**
200 | 
201 | ```javascript
202 | const commentsContainer = document.getElementById('comments');
203 | 
204 | commentsContainer.addEventListener('click', (event) => {
205 |   const clickedElement = event.target;
206 | 
207 |   // Handle replying to comments
208 |   if (clickedElement.classList.contains('reply-btn')) {
209 |     const comment = clickedElement.closest('.comment');
210 |     const replyBox = document.createElement('div');
211 |     replyBox.className = 'comment reply';
212 |     replyBox.innerHTML = `
213 |       <p><input type="text" placeholder="Your reply..."></p>
214 |       <button class="submit-btn">Submit</button>
215 |     `;
216 |     comment.querySelector('.replies').appendChild(replyBox);
217 |   }
218 |   
219 |   // Handle collapsing/expanding comment threads
220 |   if (clickedElement.classList.contains('collapse-btn')) {
221 |     const comment = clickedElement.closest('.comment');
222 |     const replies = comment.querySelector('.replies');
223 |     replies.style.display = replies.style.display === 'none' ? 'block' : 'none';
224 |   }
225 | });
226 | 
227 | commentsContainer.addEventListener('click', (event) => {
228 |   const clickedElement = event.target;
229 |   
230 |   // Handle submitting replies
231 |   if (clickedElement.classList.contains('submit-btn')) {
232 |     const replyInput = clickedElement.closest('.comment.reply').querySelector('input');
233 |     const replyText = replyInput.value;
234 |     const newReply = document.createElement('div');
235 |     newReply.className = 'comment';
236 |     newReply.innerHTML = `<p>User: ${replyText}</p>`;
237 |     clickedElement.closest('.comment.reply').appendChild(newReply);
238 |     replyInput.value = '';
239 |   }
240 | });
241 | ```
242 | 
243 | **Explanation:**
244 | 
245 | - The HTML structure represents a simple comment system with reply and collapse buttons.
246 | - The CSS provides basic styling for comments and buttons.
247 | - The JavaScript code uses event delegation on the `commentsContainer`.
248 | - When the "Reply" button is clicked, a new reply box is dynamically added under the corresponding comment.
249 | - When the "Collapse" button is clicked, the replies are toggled to show or hide.
250 | 
251 | This example demonstrates a basic nested comment system. Depending on your requirements, you can expand this system to include user authentication, data storage, and more advanced features.
252 | 
253 | Assuming you integrate the provided HTML, CSS, and JavaScript code and open the HTML file in a web browser, here's what you can expect:
254 | 
255 | 1. The page will display a comment with a "Reply" button and a "Collapse" button.
256 | 2. Clicking the "Reply" button will create a new reply box beneath the comment where users can input their replies.
257 | 3. Clicking the "Collapse" button will toggle the visibility of the replies.
258 | 
259 | For the sake of visualization, imagine that you see a page with a comment, and when you click the "Reply" button, a new reply box appears under the comment. If you click the "Collapse" button, the replies will be hidden, and clicking it again will show them again.
260 | 
261 | Please note that you'll need to create an HTML file and include the provided HTML, CSS, and JavaScript code within appropriate sections (HTML, `<style>` for CSS, and `<script>` for JavaScript) for this to work as intended.
262 | 
263 | In this example, the CSS rule .all-comment:not(:first-child) targets all elements with the class .all-comment except for the first one, and applies a left margin of 4rem to create an indentation effect. However, I noticed that your HTML structure uses the class .comment for comments, so I've updated the rule in the CSS accordingly.
264 | ``` css
265 | .all-comment:not(:first-child){
266 | margin-left:4rem;
267 | }
268 | ```
269 | You can place this CSS rule in your styles.css file to achieve the desired indentation for nested comments. Just ensure that the structure of your HTML matches the example provided.


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/JavaScript/JS-3 Functional Programming.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | # Today's Content
  4 | - Callback functions
  5 | - Higher Order Functions
  6 | - Writing clean code with higher-order functions.
  7 | - Array Methods(Map, Filter, Reduce, etc.)
  8 | - Interview Questions
  9 | 
 10 | 
 11 | 
 12 | # Functional Programming
 13 | Following are the types of programming paradigms:
 14 | - Procedural Programming Paradigm(eg:- C, )
 15 | - Object Oriented Paradigms(eg:- Java, C++)
 16 | - Functional Programming Paradigm(eg:- javascript)
 17 | 
 18 | ## Callback Functions
 19 | These are the functions that can be passed to another function as an argument. 
 20 | 
 21 | ### Example
 22 | ```javascript
 23 | function printName(cb){
 24 |     console.log('Shikhar')
 25 |     // calling received callback function
 26 |     cb()
 27 | }
 28 | function printLastName(){
 29 |     console.log('Singh')
 30 | }
 31 | function printAge(){
 32 |     console.log(24)
 33 | }
 34 | printName(printLastName) 
 35 | printName(printAge) 
 36 | ```
 37 | 
 38 | **Output:**
 39 | Shikhar
 40 | Singh 
 41 | Shikhar
 42 | 24
 43 | 
 44 | **Explanation:**
 45 | In`printName(printLastName)` statement, we are passing `printLastName` as a callback, and it is accepted by the `printName` as a `cb` argument. And when `cb()` is executed then the callback function is called.
 46 | 
 47 | **We can also pass multiple callback functions**
 48 | ```javascript
 49 | function printName(cb1, cb2, cb3){
 50 |     console.log('Shikhar')
 51 |     cb1()
 52 |     cb2()
 53 |     cb3()
 54 | }
 55 | function printLastName(){
 56 |     console.log('Singh')
 57 | }
 58 | function printAge(){
 59 |     console.log(24)
 60 | }
 61 | function printAddress(){
 62 |     console.log('Delhi')
 63 | }
 64 | printName(printLastName, printAge, printAddress) 
 65 | ```
 66 | 
 67 | **Output:**
 68 | Shikhar
 69 | Singh
 70 | 24
 71 | Delhi
 72 | 
 73 | We can also pass the callback function within another callback function
 74 | 
 75 | 
 76 | 
 77 | # Coding question
 78 | We are given an array, which has the radius of different circles, we need to find the area, circumference and diameter for all the radiuses.
 79 | 
 80 | ## Approach
 81 | We will simply create a different function for calculating area, circumference and diameter and in every function we will simply iterate over an array, and then store the calculated value in the result array, and return that array. 
 82 | 
 83 | ## PseudoCode
 84 | ```javascript
 85 | let myRadiusArray = [2, 3, 4, 5, 8]
 86 | 
 87 | 
 88 | function calculateArea(radiusArr){
 89 |     let result = []
 90 |     for(let i = 0 ; i < radiusArr.length ; i ++ ){
 91 |         result.push(3.14 * radiusArr[i] * radiusArr[i])
 92 |     }
 93 |     return result
 94 | }
 95 | let finalAreas = calculateArea(myRadiusArray)
 96 | console.log('This is area array => ', finalAreas)
 97 | 
 98 | 
 99 | function calculateCircumference(radiusArr){
100 |     let result = []
101 |     for(let i = 0 ; i < radiusArr.length ; i ++ ){
102 |         result.push( 2 * Math.PI * radiusArr[i])
103 |     }
104 |     return result
105 | }
106 | let finalCircumferences = calculateCircumference(myRadiusArray)
107 | console.log('This is Circumference array =>', finalCircumferences)
108 | 
109 | 
110 | 
111 | function calculateDiameter(radiusArr){
112 |     let result = []
113 |     for(let i = 0 ; i < radiusArr.length ; i ++ ){
114 |         result.push(radiusArr[i] * 2)
115 |     }
116 |     return result
117 | }
118 | let finalDiameters = calculateDiameter(myRadiusArray)
119 | console.log('This is Diameter array =>', finalDiameters)
120 | ```
121 | 
122 | **Output**
123 | ```plaintext
124 | This is area array =>  [ 12.56, 28.259999999999998, 50.24, 78.5, 200.96 ]
125 | This is Circumference array => [
126 |   12.566370614359172,
127 |   18.84955592153876,
128 |   25.132741228718345,
129 |   31.41592653589793,
130 |   50.26548245743669
131 | ]
132 | This is Diameter array => [ 1, 1.5, 2, 2.5, 4 ]
133 | ```
134 | 
135 | ## Better Approach
136 | Here we can see that every function has the same structure, and here we are violating the dry principle.
137 | **Dry Principle** says that do not repeat yourself.
138 | While writing a code just try to write simple code, so that you do not need to repeat the same structure again and again. Now we will try to generalize this code. Let us try to solve this problem using a higher-order function.
139 | 
140 | 
141 | # Higher Order Function
142 | Higher-order functions are those functions where the function is passed as an argument. This means that which callback function is passed as an argument.
143 | 
144 | ## Example
145 | Here `printName()` is the higher-order function
146 | ```javascript
147 | function printName(cb){
148 |     console.log('Shikhar')
149 |     // calling received callback function
150 |     cb()
151 | }
152 | function printLastName(){
153 |     console.log('Singh')
154 | }
155 | printName(printLastName) 
156 |  
157 | ```
158 | 
159 | # Solution of coding question Using Higher Order Function
160 | Below is the javascript for the above coding question using a higher-order function.
161 | ```javascript
162 | let myRadiusArray = [2, 3, 4, 5, 8]
163 | 
164 | function circleArea(radius){
165 |     return Math.PI * radius * radius;
166 | }
167 | function circleCircumference(radius){
168 |     return 2 * Math.PI * radius;
169 | }
170 | function circleDiameter(radius){
171 |     return 2 * radius;
172 | }
173 | function calculateArea(radiusArr, logic){
174 |     let result = []
175 |     for(let i = 0 ; i < radiusArr.length ; i ++ ){
176 |         result.push(logic(radiusArr[i]))
177 |     }
178 |     return result
179 | }
180 | let finalAreas = calculateArea(myRadiusArray, circleArea)
181 | console.log('This is area array => ', finalAreas)
182 | let finalCircumferences = calculateArea(myRadiusArray, circleCircumference)
183 | console.log('This is Circumference array =>', finalCircumferences)
184 | let finalDiameter = calculateArea(myRadiusArray,  circleDiameter)
185 | console.log('This is Diameter array =>', finalDiameters)
186 | ```
187 | 
188 | 
189 | 
190 | 
191 | #  Functional Programming
192 | - Never manipulate or change your original array.
193 | 
194 | 
195 | 
196 | 
197 | # map
198 | 
199 | Let us suppose we are given an array of numbers and we want the square of every number of an array. We can solve it by creating a new array for the result and iterating over the original array, to find the square of every element and add it to the result.
200 | 
201 | **Code**
202 | ```javascript
203 | let arr = [1, 2, 3, 4, 5]
204 | let SquareArr = []
205 | for(let i = 0 ; i < arr.length ; i ++ ){
206 |     SquareArr.push(arr[i] * arr[i])
207 | }
208 | console.log(SquareArr)
209 | ```
210 | 
211 | We can also write this code for finding squares within the function.
212 | ```javascript
213 | let arr = [1, 2, 3, 4, 5]
214 | function squareArrFn(arr){
215 |     let SquareArr = []
216 |     for(let i = 0 ; i < arr.length ; i ++ ){
217 |         SquareArr.push(arr[i] * arr[i])
218 |     }
219 |     return SquareArr;
220 | }
221 | let squareArrFinal = squareArrFn(arr)
222 | console.log(squareArrFinal)
223 | ```
224 | 
225 | For these questions, where we want to apply operations on every element of an array, then we can use the map. **,ap is a higher-order function which will not change the original array**. There is an unbuilt loop in a `map` which will take array elements one by one.
226 | 
227 | ```javascript
228 | let arr = [1, 2, 3, 4, 5]
229 | let squaredValues = arr.map(function(num){
230 |     return num * num;
231 | })
232 | console.log(squaredValues)
233 | ```
234 | 
235 | ## Checking how the map works
236 | Suppose we have an array `arr = [1, 2, 3, 4, 5]`, and we want a square of all the elements of an array. `map` first look at the array, then it will take callback function and traverse every element of an array and apply an operation on it. 
237 | 
238 | 
239 | We can see that long code can be easily converted into small code using `map`.
240 | 
241 | **Using a map to find an area for the given radiuses in the form of an array**
242 | ```javascript
243 | let radiusArr = [1, 2, 3, 4]
244 | let areaArr = radiusArr.map(function(num){
245 |     return Math.PI * num * num;
246 | })
247 | console.log(areaArr)
248 | ```
249 | 
250 | 
251 | 
252 | # Problem Statement
253 | You are given a transaction array treat the transaction amount in rupees, and convert those amounts into dollars and conversion rate is also provided to us.
254 | 
255 | ## Idea
256 | We can use the `map` to apply similar operations to all the elements of an array. 
257 | 
258 | ## PseudoCode
259 | ```javascript
260 | const transactions = [1000, 3000, 4000, 2000, - 898, 3800, - 4500];
261 | const inrtToUsd = 80;
262 | 
263 | let conversionToDollars = transactions.map(function(amount){
264 |     return amount / inrtToUsd;
265 | })
266 | console.log(conversionToDollars)
267 | ```
268 | 
269 | 
270 | # filter
271 | `filter` is a higher-order function that will work based on a condition and will only have the values inside the result array for which the condition is satisfied. 
272 | The `filter` will work like a `map`, but in the `map`, we will operate all the elements of an array. But in the `filter`, we will apply some conditions to the elements of an array.
273 | The `filter` will work in boolean(true/false) values.
274 | 
275 | 
276 | ## Example
277 | We are given an array of numbers that contains both even and odd numbers and we need an array which only contains the even numbers of the input array. 
278 | 
279 | **Solution:** If the remainder of the number on dividing it by 2 is zero(`element % 2 == 0`), then it is an even number. Here we can use the filter. Here we have created `evenArray` and used a filter on `myArr`, so the elements that satisfy the condition will only be added to the `evenArray`.
280 | 
281 | ```javascript
282 | let myArr = [1, 2, 5, 7, 8, 2, 6, 9, 13, 17]
283 | 
284 | let evenArray = myArr.filter(function(num){
285 |     return num % 2 == 0;
286 | })
287 | console.log(evenArray)
288 | ```
289 | 
290 | **Output:**
291 | [2, 8, 2, 6]
292 | 
293 | 
294 | 
295 | 
296 | 
297 | # Problem Statement
298 | You are given a transaction array, and use a `filter` to find the positive transaction amounts
299 | 
300 | 
301 | ## Solution
302 | We want only positive values, so positive values are always greater than 0, so we will apply this condition using the `filter`.
303 | 
304 | ## PseudoCode
305 | ```javascript
306 | const transactions = [1000, 3000, 4000, 2000, - 898, 3800, - 4500];
307 | 
308 | let positiveValue = transactions.filter(function(amount){
309 |     return amount > 0;
310 | })
311 | console.log(positiveValue)
312 | ```
313 | 
314 | **Output:**
315 |  [1000, 3000, 4000, 2000, 3800]
316 | 
317 | 
318 | # Problem Statement
319 | You are given an array of numbers and you need to calculate the sum of all the elements of an array.
320 | 
321 | 
322 | ## Solution
323 | We will define a variable `sum`, initialize it with 0, iterate over the array and add elements one by one to `sum` the variable.
324 | 
325 | 
326 | ```javascript
327 | let arr = [1, 2, 3, 4, 5]
328 | let sum = 0
329 | for(let  i = 0 ; i < arr.length ; i ++ ){
330 |     sum = sum + arr[i]
331 | }
332 | console.log(sum)
333 | ```
334 | 
335 | **Output:**
336 | 15
337 | 
338 | 
339 | 
340 | # reduce
341 | Just like above we have reduced all the array elements into one value i.e. sum, so basically `reduce` is used to reduce multiple elements into a single one.
342 | 
343 | ## Example
344 | Suppose we want to solve the above question using `reduce`, which means we want to find the sum of all elements of an array using `reduce`.
345 | 
346 | ```javascript
347 | let arr = [1, 2, 3, 4, 5]
348 | let totalSum = arr.reduce(function(acc, num){
349 |     acc = acc + num
350 |     return acc
351 | },0)
352 | console.log(totalSum)
353 | ```
354 | 
355 | **Output:**
356 | 15
357 | 
358 | 
359 | **Explanation:**
360 | Here 0 written after `}` is the initialising value of `acc`, this means `acc` will be initiated with 0, and `acc` is used to store the sum and `num` is the current element of an array at every iteration and at every iteration, `num` is added to `acc`.


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/JavaScript/JS-6 OOPS-3.md:
--------------------------------------------------------------------------------
  1 | # Full Stack LLD & Projects: JavaScript - OOPS-3 : Call Apply Bind and Memory of Objects
  2 | 
  3 | **Agenda of this Lecture:**
  4 | 
  5 | * Call Method 
  6 | * Apply Method
  7 | * Bind Method
  8 | * How memory of reference data type works
  9 |      * Shallow copy
 10 |      * Deep copy
 11 | 
 12 | 
 13 | Lets consider and example:
 14 | 
 15 | 
 16 | ```javascript 
 17 | let student = {
 18 |   firstName: 'Adam',
 19 |   lastName: 'Smith',
 20 |   age: 25,
 21 |   
 22 |   getEmail: function() {
 23 |     console.log(`${this.firstName}.${this.lastName}@gmail.com`);
 24 |   }
 25 | };
 26 | 
 27 | // Calling the getEmail function using the 'call' method
 28 | student.getEmail();
 29 | ```
 30 | 
 31 | 
 32 | 
 33 | 
 34 | If we want to avoid repeating the code for the `getEmail` function for both the student and teacher objects by creating a shared function and using call to bind it to different objects.
 35 | 
 36 | ```javascript 
 37 | function getEmailFn() {
 38 |   console.log(`${this.firstName}.${this.lastName}@gmail.com`);
 39 | }
 40 | 
 41 | let student = {
 42 |   firstName: 'Adam',
 43 |   lastName: 'Smith',
 44 |   age: 25,
 45 |   getEmail: getEmailFn
 46 | };
 47 | 
 48 | let teacher = {
 49 |   firstName: 'Steve',
 50 |   lastName: 'Rogers',
 51 |   age: 35,
 52 |   getEmail: getEmailFn
 53 | };
 54 | 
 55 | student.getEmail(); 
 56 | teacher.getEmail(); 
 57 | ```
 58 | 
 59 | **Note:** This will return an error of `function not defined`. To solve this, we have three methods.
 60 | 
 61 | 
 62 | 
 63 | ### Explanation
 64 | 
 65 | The `getEmail` property should hold a reference to the function` getEmailFn`, not its execution result. Also, the usage of `this.firstName` and `this.lastName` outside a function will not refer to the desired context. Here's the corrected version:
 66 | 
 67 | ```javascript 
 68 | function getEmailFn(firstName, lastName) {
 69 |   console.log(`${firstName}.${lastName}@gmail.com`);
 70 | }
 71 | 
 72 | let student = {
 73 |   firstName: 'Adam',
 74 |   lastName: 'Smith',
 75 |   age: 25,
 76 |   getEmail: getEmailFn(this.firstName, this.lastName)
 77 | };
 78 | 
 79 | let teacher = {
 80 |   firstName: 'Steve',
 81 |   lastName: 'Rogers',
 82 |   age: 35,
 83 |   getEmail: getEmailFn(this.firstName, this.lastName)
 84 | };
 85 | 
 86 | student.getEmail; 
 87 | teacher.getEmail; 
 88 | ```
 89 | 
 90 | **Note:** This both will retur `undefined.undefined@gmail.com`
 91 | 
 92 | **To solve this , we can use call method**
 93 | 
 94 | ```javascript 
 95 | let student = {
 96 |   firstName: 'Adam',
 97 |   lastName: 'Smith',
 98 |   age: 25,
 99 |   getEmail: function() {
100 |     console.log(`${this.firstName}.${this.lastName}@gmail.com`);
101 |   }
102 | };
103 | 
104 | let teacher = {
105 |   firstName: 'Steve',
106 |   lastName: 'Rogers',
107 |   age: 35,
108 |   getEmail: function() {
109 |     console.log(`${this.firstName}.${this.lastName}@gmail.com`);
110 |   }
111 | };
112 | 
113 | student.getEmail.call(student);
114 | teacher.getEmail.call(teacher);
115 | ```
116 | 
117 | 
118 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/451/original/Screenshot_2023-09-20_150801.png?1695202699)
119 | 
120 | 
121 | 
122 | By using the `call` method, we attach a common `getEmailFn` function to both student and teacher objects, allowing it to be invoked with the correct context using call. This avoids repetition by dynamically binding the function to different objects and ensures accurate email address generation.
123 | 
124 | **We can pass some arguments as well to the call method:**
125 | 
126 | ```javascript 
127 | function getEmailFn(subjects) {
128 |   return  (${this.firstName}.${this.lastName}@gmail.com)`;
129 | }
130 | 
131 | function chooseSubject(sub1, sub2) {
132 |   return `${sub1} and ${sub2}`;
133 | }
134 | 
135 | let teacher1 = {
136 |   firstName: 'Steve',
137 |   lastName: 'Rogers',
138 |   age: 35,
139 |   getEmail: getEmailFn
140 | };
141 | 
142 | let teacher2 = {
143 |   firstName: 'Tony',
144 |   lastName: 'Stark',
145 |   age: 40,
146 |   getEmail: getEmailFn
147 | };
148 | ```
149 | 
150 | The `call` method in JavaScript allows you to invoke a function on an object while providing a specific context (this value) for that function to use, along with optional arguments that the function can accept. This enables dynamic context binding and the passing of specific values directly to the function being called.
151 | 
152 | 
153 | ### Explanation
154 | 
155 | **Apply** and **Call** method are almost same. The only difference is, when we are using apply method, we need to pass an **array** as the argument.
156 | 
157 | ```javascript 
158 | function getEmailFn(subjects) {
159 |   return `${subjects} (${this.firstName}.${this.lastName}@gmail.com)`;
160 | }
161 | 
162 | function chooseSubject(sub1, sub2) {
163 |   return `${sub1} and ${sub2}`;
164 | }
165 | 
166 | function chooseBatches(batch1, batch2, batch3) {
167 |   return `${batch1} ${batch2} ${batch3}`;
168 | }
169 | 
170 | let teacher1 = {
171 |   firstName: 'Steve',
172 |   lastName: 'Rogers',
173 |   age: 35,
174 |   getEmail: getEmailFn
175 | };
176 | 
177 | let teacher2 = {
178 |   firstName: 'Tony',
179 |   lastName: 'Stark',
180 |   age: 40,
181 |   getEmail: getEmailFn
182 | };
183 | ```
184 | 
185 | **Note:** This will give error as apply method takes array as argument. This is the corrected approach:
186 | 
187 | ```javascript
188 | function getEmailFn(subjects) {
189 |   return `${subjects} (${this.firstName}.${this.lastName}@gmail.com)`;
190 | }
191 | 
192 | function chooseSubject(sub1, sub2) {
193 |   return `${sub1} and ${sub2}`;
194 | }
195 | 
196 | function chooseBatches(batch1, batch2, batch3) {
197 |   return [batch1, batch2, batch3];
198 | }
199 | 
200 | let teacher1 = {
201 |   firstName: 'Steve',
202 |   lastName: 'Rogers',
203 |   age: 35,
204 |   getEmail: getEmailFn
205 | };
206 | 
207 | let teacher2 = {
208 |   firstName: 'Tony',
209 |   lastName: 'Stark',
210 |   age: 40,
211 |   getEmail: getEmailFn
212 | };
213 | 
214 | let batches = chooseBatches('BatchA', 'BatchB', 'BatchC');
215 | 
216 | console.log("Retrieving teacher1's email:");
217 | console.log(teacher1.getEmail.apply(teacher1, batches));
218 | 
219 | console.log("\nRetrieving teacher2's email:");
220 | console.log(teacher2.getEmail.apply(teacher2, batches));
221 | ```
222 | 
223 | In this version, the apply method is called with the entire batches array as its second argument, as the function getEmailFn only expects a single argument (subjects). This will work correctly because the apply method will pass each element of the array as a separate argument to the function.
224 | 
225 | 
226 | ### Explanation
227 | 
228 | The `bind` method in JavaScript creates a new function that, when invoked, has a specific this value set to a provided value. It's useful for "binding" a function to a particular object as its context. The new function produced by bind can also have preset arguments if provided.
229 | 
230 | ```javascript 
231 | let callLater = getEmail.bind(teacher1);
232 | console.log(callLater());
233 | ```
234 | 
235 | **Explanation:**
236 | 
237 | * `bind` creates a new function callLater that will have the getEmail function's logic from teacher1 as its content.
238 | * The `bind` method doesn't execute the function immediately; it prepares a new function with the specified context.
239 | * To actually execute the callLater function and log the email address, you need to call it with parentheses like `callLater()`.
240 | 
241 | 
242 | ### Explanation
243 | 
244 | 
245 | Lets consider few cases:
246 | 
247 | **Case-1:**
248 | 
249 | ```javascript 
250 | let person1 = `Adam`;
251 | let person2 = `Steve`;
252 | 
253 | console.log(person1);
254 | console.log(person2);
255 | ```
256 | 
257 | ```
258 | Output:
259 | 
260 | Adam
261 | Steve
262 | ```
263 | 
264 | **Case-2:**
265 | 
266 | ```javascript 
267 | let person1 = `Adam`;
268 | let person2 = `Steve`;
269 | 
270 | person2 = person1
271 | 
272 | console.log(person1);
273 | console.log(person2);
274 | ```
275 | 
276 | ```
277 | Output:
278 | 
279 | Adam
280 | Adam
281 | ```
282 | 
283 | **Case-3:**
284 | 
285 | ```javascript 
286 | let person1 = {
287 |   name: `Adam`,
288 |   age: 25
289 | }
290 | 
291 | 
292 | let person2 = person1
293 | 
294 | console.log(person1);
295 | console.log(person2);
296 | ```
297 | 
298 | ``` 
299 | Output:
300 | 
301 | { name: 'Adam', age: 25 }
302 | { name: 'Adam', age: 25 }
303 | ```
304 | 
305 | **Case-4:**
306 | 
307 | ```javascript 
308 | let person1 = {
309 |   name: `Adam`,
310 |   age: 25
311 | }
312 | 
313 | 
314 | let person2 = person1
315 | 
316 | person2.name = 'Steve'
317 | 
318 | console.log(person1);
319 | console.log(person2);
320 | ```
321 | 
322 | ```
323 | Output:
324 | 
325 | { name: 'Steve', age: 25 }
326 | { name: 'Steve', age: 25 }
327 | ```
328 | Here's a concise explanation of each case in terms of data types:
329 | 
330 | **Case-1:**
331 | Strings (Primitive Data Type)
332 | Both person1 and person2 hold separate string values.
333 | 
334 | **Case-2:**
335 | Strings (Primitive Data Type)
336 | person2 is assigned the value of person1, so they both reference the same string value.
337 | 
338 | **Case-3:**
339 | Objects (Reference Data Type)
340 | person2 points to the same object as person1, resulting in both variables referencing the same object in memory.
341 | 
342 | **Case-4:**
343 | Objects (Reference Data Type)
344 | person2 references the same object as person1. Changing a property via one variable affects the shared object's property value.
345 | 
346 | 
347 | **Heap and Stack Memory:**
348 | 
349 | * **Stack Memory:** It's used for function call data and local variables, managed automatically with Last-In-First-Out order. In cases 1-2, stack stores string values and references.
350 | * **Heap Memory:** It's for dynamic memory allocation, managed manually, suitable for larger data structures. In cases 3-4, heap holds shared object data and object property changes.
351 | 
352 | **Pass by value and Pass by reference:**
353 | 
354 | * **Pass by Value:** When passing a primitive data type, a copy of the actual value is passed. In cases 1-2, strings are passed by value when assigned or copied.
355 | * **Pass by Reference:** When passing a reference data type, a reference (memory address) to the actual data is passed. In cases 3-4, objects are passed by reference when shared between variables.
356 | 
357 | ### Shallow Copy
358 | 
359 | A shallow copy creates a new object or array, but the contents within it remain references to the original data. It copies the top-level structure without recursively copying nested objects or arrays.
360 | 
361 | The **spread operator (...)** can be used to create shallow copies of arrays and objects. It creates a new array or object and copies the enumerable properties or elements from the original. However, for nested objects, only references to the inner objects are copied, not the inner objects themselves.
362 | 
363 | **Example:**
364 | 
365 | ```javascript
366 | let person1 = {
367 |   name: 'Adam',
368 |   age: 25,
369 |   address: {
370 |     city: 'New York',
371 |     country: 'USA'
372 |   }
373 | };
374 | 
375 | let person2 = {
376 |   ...person1,  // Shallow copy top-level properties
377 |   name: 'Steve',
378 |   address: {
379 |     ...person1.address,  // Shallow copy nested address object
380 |     city: 'Delhi'
381 |   }
382 | };
383 | 
384 | console.log(person1);
385 | console.log(person2);
386 | ``` 
387 | 
388 | ```
389 | Output:
390 | 
391 | {
392 |   name: 'Adam',
393 |   age: 25,
394 |   address: { city: 'New York', country: 'USA' }
395 | }
396 | { name: 'Steve', age: 25, address: { city: 'Delhi', country: 'USA' } }
397 | ```
398 | 
399 | ### Deep Copy
400 | 
401 | A deep copy creates a completely independent copy of an object or array, including all nested objects or arrays. It ensures that changes made to the copied structure do not affect the original.
402 | 
403 | **Example:**
404 | 
405 | ```javascript 
406 | let person1 = {
407 |   name: 'Adam',
408 |   age: 25,
409 |   address: {
410 |     city: 'New York',
411 |     country: 'USA'
412 |   }
413 | };
414 | 
415 | let person2 = JSON.parse(JSON.stringify(person1));
416 | 
417 | person2.name = 'Steve';
418 | person2.address.city = 'Delhi';
419 | 
420 | console.log(person1);
421 | console.log(person2);
422 | ```
423 | 
424 | ``` 
425 | Output:
426 | 
427 | {
428 |   name: 'Adam',
429 |   age: 25,
430 |   address: { city: 'New York', country: 'USA' }
431 | }
432 | { name: 'Steve', age: 25, address: { city: 'Delhi', country: 'USA' } }
433 | ```
434 | 
435 | ---
436 | 
437 | 
438 | 
439 | 
440 | 
441 | 


--------------------------------------------------------------------------------
/LLD-2 (JavaScript)/JavaScript/JS-7 Asynchronous Programming-1.md:
--------------------------------------------------------------------------------
  1 | # Asynchronous Programming 2
  2 | 
  3 | #### Definition
  4 | 
  5 | **Promise:** In JavaScript, a promise is an object representing the eventual completion (or failure) of an asynchronous operation. It provides a way to handle asynchronous code more cleanly and manage the results or errors that may occur when the operation completes. Promises have three states: pending, resolved (fulfilled), or rejected, and they allow you to attach callback functions to handle these different outcomes.
  6 | 
  7 | *States of Promise*
  8 | 
  9 | * Made a Promise => Pending State
 10 | * Promise can be fulfilled => Resolved
 11 | * Promise can not be fulfilled => Rejected State
 12 | * Setled => Promise Executed
 13 | 
 14 | #### Syntax
 15 | 
 16 | ```javascript
 17 | let myPromise = new Promise(function(resolve, reject){
 18 | 
 19 | })
 20 | 
 21 | console.log(myPromise)
 22 | ```
 23 | 
 24 | **Output:**
 25 | 
 26 | ![](https://hackmd.io/_uploads/rJDlN6WAh.png)
 27 | 
 28 | **Explanation:** Wherever there is no resolve and no reject condition so it always lies under the pending condition.
 29 | 
 30 | 
 31 | #### Question
 32 | 
 33 | Create resolve and reject states of Promise 
 34 | 
 35 | #### Solution
 36 | 
 37 | **Reject State:**
 38 | 
 39 | ```javascript
 40 | let myPromise = new Promise(function(resolve, reject){
 41 |     const a = 4
 42 |     const b = 5
 43 | 
 44 |     if(a == b) {
 45 |         resolve('Yes They are Equal')
 46 |     }
 47 |     else {
 48 |         reject('No They are not Equal')
 49 |     }
 50 | })
 51 | 
 52 | console.log(myPromise)
 53 | 
 54 | ```
 55 | 
 56 | **Output:**
 57 | 
 58 | ![](https://hackmd.io/_uploads/rJV47ZMR3.png)
 59 | 
 60 | **Explanation:** Whenever condition is not fulfilled or condition is not true it always lies under the rejected state
 61 | 
 62 | **Resolve States:**
 63 | 
 64 | ```javascript
 65 | let myPromise = new Promise(function(resolve, reject){
 66 |     const a = 4
 67 |     const b = 4
 68 | 
 69 |     if(a == b) {
 70 |         resolve('Yes They are Equal')
 71 |     }
 72 |     else {
 73 |         reject('No They are not Equal')
 74 |     }
 75 | })
 76 | 
 77 | console.log(myPromise)
 78 | 
 79 | ```
 80 | 
 81 | **Output:**
 82 | 
 83 | ![](https://hackmd.io/_uploads/B1U1VbfR3.png)
 84 | 
 85 | **Explanation:** Whenever condition is fulfilled or condition is true it always lies under the resolved state.
 86 | 
 87 | 
 88 | #### Question
 89 | 
 90 | 1. What is the use of then method and How to use then mehtod?
 91 | 
 92 | ```javascript
 93 | let myPromise = new Promise(function(resolve, reject){
 94 |     const a = 4
 95 |     const b = 4
 96 | 
 97 |     if(a == b) {
 98 |         resolve('Yes They are Equal')
 99 |     }
100 |     else {
101 |         reject('No They are not Equal')
102 |     }
103 | })
104 | 
105 | 
106 | // then method
107 | myPromise.then(function(data){
108 |     console.log(data)
109 | })
110 | 
111 | ```
112 | 
113 | **Output:**
114 | 
115 | ![](https://hackmd.io/_uploads/B1YzDZfR3.png)
116 | 
117 | **Explanation:** Whenever a promise is resolved the data inside the resolve passes to the then method.
118 | 
119 | 2. What is the use of catch method and How to use catch mehtod?
120 | 
121 | ```javascript
122 | let myPromise = new Promise(function(resolve, reject){
123 |     const a = 4
124 |     const b = 4
125 | 
126 |     if(a == b) {
127 |         resolve('Yes They are Equal')
128 |     }
129 |     else {
130 |         reject('No They are not Equal')
131 |     }
132 | })
133 | 
134 | 
135 | // then method
136 | myPromise.then(function(data){
137 |     console.log(data)
138 | })
139 | 
140 | ```
141 | 
142 | **Output:**
143 | 
144 | ![](https://hackmd.io/_uploads/H1iKeQ702.png)
145 | 
146 | **Explanation:** Whenever a promise is rejected the method will throw an error and to handle these errors we use a catch method.  
147 | 
148 | #### Question
149 | 
150 | **How to read a file using Promises?**
151 | 
152 | #### Solution
153 | 
154 | First of we will se how to read file using javascript only
155 | 
156 | ```javascript
157 | const fs = require('fs')
158 | 
159 | fs.readFile('f1.txt', cb)
160 | 
161 | function cb(err, data) {
162 |     if(err) {
163 |         console.log(err)
164 |     }else {
165 |         console.log("This is File 1 data -> " + data)
166 |     }
167 | }
168 | 
169 | ```
170 | 
171 | **Output:**
172 | 
173 | ![](https://hackmd.io/_uploads/BJueDXX03.png)
174 | 
175 | 
176 | Now we will se how to read the file with using promises.
177 | 
178 | For Resolve State:  
179 | 
180 | ```javascript
181 | const fs = require('fs')
182 | 
183 | let promiseReadFile = fs.promises.readFile('f1.txt')
184 | 
185 | promiseReadFile.then(function(data) {
186 |     console.log('This is file data -> ' + data)
187 | })
188 | 
189 | promiseReadFile.catch(function(err) {
190 |     console.log('This is Your Error -> ' + err)
191 | })
192 | 
193 | ```
194 | 
195 | **Output:**
196 | 
197 | ![](https://hackmd.io/_uploads/HkHSommCn.png)
198 | 
199 | For Reject State:  
200 | 
201 | ```javascript
202 | const fs = require('fs')
203 | 
204 | let promiseReadFile = fs.promises.readFile('f5.txt')
205 | 
206 | promiseReadFile.then(function(data) {
207 |     console.log('This is file data -> ' + data)
208 | })
209 | 
210 | promiseReadFile.catch(function(err) {
211 |     console.log('This is Your Error -> ' + err)
212 | })
213 | 
214 | ```
215 | 
216 | ```f1.txt
217 | I AM FILE 1 DATA
218 | 
219 | ```
220 | 
221 | **Output:**
222 | 
223 | ![](https://hackmd.io/_uploads/HJEe37Q0h.png)
224 | 
225 | **Explanation:** There is a in-built process of 'resolve' and 'reject' body which passes through the then and catch method. If the promise is fulfilled then it lies under the 'resolve' state using 'then' method. else it lies under the 'reject' state using 'catch' method.  
226 | 
227 | #### Question
228 | 
229 | **How to read all files using promises?**
230 | 
231 | ```javascript
232 | const fs = require('fs')
233 | 
234 | let promiseReadFile1 = fs.promises.readFile('f1.txt')
235 | let promiseReadFile2 = fs.promises.readFile('f2.txt')
236 | let promiseReadFile3 = fs.promises.readFile('f3.txt')
237 | 
238 | // For File 1
239 | promiseReadFile1.then(function(data) {
240 |     console.log('This is file 1 data -> ' + data)
241 | })
242 | 
243 | promiseReadFile1.catch(function(err) {
244 |     console.log('This is Your Error -> ' + err)
245 | })
246 | 
247 | // For File 2
248 | promiseReadFile2.then(function(data) {
249 |     console.log('This is file 2 data -> ' + data)
250 | })
251 | 
252 | promiseReadFile2.catch(function(err) {
253 |     console.log('This is Your Error -> ' + err)
254 | })
255 | 
256 | // For File 3
257 | promiseReadFile3.then(function(data) {
258 |     console.log('This is file 3 data -> ' + data)
259 | })
260 | 
261 | promiseReadFile3.catch(function(err) {
262 |     console.log('This is Your Error -> ' + err)
263 | })
264 | 
265 | ```
266 | 
267 | ```f1.txt
268 | I AM FILE 1 DATA
269 | 
270 | ```
271 | 
272 | ```f2.txt
273 | I AM FILE 2 DATA
274 | 
275 | ```
276 | 
277 | ```f3.txt
278 | I AM FILE 3 DATA
279 | 
280 | ```
281 | 
282 | **Output:**
283 | 
284 | ![](https://hackmd.io/_uploads/ByPjJNQ02.png)
285 | 
286 | **Explanation:** Since we are using promises so the order can be changed every time becuase it's following parallel operation and parallel operations can only happens when the code is asynchronous.  
287 | 
288 | **Optimized Solution**
289 | 
290 | For then method
291 | 
292 | ```javascript
293 | const fs = require('fs')
294 | 
295 | let f1p = fs.promises.readFile('f1.txt')
296 | let f2p = fs.promises.readFile('f2.txt')
297 | let f3p = fs.promises.readFile('f3.txt')
298 | 
299 | function readFileCallback(data) {
300 |     console.log('This is the data -> ' + data)
301 | }
302 | 
303 | f1p.then(readFileCallback)
304 | f2p.then(readFileCallback)
305 | f3p.then(readFileCallback)
306 | 
307 | ```
308 | 
309 | **Output:**
310 | 
311 | ![](https://hackmd.io/_uploads/HJ8D7EX0n.png)
312 | 
313 | For catch method
314 | 
315 | ```javascript
316 | const fs = require('fs')
317 | 
318 | let f1p = fs.promises.readFile('f1.txt')
319 | let f2p = fs.promises.readFile('f2.txt')
320 | let f3p = fs.promises.readFile('f3.txt')
321 | 
322 | function readFileCallback(data) {
323 |     console.log('This is the data -> ' + data)
324 | }
325 | 
326 | function handleError(err) {
327 |     console.log('This is my error -> ' + err)
328 | }
329 | 
330 | f1p.then(readFileCallback)
331 | f2p.then(readFileCallback)
332 | f3p.then(readFileCallback)
333 | 
334 | f1p.catch(handleError)
335 | f2p.catch(handleError)
336 | f3p.catch(handleError)
337 | 
338 | ```
339 | 
340 | **Output:**
341 | 
342 | ![](https://hackmd.io/_uploads/HJFA4EmRn.png)
343 | 
344 | **Explanation:** Since we are using promises so the order can be changed every time becuase it's following parallel operation and parallel operations can only happens when the code is asynchronous.  
345 | 
346 | 
347 | #### Definition:
348 | Asynchronous JavaScript is a programming paradigm that allows you to execute code concurrently without blocking the main execution thread.
349 | 
350 | * Call Stack
351 | * Node APIs
352 | * Callback Queue
353 | * Event Loop
354 | 
355 | ```javascript
356 | const fs = require('fs')
357 | 
358 | console.log('Before')
359 | 
360 | let f1p = fs.promises.readFile('f1.txt')
361 | let f2p = fs.promises.readFile('f2.txt')
362 | let f3p = fs.promises.readFile('f3.txt')
363 | 
364 | function readFileCallback(data) {
365 |     console.log('This is the data -> ' + data)
366 | }
367 | 
368 | function handleError(err) {
369 |     console.log('This is my error -> ' + err)
370 | }
371 | 
372 | f1p.then(readFileCallback)
373 | f2p.then(readFileCallback)
374 | f3p.then(readFileCallback)
375 | 
376 | f1p.catch(handleError)
377 | f2p.catch(handleError)
378 | f3p.catch(handleError)
379 | 
380 | console.log('After')
381 | 
382 | ```
383 | 
384 | **Output:**
385 | 
386 | ![](https://hackmd.io/_uploads/HJGqwEm0h.png)
387 | 
388 | **Visualization**
389 | 
390 | ![](https://hackmd.io/_uploads/SyaF_4QCh.png)
391 | 
392 | 
393 | #### Example
394 | 
395 | ```javascript
396 | function logA() { console.log('A') }
397 | function logB() { console.log('B') }
398 | function logC() { console.log('C') }
399 | function logD() { console.log('D') }
400 | 
401 | // Click the "RUN" button to learn how this works!
402 | logA();
403 | setTimeout(logB, 0);
404 | Promise.resolve().then(logC);
405 | logD();
406 | 
407 | ```
408 | 
409 | **Output:**
410 | 
411 | ![](https://hackmd.io/_uploads/r1wuFNm03.png)
412 | 
413 | **Explanation:** MicroTaks queue will be given the higher priority promisified code will run earlier than callback.
414 | 
415 | **Visulization:**
416 | 
417 | ![](https://hackmd.io/_uploads/HyJBhVQ0h.gif)
418 | 
419 | **Promise Chaining:** Promise chaining in JavaScript is a technique for working with asynchronous code using Promises. It involves linking multiple asynchronous operations together, ensuring that one operation starts only after the previous one has completed successfully. This is typically achieved using the `.then()` method to handle the result of a Promise and return another Promise, allowing you to chain multiple operations together in a clean and sequential manner.  
420 | 
421 | 
422 | ![](https://hackmd.io/_uploads/Sy4elHQC2.png)
423 | 
424 | #### Example
425 | 
426 | ```javascript
427 | const fs = require('fs')
428 | 
429 | console.log('Before')
430 | 
431 | let f1p = fs.promises.readFile('f1.txt')
432 | 
433 | function cb1(data) {
434 |     console.log('This is File 1 Data -> ' + data)
435 | 
436 |     let f2p = fs.promises.readFile('f2.txt')
437 | 
438 |     return f2p
439 | }
440 | 
441 | function cb2(data) {
442 |     console.log('This is File 2 Data -> ' + data)
443 | 
444 |     let f3p = fs.promises.readFile('f3.txt')
445 | 
446 |     return f3p
447 | }
448 | 
449 | function cb3(data) {
450 |     console.log('This is File 3 Data -> ' + data)
451 | }
452 | 
453 | f1p.then(cb1).then(cb2).then(cb3)
454 | 
455 | console.log('After')
456 | 
457 | ```
458 | 
459 | **Output:**
460 | 
461 | ![](https://hackmd.io/_uploads/SJAXSrQ02.png)
462 | 
463 | **Explanation:** It's following serial operation and serial operations dosen't affect the order.  


--------------------------------------------------------------------------------
/LLD-3 (React)/React-12: React Redux Interview Question 2.md:
--------------------------------------------------------------------------------
  1 | ## Full Stack LLD & Projects: React -10: React Redux Interview Question 2
  2 | 
  3 | 
  4 | **Agenda of this lecture:**
  5 | 
  6 | * Code splitting
  7 | * Lazy loading
  8 | * Higher order components
  9 | * Controlled and Uncontrolled components
 10 | 
 11 | 
 12 | 
 13 | ### Explanation
 14 | 
 15 | Before jumping into code splitting we will first understand the concept of **bundling** in react.
 16 | 
 17 | A React application can have multiple components, each spread across different JavaScript files. When you build the application, you want to bundle these separate files into a single file for optimized delivery to the browser. Webpack is a popular tool used for this purpose. It takes all your application's code, along with its dependencies, and packages them into a single bundle file, which is efficient for loading and executing in the browser.
 18 | 
 19 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/537/original/Screenshot_2023-09-20_183604.png?1695215370)
 20 | 
 21 | Webpack helps with bundling in a React application by efficiently combining multiple JavaScript files and assets into a single bundle. It optimizes resource delivery, reduces HTTP requests, and enhances the application's loading performance.
 22 | 
 23 | ### Code splitting
 24 | 
 25 | Code splitting is a technique that allows a React application to break its code into smaller, separate files or "chunks." Instead of loading the entire application code upfront, only the necessary code is loaded when a specific feature or route is accessed. This improves initial loading times and resource efficiency, enhancing the overall user experience.
 26 | 
 27 | Code splitting is like fetching ingredients from the fridge only when you need them to make a sandwich. In React, it means loading parts of your application's code on-demand, improving performance by reducing initial load times and resource usage.
 28 | 
 29 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/538/original/Screenshot_2023-09-20_183611.png?1695215389)
 30 | 
 31 | 
 32 | 
 33 | First lets see how data is split and then we will see how react components can be split:-
 34 | 
 35 | **Splitting of Data:**
 36 | 
 37 | 
 38 | The `data.js` looks like this:-
 39 | 
 40 | ```javascript 
 41 | export const moviesData = [{
 42 |     id : '1',
 43 |     name : 'Mission Impossible : Dead reckoning'
 44 | },
 45 | {
 46 |     id : '2',
 47 |     name : 'Oppenhiemer'
 48 | },
 49 |    {
 50 |     id : '3',
 51 |     name : 'Barbie'
 52 |    }
 53 | ]
 54 | ```
 55 | 
 56 | When you bundle your code, it combines all the imported modules, like data.js, into one optimized file. This makes it easier to manage and deploy your application because you only need to serve a single bundle file to the client browser.
 57 | 
 58 | In this the data is split using **dynamic importing** in JavaScript. Instead of loading the movie data immediately, the `getMovies` function uses the `import()` function to fetch the data from a separate file called data.js when needed. This is a form of code splitting, as it loads the data module only when required, which can help optimize performance by reducing the initial load time of your application.
 59 | 
 60 | 
 61 | ### Explanation
 62 | 
 63 | Bundling of react components is done using **Lazy Loading**.
 64 | 
 65 | React components are bundled using Lazy Loading. Lazy Loading is a technique that allows you to load components only when they are needed, rather than upfront when the application initially loads.
 66 | 
 67 | Here's how it works:
 68 | 
 69 | * Each component (`Home`, `Products`, `Testimonials`, and `About`) is imported using the `lazy()` function, which dynamically imports the component files when they are required.
 70 | * This means that the code for these components is split into separate chunks and loaded on-demand, reducing the initial load time of your application.
 71 | * Lazy Loading helps optimize performance by loading only the necessary components when the user navigates to specific routes, improving the user experience and minimizing unnecessary network requests.
 72 | 
 73 | ```javascript 
 74 | const Home = lazy(()=> import('./pages/Home'))
 75 | const Products = lazy(()=> import('./pages/Products'))
 76 | const Testimonials = lazy(()=> import('./pages/Testimonials'))
 77 | const About = lazy(()=> import('./pages/About'))
 78 | ```
 79 | 
 80 | Now we will wrap the routes:-
 81 | 
 82 | The lazy loading of components is related to how routes are wrapped using React's Suspense and React Router's Routes components.
 83 | 
 84 | the lazy loading of components is related to how routes are wrapped using React's Suspense and React Router's Routes components.
 85 | 
 86 | * **Suspense:** The `<Suspense>` component is used to specify a fallback UI (in this case, `<h2>Loading...</h2>`) while waiting for dynamically imported components to load. It's a key part of lazy loading as it ensures a smooth user experience by displaying a loading indicator until the requested component is ready.
 87 | * **Routes:** Inside the `<Routes>` component, various routes are defined, and each route specifies a component to render when the corresponding URL is matched. These components, such as `<Home />`, `<About />`, `<Products />`, and `<Testimonials />`, are dynamically imported using lazy loading. This means that the components will only be loaded from the server when their respective routes are accessed by the user.
 88 | 
 89 | ```javascript 
 90 | return (
 91 |     <div className="App">
 92 |       {/* <h1>These are the Movies</h1>
 93 |       <button onClick={getMovies}>Show Movies</button>
 94 |       <p>{movies.length>0 ? JSON.stringify(movies) : ''}</p> */}
 95 | 
 96 |       {/* <Suspense fallback={<h2>Loading...</h2>}>
 97 |        <BrowserRouter>
 98 | 
 99 |         <Navbar/>
100 |     
101 |        <Routes>
102 | 
103 |         <Route path='/' element={<Home/>}/>
104 |         <Route path='/about' element={<About/>}/>
105 |         <Route path='/products' element={<Products/>}/>
106 |         <Route path='/testimonials' element={<Testimonials/>}/>
107 |        </Routes>
108 |      
109 |        
110 |        </BrowserRouter>
111 |        </Suspense> */}
112 | 
113 |        {/* <CompA/>
114 |        <CompA dark />
115 |        <CompA yellow/> */}
116 | 
117 | 
118 |        <Controlled/>
119 |        <Uncontrolled/>
120 |      
121 | 
122 |       
123 |     </div>
124 |   );
125 | ```
126 | 
127 | 
128 | ### Explanation
129 | 
130 | 
131 | High Order Components (HOCs) are a design pattern in React that allows you to reuse component logic and share it among multiple components. HOCs are not components themselves but functions that take a component and return a new enhanced component with additional behavior. They are a way to abstract common functionality from components and promote code reusability.
132 | 
133 | Let's use three components, A, B, and C, each with different features, to illustrate the concept:
134 | 
135 | 1. Component A (3 features)
136 | Component A is a base component with three specific features: FeatureX, FeatureY, and FeatureZ.
137 | Component B (4 features)
138 | 2. Component B also requires the same three features as Component A (FeatureX, FeatureY, FeatureZ) and an additional feature, FeatureW.
139 | Component C (5 features)
140 | 3. Component C needs the same three features as Components A and B (FeatureX, FeatureY, FeatureZ), plus two extra features, FeatureV and FeatureU.
141 | 
142 | ```javascript 
143 | import React from 'react'
144 | 
145 | 
146 | const styles = {
147 |     dark : {
148 |         background : 'black',
149 |         color : 'white'
150 |     } ,
151 | 
152 |     yellow : {
153 |         background : "yellow",
154 |         color : 'red'
155 |     }
156 | }
157 | 
158 | function HOC(WrappedComp) {
159 | 
160 |     // args = [dark  ,yellow]
161 |   return function (args){
162 |     let temp ={}
163 | 
164 |     if(args.dark){
165 |         temp = {...styles.dark}
166 |     }
167 | 
168 |     else if (args.yellow){
169 |         temp = {...styles.yellow}
170 |     }
171 | 
172 |     let obj = {...args , style : temp}
173 | 
174 |     return <WrappedComp {...obj}/>
175 | 
176 |   }
177 | }
178 | 
179 | export default HOC
180 | ```
181 | 
182 | This code defines a Higher Order Component (HOC) that takes another component, WrappedComp, as an argument and returns an enhanced version of it with additional styling based on the provided arguments (dark or yellow).
183 | 
184 | * The styles object contains predefined styles for both 'dark' and 'yellow' modes.
185 | * The HOC function takes `WrappedComp` as an argument and returns a new function.
186 | * Inside this function, it checks whether the args object contains a 'dark' or 'yellow' property.
187 | * Depending on the property found, it applies the corresponding styles to temp.
188 | * The style property is added to the args object with the selected styles.
189 | * Finally, the `WrappedComp` is rendered with the updated args containing the chosen styles.
190 | 
191 | 
192 | ### Explanation
193 | 
194 | **Controlled Components:** Controlled components are React components where the value of an input element is controlled by the component's state. In this given below  example, the `Controlled` component maintains the value of the input field (text) in its state and updates it through the `onChange` event handler. This ensures that the input's value is always synchronized with the component's state, making it a controlled component. Controlled components are useful for managing and validating user input in React applications.
195 | 
196 | ```javascript 
197 | import React , {useState} from 'react'
198 | 
199 | const Controlled = () => {
200 | 
201 |     const [text , setText] = useState('')
202 | 
203 |     const handleSubmit = (e)=>{
204 |         e.preventDefault()
205 |         
206 |         console.log(text)
207 |     }
208 |   return (
209 |     <div>
210 |         <form>
211 |             <input type='text' value={text} placeholder='controlled' onChange={(e)=>setText(e.target.value)}/>
212 |             <button onClick={handleSubmit}>Submit</button>
213 |         </form>
214 |     </div>
215 |   )
216 | }
217 | 
218 | export default Controlled
219 | ```
220 | 
221 | **Uncontrolled Components:** Uncontrolled components are React components where the value of an input element is not controlled by React state but is directly managed by the DOM. In the given below example, the `Uncontrolled` component uses a `ref` (`inputRef`) to directly access the input field's value from the DOM when needed. Unlike controlled components, React doesn't track or manage the input value's changes in its state. Uncontrolled components are useful in cases where you need to integrate with non-React code or libraries and need direct access to DOM elements.
222 | 
223 | ```javascript 
224 | import React , {useRef} from 'react'
225 | 
226 | const Uncontrolled = () => {
227 |     const inputRef = useRef(null)
228 | 
229 | 
230 |     const handleSubmit = (e)=>{
231 |         e.preventDefault()
232 |         console.log(inputRef.current.value)
233 |     }
234 |   return (
235 |     <div>
236 |         <form>
237 |             <input type='text' placeholder='uncontrolled' ref={inputRef}/>
238 |             <button onClick={handleSubmit}>Submit</button>
239 |         </form>
240 |     </div>
241 |   )
242 | }
243 | 
244 | export default Uncontrolled
245 | ```
246 | 
247 | 


--------------------------------------------------------------------------------
/LLD-3 (React)/React-5 : IMDB-Part 2 (Client side Routing and React Router).md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | # IMDB Clone React Website
  4 | 
  5 | ## Project Description
  6 | 
  7 | We will be creating an IMDB clone, where we will fetch Real-time trending movies data and will show it in grid format, we will be designing the whole application by using Tailwind CSS.
  8 | 
  9 | ## Features of the project
 10 | 
 11 | The following will be the features of our IMDB clone:
 12 | 
 13 | - The user will be able to view all the latest & trneding movies (IMDB API)
 14 | - User can create his own separate watchlist
 15 | - User can filter movies according to genre
 16 | - User can sort movies according to ratings
 17 | - Pagination will be implemented to move from one page to another to get updated data of other movies
 18 | - Search feature will be there for movies.
 19 | - We will be deploying this to netlify
 20 | 
 21 | ## Wireframe 
 22 | 
 23 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/481/original/Screenshot_2023-09-20_170326.png?1695209627)
 24 | 
 25 | 
 26 | ## Implementation
 27 | 
 28 | > **Note**: This lecture is in continuation to *'Full Stack LLD & Projects: React-4: IMDB Project- Part 1'*, please refer that lecture before hopping onto this one.
 29 | 
 30 | In this lecture we will be implementing the following features:
 31 | 
 32 | - Briefing Client side Routing and React Router
 33 | - Watchlist Component
 34 | - Pagination
 35 | 
 36 | 
 37 | ### Component
 38 | 
 39 | 
 40 | - **WatchList.jsx**
 41 | 
 42 |   - This JavaScript file defines the `WatchList` component, which represents the user's watchlist section in the IMDb web application. Users can view and manage the list of movies they have added to their watchlist.
 43 |   - The component function takes several props:
 44 |     - `watchList`: An array containing the user's watchlist of movies.
 45 |     - `handleRemoveFromWatchList`: A function to handle the removal of movies from the watchlist.
 46 |     - `setWatchList`: A function to update the watchlist state.
 47 |    
 48 |   - The component also uses local state variables to manage filtering and searching of watchlist movies. These state variables include `genreList`, `currGenre`, and `search`.
 49 |   - Inside the component, there are several functions and effects that manage various aspects of the watchlist:
 50 |     - `hanldeFilter(genre)`: Updates the current genre filter when a genre is clicked.
 51 |     - `handleSearch(e)`: Updates the search query when the user types in the search input.
 52 |     - `sortIncreasing()`: Sorts the watchlist in increasing order of movie ratings.
 53 |     - `sortDecreasing()`: Sorts the watchlist in decreasing order of movie ratings.
 54 |   - The `useEffect` hook is used to populate the `genreList` state with unique genres based on the movies in the watchlist. It ensures that the genre filter options are updated whenever the watchlist changes.
 55 |   - The component's `return` statement defines the structure of the WatchList component:
 56 |     - Genre filter buttons are displayed at the top. Users can click on these buttons to filter the watchlist by genre.
 57 |     - A search input field allows users to search for movies in the watchlist based on their titles.
 58 |     - A table displays the watchlist movies, including columns for movie name, ratings, popularity, genre, and a delete option.
 59 |     - The table rows are generated based on the current genre filter and search query.
 60 |     - The ratings column headers allow users to sort the watchlist in ascending or descending order based on movie ratings.
 61 |     - The delete option in each row allows users to remove a movie from their watchlist.
 62 |   - The `WatchList` component provides essential functionality for users to manage and view their watchlist, making it a valuable feature of the IMDb web application.
 63 | 
 64 | **Code**:
 65 | 
 66 | ```javascript=
 67 | import { useEffect, useState } from "react";
 68 | import genreids from "../Utility/genre";
 69 | 
 70 | function WatchList(props){
 71 |   let {watchList,handleRemoveFromWatchList,setWatchList} = props;
 72 |   let [genreList,setGenreList] = useState(["All Genres"]);
 73 |   let [currGenre,setCurrGenre] = useState("All Genres");
 74 |   let [search,setSearch] = useState("");
 75 | 
 76 |   let hanldeFilter = (genre)=>{
 77 |     setCurrGenre(genre)
 78 |   }
 79 | 
 80 |   let handleSearch = (e)=>{
 81 |     setSearch(e.target.value);
 82 |   }
 83 | 
 84 |   let sortIncreasing = ()=>{
 85 |     let sorted = watchList.sort((movieA,movieB)=>{
 86 |       return movieA.vote_average-movieB.vote_average
 87 |     })
 88 |     setWatchList([...sorted]);
 89 |   }
 90 | 
 91 |   let sortDecreasing = ()=>{
 92 |     let sorted = watchList.sort((movieA,movieB)=>{
 93 |       return movieB.vote_average-movieA.vote_average
 94 |     })
 95 |     setWatchList([...sorted]);
 96 |   }
 97 | 
 98 |     useEffect(()=>{
 99 |       let temp = watchList.map((movieObj)=>{
100 |         return genreids[movieObj.genre_ids[0]];
101 |       })
102 |       temp = new Set(temp);
103 |       setGenreList(["All Genres",...temp]);
104 |     },[watchList])
105 | 
106 |     return( 
107 |         <>
108 |         <div className="flex justify-center flex-wrap m-4">
109 |             {genreList.map((genre)=>{
110 |               return <div key={genre} onClick={()=>hanldeFilter(genre)} className={
111 |                 currGenre == genre?"hover:cursor-pointer flex justify-center items-center w-[9rem] h-[3rem] rounded-xl bg-blue-400 m-4 text-white font-bold "
112 |               :"hover:cursor-pointer flex justify-center items-center w-[9rem] h-[3rem] rounded-xl bg-gray-400/50 m-4 text-white font-bold "}>{genre}</div>
113 |             })}
114 |          </div>
115 | 
116 | 
117 |          <div className="flex justify-center my-4">
118 |             <input onChange={handleSearch} value={search} className="h-[3rem] w-[18rem]
119 |              border-none outline-none bg-gray-200
120 |              px-4 text-lg " type="text" placeholder="Search for Movies" />
121 |         </div>
122 | 
123 | 
124 |         <div className="overflow-hidden rounded-lg shadow-md border border-gray-200 m-8">
125 |             <table className="w-full text-gray-500 text-center ">
126 |                 <thead className="bg-gray-50 text-gray-900 border-b-2">
127 |                     <tr>
128 |                         <th>Name</th>
129 |                         <th className="flex">
130 |                             <div onClick={sortIncreasing} className="p-2"><i className="fa-solid fa-arrow-up"></i></div>
131 |                            <div className="p-2">Ratings</div>
132 |                            <div onClick={sortDecreasing} className="p-2"><i className="fa-solid fa-arrow-down"></i></div> 
133 |                         </th>
134 |                         <th>Popularity</th>
135 |                         <th>Genre</th>
136 |                         <th></th>
137 |                     </tr>
138 |                 </thead>
139 |                 <tbody className="text-gray-700">
140 |                 {watchList.filter((obj)=>{
141 |                   if(currGenre == "All Genres"){
142 |                     return true;
143 |                   }else{
144 |                     return genreids[obj.genre_ids[0]] == currGenre;
145 |                   }
146 |                 })
147 |                 .filter((movieObj)=>{
148 |                   return movieObj.title.toLowerCase().includes(search.toLocaleLowerCase());
149 |                 })
150 |                 .map((movieObj)=>{
151 |                     return   <tr className="border-b-2">
152 |                         <td className="flex items-center px-6 py-4">
153 |                             <img className="h-[6rem] w-[10rem]" src={`https://image.tmdb.org/t/p/original/${movieObj.poster_path}`} alt="" />
154 |                             <div className="mx-4  ">{movieObj.title}</div>
155 |                         </td>
156 |                         <td>{movieObj.vote_average}</td>
157 |                         <td>{movieObj.popularity}</td>
158 |                         <td>{genreids[movieObj.genre_ids[0]]}</td>
159 |                         <td onClick={()=>handleRemoveFromWatchList(movieObj)} className=" text-red-600">Delete</td>
160 |                     </tr>
161 |                 })}
162 |                 </tbody>
163 |             </table>
164 |         </div>
165 |         </>
166 |     )
167 | }
168 | 
169 | export default WatchList;
170 | ```
171 | 
172 | 
173 | - **Pagination.jsx**:
174 | 
175 |   - This JavaScript file defines the `Pagination` component, which is responsible for rendering pagination controls for navigating between pages of trending movies on the IMDb web application.
176 |   - The component function takes three props as arguments:
177 |     - `pageNo`: The current page number, indicating the page of trending movies being displayed.
178 |     - `handleNext`: A function to handle the next page button click event.
179 |     - `handlePrev`: A function to handle the previous page button click event.
180 |   - The component renders the following elements:
181 |     - A `div` element with a set of CSS classes to style the pagination container. It is flex-based, horizontally centered, and has a background color of gray (#808080). This container holds the pagination controls.
182 |     - Inside this container, there are three `div` elements representing the pagination controls:
183 |       1. The first `div` contains a left arrow icon, which is likely a visual cue for users to go to the previous page of trending movies. It has padding (`px-8`) for spacing and a hover effect that changes the cursor to a pointer when hovered over. The `onClick` event handler is set to `handlePrev`, indicating that clicking this element will trigger the `handlePrev` function.
184 |       2. The second `div` displays the current page number (`pageNo`). It is styled with a bold font weight for emphasis.
185 |       3. The third `div` contains a right arrow icon, which serves as a control for users to navigate to the next page of trending movies. Similar to the left arrow, it has padding, a hover effect, and an `onClick` event handler set to `handleNext`.
186 |   - The `Pagination` component provides a simple and intuitive way for users to move between pages of trending movies. It enhances the user experience by allowing them to explore a variety of movie options conveniently.
187 | 
188 | **Code**:
189 | 
190 | ```javascript=
191 | export default function Pagination({pageNo,handleNext,handlePrev}){
192 | 
193 |     return(
194 |         <div className="flex justify-center p-4 mt-8 items-center bg-gray-400">
195 |             <div onClick={handlePrev} className="px-8 hover:cursor-pointer "><i className="fa-solid fa-arrow-left"></i></div>
196 |             <div className="px-8 font-bold hover:cursor-pointer">{pageNo}</div>
197 |             <div onClick={handleNext} className="px-8 hover:cursor-pointer"><i className="fa-solid fa-arrow-right"></i></div>
198 |         </div>
199 |     )
200 | }
201 | ```
202 | 


--------------------------------------------------------------------------------
/LLD-3 (React)/React-6: IMDB Part 3 (Pagination Sorting, Searching, filtering).md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 | 
  5 | Today's agenda will primarily revolve around working on the watchlist component. However, before diving into the watchlist, we'll address a few tasks related to the movie component. In our current project, we've already implemented features like pagination and banners, showcasing various movies. Now, we're at the stage where we want to provide users with the ability to take actions, such as adding a movie to their watchlist.
  6 | 
  7 | At this moment, our watchlist is empty, so we'll focus on designing and developing this component.
  8 | 
  9 | 
 10 | 
 11 | Let's return to the code. We'd like to include an "Add to Watchlist" button for each movie card, as shown here: 
 12 | 
 13 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/495/original/Screenshot_2023-09-20_171047.png?1695210312)
 14 | > Note to instructor -  Help students understand and brainstorm this feature.
 15 | 
 16 | Now, let's navigate to the movies section and pick up from where we left off to add the watchlist functionality.
 17 | 
 18 | #### Pseudocode
 19 | 
 20 | ```javascript=
 21 | function Movies() {
 22 |     const [watchList, setWatchList] = useState([]);
 23 | }
 24 | ```
 25 | 
 26 | We will start by initializing this as an empty array. One by one, we will add the IDs of all the movies, and then we will retrieve the movies based on their IDs.
 27 | 
 28 | **[Ask the leaners]**
 29 | Now, how can we implement the process of clicking on a movie to obtain its ID and store it in the watchlist? Do you have any suggestions?
 30 | 
 31 | One approach is to use filtering based on the movie's ID. To begin, we will add a button to our movie card. Inside the card div, we will create another div to accommodate this button.
 32 | 
 33 | #### Pseudocode
 34 | 
 35 | ```jsx=
 36 | <div className="">
 37 |     😀
 38 | </div>
 39 | 
 40 | ```
 41 | This div is intended for the button. For now, we're just adding an emoji. Let's proceed to style it.
 42 | 
 43 | #### Pseudocode
 44 | 
 45 | ```jsx=
 46 | <div className="p-2 bg-gray-900 rounded-xl absolute right-2 top-2">
 47 |     😀
 48 | </div>
 49 | 
 50 | ```
 51 | If a movie has not been added to the watchlist, you should display an emoji. If it's already on the watchlist, you should display a cross sign. As of now, the watchlist is empty.
 52 | 
 53 | The purpose of adding a movie to the watchlist is that when we click on the emoji, a function should be triggered to provide us with the ID of the movie we've clicked on.
 54 | 
 55 | #### Pseudocode
 56 | 
 57 | ```javascript=
 58 | // watchList handlers
 59 | 
 60 | const addToWatchList = () => {
 61 |     const newWatchList = [...watchList, id];
 62 |     setWatchList(newWatchList);
 63 | }
 64 | 
 65 | ```
 66 | Let's explore how the spread operator functions. 
 67 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/497/original/Screenshot_2023-09-20_171534.png?1695210341)
 68 | 
 69 | > Note to instructor -  Help students understand this.
 70 | 
 71 | Now, let's shift our focus back to our div. We are simply going to invoke this.
 72 | 
 73 | **[Ask the leaners]**
 74 | What should be passed as the argument in this context?
 75 | The movie ID should be passed as the argument here.
 76 | 
 77 | #### Pseudocode
 78 | 
 79 | ```jsx=
 80 | <div className="p-2 bg-gray-900 rounded-xl absolute right-2 top-2">
 81 |     <div onClick={() => addToWatchList(movie.id)}>
 82 |         😀 
 83 |     </div>
 84 | </div>
 85 | 
 86 | ```
 87 | 
 88 | We have wrapped the addToWatchList(movie.id) function call in an arrow function to ensure it's triggered correctly when clicked. So, when you click on this emoji, it will trigger a click event that, in turn, activates the "addToWatchList" function and retrieves the specific ID of the movie.
 89 | 
 90 | > Note to instructor - Feel free to test this functionality out.
 91 | 
 92 | To demonstrate how the spread operator works, we will create a "test.js" file and write the code accordingly.
 93 | 
 94 | #### Pseudocode
 95 | 
 96 | ```javascript=
 97 | let arr = [1, 2, 3, 4, 5];
 98 | let updatedArr = [...arr, 6];
 99 | console.log(updatedArr);
100 | 
101 | ```
102 | 
103 | > Note to instructor - Feel free to test this and help students with the concept of spread operator.
104 | 
105 | Next, we will examine the functionality of a cross button for removing items from the watchlist, involving conditional code.
106 | 
107 | #### Pseudocode
108 | 
109 | ```jsx=
110 | 
111 | <div className="p-2 bg-gray-900 rounded-xl absolute right-2 top-2">
112 |     {watchList.includes(movie.id) === false ? (
113 |         <div onClick={() => addToWatchList(movie.id)}>
114 |             😀
115 |         </div>
116 |     ) : (
117 |         <div>
118 |             ❌
119 |         </div>
120 |     )}
121 | </div>
122 | 
123 | ```
124 | 
125 | If the movie ID is not present in my watchlist, then for those movies, display the "Add to Watchlist" button. Otherwise, show the "Remove from Watchlist" button.
126 | 
127 | 
128 | At a high level, here are the steps we've taken:
129 | 
130 | * Added the "Add to Watchlist" button.
131 | * When clicked, the ID of that movie is added to the watchlist array.
132 | * Created the onClick event and the addToWatchList function.
133 | * Now, we also need a feature to remove movies from the watchlist.
134 | * To achieve this, we will create the removeFromWatchList function, which will filter out the specified ID from the watchlist.
135 | 
136 | 
137 | Now, we can proceed to create the "Remove from Watchlist" function.
138 | 
139 | #### Pseudocode
140 | 
141 | ```javascript=
142 | // watchList handlers
143 | 
144 | const addToWatchList = (id) => {
145 |     const newWatchList = [...watchList, id];
146 |     setWatchList(newWatchList);
147 | }
148 | 
149 | const removeFromWatchList = (id) => {
150 |     const filteredWatchList = watchList.filter((watchListId) => {
151 |         return watchListId !== id;
152 |     });
153 |     setWatchList(filteredWatchList);
154 | }
155 | 
156 | ```
157 | > Note to instructor - Feel free to test this.
158 | 
159 | 
160 | > Note to instructor - Feel free to wait and address any questions that students might have. 
161 | 
162 | Now, let's write the code that allows us to remove a movie from our watchlist when we click on the cross button.
163 | 
164 | 
165 | #### Pseudocode
166 | 
167 | ```jsx=
168 | <div className="p-2 bg-gray-900 rounded-xl absolute right-2 top-2">
169 |     {watchList.includes(movie.id) === false ? (
170 |         <div onClick={() => addToWatchList(movie.id)}>
171 |             😀
172 |         </div>
173 |     ) : (
174 |         <div onClick={() => removeFromWatchList(movie.id)}>
175 |             ❌
176 |         </div>
177 |     )}
178 | </div>
179 | 
180 | ```
181 | > Note to instructor - Feel free to test this.
182 | 
183 | 
184 | 
185 | > Note to instructor - Feel free to wait and address any questions that students might have. 
186 | 
187 | **[Ask the leaners]**
188 | 
189 | We don't want these buttons to be shown by default and would like them to appear only when we hover over the movie cards. Do you have any suggestions for this?
190 | 
191 | -> In React, everything is controlled by the state. So, we can create a state to manage the visibility of these buttons.
192 | 
193 | #### Pseudocode
194 | 
195 | ```javascript=
196 | function Movies() {
197 |     const [hovered, setHovered] = useState('');
198 | }
199 | ```
200 | 
201 | Now, we will create two functions:
202 | 
203 | 
204 | #### Pseudocode
205 | 
206 | ```javascript=
207 | const showButton = (id) => {
208 |     setHovered(id);
209 | }
210 | 
211 | const hideButton = (id) => {
212 |     setHovered('');
213 | }
214 | 
215 | ```
216 | 
217 | We can create an additional div element for hovering over a movie.
218 | 
219 | #### Pseudocode
220 | 
221 | ```jsx=
222 | <div
223 |     onMouseEnter={() => showButton(movie.id)}
224 |     onMouseLeave={() => hideButton()}
225 | >
226 | </div>
227 | ```
228 | 
229 | Now, we'll apply CSS to show this element only when the movie ID matches.
230 | 
231 | #### Pseudocode
232 | ```jsx=
233 | <div className="p-2 bg-gray-900 rounded-xl absolute right-2 top-2" style={{ display: hovered === movie.id ? 'block' : 'none' }}>
234 |     {watchList.includes(movie.id) === false ? (
235 |         <div onClick={() => addToWatchList(movie.id)}>
236 |             😀
237 |         </div>
238 |     ) : (
239 |         <div onClick={() => removeFromWatchList(movie.id)}>
240 |             ❌
241 |         </div>
242 |     )}
243 | </div>
244 | ```
245 | 
246 | > Note to instructor - Wait for 5-10 minutes for the break
247 | 
248 | 
249 | 
250 | Now, let's proceed to the Watchlist component. Let's start by defining its visual design.
251 | 
252 | > Note to instructor -  Help students understand and brainstorm this.
253 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/498/original/Screenshot_2023-09-20_171609.png?1695210376)
254 | 
255 | 
256 | 
257 | #### Pseudocode
258 | 
259 | ```jsx=
260 | function WatchList() {
261 |     let movies = {
262 |         // some movie details here 
263 |     }
264 |     
265 |     return (
266 |         <div className="overflow-hidden rounded-lg border border-gray-200 shadow-md m-5">
267 |             <table className="w-full border-collapse bg-white text-left text-sm text-gray-500">
268 |                 <thead>  
269 |                     <tr className="bg-gray-50">
270 |                         <th className="px-6 py-4 font-medium text-gray-900">Name</th> 
271 |                         <th>
272 |                             <div className="flex">
273 |                                 <div>Ratings</div>
274 |                             </div>
275 |                         </th>
276 |                         <th>
277 |                             <div className="flex">
278 |                                 <div>Popularity</div>
279 |                             </div>
280 |                         </th>
281 |                         <th>
282 |                             <div className="flex">
283 |                                 <div>Genre</div>
284 |                             </div>
285 |                         </th>
286 |                     </tr>
287 |                 </thead>
288 |                 <tbody className="divide-y divide-gray-100 border-t border-gray-100">  
289 |                     <tr className="hover:bg-gray-50">
290 |                         <td className="flex items-center px-6 py-4 font-normal text-gray-900">
291 |                             <img className="h-[6rem] w-[10rem] object-fit" src="" alt="" />
292 |                             <div className="font-medium text-gray-700 text-sm">Star Wars</div>
293 |                         </td>
294 |                         <td className="pl-6 py-4">
295 |                             7.8
296 |                         </td>
297 |                         <td className="pl-6 py-4">
298 |                             7.8
299 |                         </td>
300 |                         <td className="pl-2 py-4">
301 |                             Action
302 |                         </td>
303 |                     </tr>
304 |                 </tbody>
305 |             </table>
306 |         </div>
307 |     );
308 | }
309 | 
310 | export default WatchList;
311 | 
312 | ```
313 | 
314 | > Note to instructor - Please feel free to test if everything is functioning correctly up to this point.
315 | 
316 | Now, we'd like to incorporate this data. Inside the table body, We will utilize the movies array:
317 | 
318 | #### Pseudocode
319 | 
320 | ```jsx=
321 | function WatchList() {
322 |     let movies = [
323 |         // Some movie details here
324 |     ];
325 | 
326 |     return (
327 |         <div className="overflow-hidden rounded-lg border border-gray-200 shadow-md m-5">
328 |             <table className="w-full border-collapse bg-white text-left text-sm text-gray-500">
329 |                 <thead>  
330 |                     <tr className="bg-gray-50">
331 |                         <th className="px-6 py-4 font-medium text-gray-900">Name</th> 
332 |                         <th>
333 |                             <div className="flex">
334 |                                 <div>Ratings</div>
335 |                             </div>
336 |                         </th>
337 |                         <th>
338 |                             <div className="flex">
339 |                                 <div>Popularity</div>
340 |                             </div>
341 |                         </th>
342 |                         <th>
343 |                             <div className="flex">
344 |                                 <div>Genre</div>
345 |                             </div>
346 |                         </th>
347 |                     </tr>
348 |                 </thead>
349 |                 <tbody className="divide-y divide-gray-100 border-t border-gray-100">  
350 |                     {movies.map((movie) => (
351 |                         <tr className="hover:bg-gray-50" key={movie.id}>
352 |                             <td className="flex items-center px-6 py-4 font-normal text-gray-900">
353 |                                 <img className="h-[6rem] w-[10rem] object-fit" src="" alt="" />
354 |                                 <div className="font-medium text-gray-700 text-sm">{movie.title}</div>
355 |                             </td>
356 |                             <td className="pl-6 py-4">
357 |                                 {movie.vote_average}
358 |                             </td>
359 |                             <td className="pl-6 py-4">
360 |                                 {movie.popularity}
361 |                             </td>
362 |                             <td className="pl-2 py-4">
363 |                                 Action
364 |                             </td>
365 |                         </tr>
366 |                     ))}
367 |                 </tbody>
368 |             </table>
369 |         </div>
370 |     );
371 | }
372 | 
373 | export default WatchList;
374 | 
375 | ```
376 | 
377 |  
378 | > Note to instructor - Input some data into the movies array and replace all the hardcoded data. Afterward, test this component to ensure it functions correctly.
379 |     
380 |     
381 | * Now, the WatchList component displays a list of movies.
382 | * It uses the movie array to populate the movie details.
383 | * Each movie is displayed within a table row (<tr>).
384 | * Movie data such as title, vote average, and popularity are shown in respective columns.
385 | * The code also includes styling classes for proper formatting and spacing.
386 | 
387 | 


--------------------------------------------------------------------------------
/LLD-4 (MERN)/FullStack-3: Intro to MongoDB and Mongoose.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ### Introduction
  3 | Representational State Transfer (REST) constitutes an architectural paradigm that prescribes a set of guidelines for the construction of web services. A RESTful API provides a straightforward and adaptable means to interact with web services, devoid of any intricate processing requirements.
  4 | 
  5 | ### Working
  6 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/541/original/Screenshot_2023-09-20_184131.png?1695215654)
  7 | 
  8 | A client communicates with a server by issuing an HTTP request using a web URL, which can take the form of HTTP GET, POST, PUT, or DELETE requests. In return, the server provides a response in the form of a resource, which can take various formats such as HTML, XML, images, or JSON. Currently, JSON is the prevalent and widely used format in the realm of Web Services. 
  9 | 
 10 | #### Code
 11 | ```javascript!
 12 | const express = require('express')
 13 | const fs = require('fs')
 14 | const data = fs.readFileSync('data.json')
 15 | console.log('This is JSON data -> ' + data)
 16 | const app = express()
 17 | app.listen(8080, ()=>{
 18 |     console.log('server started')
 19 | })
 20 | ```
 21 | 
 22 | ### Introduction
 23 | In HTTP there are five methods that are commonly used in a REST-based Architecture:
 24 | 
 25 | * GET
 26 | * POST 
 27 | * PUT
 28 | * PATCH
 29 | * DELETE
 30 | 
 31 | We'll revisit these later in this script. 
 32 | 
 33 | **Code:**
 34 | ```javascript!
 35 | const express = require('express')
 36 | const app = express()
 37 | const fs = require('fs')
 38 | const data = JSON.parse(fs.readFileSync('data.json', "utf-8"))
 39 | const products = data.products
 40 | app.use(express.json())
 41 | 
 42 | console.log('This is JSON data -> ' + data)
 43 | //HTTP methods
 44 | 
 45 | app.get('/products', (req, res)=>{
 46 |     res.send(products)
 47 | })
 48 | //we can pass something in id, find that id in json and find it's properties
 49 | //get
 50 | 
 51 | 
 52 | app.listen(8080, ()=>{
 53 |     console.log('server started')
 54 | })
 55 | ```
 56 | 
 57 | **Explanation:**
 58 | 
 59 | ### GET() method
 60 | `GET()` is used to request data from a specified resource, such as a web page, an API endpoint, or any other resource accessible via a URL. It is primarily used for read-only operations, where we want to retrieve information without modifying the resource.
 61 | 
 62 | When a `GET()` request is made, it fetches data from the server without causing any changes to the resource. The data is then returned in the response, and the resource then remains unchanged on the server.
 63 | 
 64 | **Code:**
 65 | ```javascript!
 66 | const express = require('express')
 67 | const app = express()
 68 | const fs = require('fs')
 69 | const data = JSON.parse(fs.readFileSync('data.json', "utf-8"))
 70 | const products = data.products
 71 | app.use(express.json())
 72 | 
 73 | console.log('This is JSON data -> ' + data)
 74 | //HTTP methods
 75 | 
 76 | app.get('/products', (req, res)=>{
 77 |     res.send(products)
 78 | })
 79 | app.get('/products/:id', (req, res) =>{
 80 |     const id = req.params.id
 81 |     console.log(id)
 82 |     const product = products.find(p=>p.id === id)
 83 |     console.log(product)
 84 | })
 85 | //we can pass something in id, find that id in json and find it's properties
 86 | //get
 87 | 
 88 | 
 89 | app.listen(8080, ()=>{
 90 |     console.log('server started')
 91 | })
 92 | ```
 93 | 
 94 | **Output** 
 95 | ```
 96 | undefined
 97 | ```
 98 | **Explanation:**
 99 | **Now why did we get output as undefined?** 
100 | 
101 | Whenever you pass some thing to your id it comes in string format as opposed to when to pass it as `console.log(2)` it goes as arugment in number format 
102 | 
103 | Let's rectify this and see how it works
104 | 
105 | **Rectified Code:**
106 | ```javascript!
107 | const express = require('express')
108 | const app = express()
109 | const fs = require('fs')
110 | const data = JSON.parse(fs.readFileSync('data.json', "utf-8"))
111 | const products = data.products
112 | app.use(express.json())
113 | 
114 | console.log('This is JSON data -> ' + data)
115 | //HTTP methods
116 | 
117 | app.get('/products', (req, res)=>{
118 |     res.send(products)
119 | })
120 | app.get('/products/:id', (req, res) =>{
121 |     const id = Number(req.params.id)
122 |     console.log(id)
123 |     const product = products.find(p=>p.id === id)
124 |     console.log(product)
125 | })
126 | //we can pass something in id, find that id in json and find it's properties
127 | //get
128 | 
129 | 
130 | app.listen(8080, ()=>{
131 |     console.log('server started')
132 | })
133 | 
134 | ```
135 | 
136 | **Output** 
137 | ```
138 | Server Started
139 | 2
140 | {
141 |   id: 2,
142 |   title: 'iPhoneX',
143 |   Description: 'Sim Free Model A1981'
144 |   price: 899,
145 |   discount Percentage: 17.94
146 |   rating: 4.44,
147 |   stocks: 34,
148 |   brand: 'Apple',
149 |   category: 'smartphones',
150 |   ...
151 | }
152 | ```
153 | 
154 | 
155 | **Note:** 
156 | If you want to structure the output in JSON format then instead of `console.log(product)` you can do `res.json(product)`
157 | 
158 | ### POST() method
159 | `POST()` method is used to submit data to a specified resource, often to create a new resource on the server or to trigger a specific action that involves data submission.
160 | 
161 | When a `POST()` request is made, the data us sent to the server, and the server processes this data according to the resource's endpoint or the API's defined behavior. A new resource is created, if it already exists it updates it or triggers some other action. 
162 | 
163 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/543/original/Screenshot_2023-09-20_184458.png?1695215705)
164 | 
165 | **Code:**
166 | ```javascript!
167 | ..same code
168 | 
169 | //post method
170 | app.post('/products', (req, res)=>{
171 |     console.log(req.body)
172 |     products.push(req.body)
173 |     res.status(201).json(req.body)
174 | })
175 | 
176 | ```
177 | 
178 | ### PUT() method
179 | The `PUT()` method is an HTTP request method used to update a resource or create a new resource at a specific URI (Uniform Resource Identifier)
180 | 
181 | **Code:**
182 | ```javascript!
183 | app.put('/products/:id', (req, res)=>{
184 |     const id = Number(req.params.id)
185 |     const productIndex = products.findIndex(p=>p.id===id)
186 |     products.splice(productIndex, 1, {...req.body, id:id})
187 |     res.status(201).json()
188 | })
189 | 
190 | //talk about splice in terms of array while explaining
191 | 
192 | ```
193 | 
194 | ### PATCH() method
195 | `PATCH()` is used to request partial modifications or updates to an existing resource.
196 | 
197 | When a `PATCH()` request is made, it typically sends a patch document or set of instructions to the server, indicating how the resource should be modified. The server processes these instructions and applies the specified changes to the resource
198 | 
199 | **Code:**
200 | ```javascript!
201 | app.patch('/products/:id', (req, res)=>{
202 |     const id = Number(req.params.id)
203 |     const productIndex = products.findIndex(p=>p.id===id)
204 |     const product = products(productIndex)
205 |     products.splice(productIndex, 1, {...product, ...req.body})
206 |     res.status(201).json()
207 | })
208 | ```
209 | 
210 | ### DELETE() Method
211 | `DELETE()` is used to request the removal or deletion of a resource located at a specific URI.
212 | 
213 | When a DELETE() request is made, it instructs the server to delete the resource identified by the URI. After a successful DELETE() operation, the resource no longer exists at that URI.
214 | 
215 | **Code:**
216 | ```javascript!
217 | app.delete('/products/:id', (req, res)=>{
218 |     const id = Number(req.params.id)
219 |     const productIndex = products.findIndex(p=>p.id===id)
220 |     const product = products(productIndex)
221 |     products.splice(productIndex, 1)
222 |     res.status(201).json(product)
223 | })
224 | ```
225 | 
226 | ### Introduction to MongoDB
227 | MongoDB, an open-source document-oriented database, is purpose-built for efficiently handling extensive datasets. It falls within the NoSQL (Not only SQL) database category due to its departure from the conventional table-based storage and retrieval of data.
228 | 
229 | ### MongoDB Architecture
230 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/544/original/Screenshot_2023-09-20_184157.png?1695215721)
231 | 
232 | Now we know that MongoDB serves as a database server where data is stored. In other words, MongoDB provides an environment where you can initiate a server and subsequently create multiple databases within it.
233 | 
234 | Data in MongoDB is organized into collections and documents. This establishes a hierarchical relationship between databases, collections, and documents, which can be explained as follows:
235 | 
236 | **NOTE:** MongoDB's server supports the concurrent operation of multiple databases.
237 | #### Analogy
238 | Let's understand the MongoDB architecture with the help of an analogy
239 | 
240 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/545/original/Screenshot_2023-09-20_184204.png?1695215735)
241 | 
242 | Let's consider a Mongoose application connected to a database called "Scaler." Within this database, there are three collection (courses, instructors, and students), and each collection corresponds to a multiple documents each representing data stored in diverse formats.
243 | 
244 | #### Install MongoDB on your system
245 | You can install MongoDB on your system by typing the following command in your command terminal
246 | ```
247 | npm install mongodb 
248 | ```
249 | 
250 | #### Adaptability of MongoDB
251 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/049/546/original/Screenshot_2023-09-20_184211.png?1695215762)
252 | 
253 | Mongoose is specifically designed for Node.js, and so it's a natural choice for developers working with JavaScript on the server-side. This compatibility ensures seamless integration with Node.js applications.
254 | #### Connect to MongoDB
255 | 
256 | **Code:**
257 | ```javascript!
258 | const mongoose = require('mongoose')
259 | const DB = "API"
260 | mongoose.connect(DB, {
261 |     useNewUrlParser : true,
262 |     useUnifiedTopology : true,
263 | }).then(()=>{
264 |   console.log('connection sucessful')  
265 | }).catch((err)=>{
266 |   console.log(error)  
267 | })
268 | ```
269 | 
270 | Run your file with:
271 | ```
272 | npx nodemon test.js
273 | ```
274 | 
275 | **Explanation:**
276 | Once Mongoose library is imported, a constant variable `DB` is defined with the value of API which represents the name or URL of the MongoDB database we want to connect to
277 | 
278 | A connection is then initiated with the MongoDB database using the `mongoose.connect` method and options object is passed with the  `useNewUrlParser` (enables the use of the new URL parser for MongoDB) and `useUnifiedTopology` (enables the use of the new Server Discovery and Monitoring engine in MongoDB) options set to `true`. These options configures the connection.
279 | 
280 | Once the connection is successful, a message is then logged on the console. If however an error is encountered during the connection to database process the error message is logged onto the console
281 | 
282 | In this way this code sets up a connection to a MongoDB database named "API" using Mongoose
283 | 
284 | 
285 | 


--------------------------------------------------------------------------------
/LLD-4 (MERN)/FullStack-4: MVC Architecture and CRUD.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | ## Today's Content
  4 | - MVC Architecture
  5 | - CRUD operation using MongoDB and Mongoose
  6 | 
  7 | 
  8 | # MVC Architecture Overview
  9 | 
 10 | Imagine we're using the following analogy to explain the MVC architecture:
 11 | 
 12 | "A customer (view) is ordering a pizza, so he makes a request to the waiter (controller). The waiter takes the request and goes to the chef (model) in the kitchen and fetches the items from the kitchen (database) to make the pizza. Once it's ready, the chef serves the pizza back to the waiter, who then serves it to the customer."
 13 | 
 14 | Now, let's break down the MVC architecture within this analogy.
 15 | 
 16 | 
 17 | **Model:**
 18 | - Represents the data and logic of the application.
 19 | - In the pizza example, the chef in the kitchen is the model.
 20 | - Manages and fetches data (ingredients) and performs operations (cooking) on it.
 21 | - The model is unaware of the user interface.
 22 | 
 23 | **View:**
 24 | - Represents the user interface or what the user interacts with.
 25 | - In the pizza example, the customer is the view.
 26 | - Displays information (menu options) to the user and captures user input (order).
 27 | - Passes user input to the controller.
 28 | 
 29 | **Controller:**
 30 | - Acts as an intermediary between the model and the view.
 31 | - In the pizza example, the waiter is the controller.
 32 | - Receives and processes user requests (orders) from the view.
 33 | - Interacts with the model (chef) to fetch data (ingredients) and perform actions (cooking).
 34 | - Sends updates back to the view to display the result (serving the pizza).
 35 | 
 36 | 
 37 | **The following image gives an idea about MVC architecture**:
 38 | 
 39 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/052/060/original/upload_24f17def1d1ac7e73c3a74069cf7b9f8.png?1696316119)
 40 | 
 41 | 
 42 | In essence, MVC separates the application into three distinct components, making it easier to manage and maintain. The view handles the presentation and user interaction, the model manages the data and logic, and the controller orchestrates the communication between the view and the model. This separation of concerns enhances code organization and promotes scalability and maintainability in software development.
 43 | 
 44 | 
 45 | # Question
 46 | What is the primary responsibility of the Model component in the MVC architecture?
 47 | 
 48 | # Choices
 49 | - [ ] Handles user interface interactions.
 50 | - [ ] Manages routing and URL handling.
 51 | - [x] Represents the data and logic of the application.
 52 | - [ ] Interacts with the user and captures input.
 53 | 
 54 | 
 55 | 
 56 | 
 57 | 
 58 | # Benifits of MVC architecture
 59 | 
 60 | 
 61 | - **Separation of Concerns:**
 62 |   - Divides the application into Model, View, and Controller for clear separation of responsibilities.
 63 | - **Modular Development:**
 64 |   - Supports development and maintenance of separate, reusable modules for each component.
 65 | - **Improved Code Reusability:**
 66 |   - Allows reuse of Models, Views, and Controllers in different parts of the application or other projects.
 67 | - **Enhanced Maintainability:**
 68 |   - Changes in one component have minimal impact on the others, simplifying maintenance and debugging.
 69 | - **Scalability:**
 70 |   - Facilitates parallel development and the addition of new features without major rework.
 71 | - **User Interface Flexibility:**
 72 |   - Adapts to various user interfaces while keeping the core logic intact.
 73 | - **Efficient Testing and Debugging:**
 74 |   - Enables isolated unit testing for each component, easing issue identification and resolution.
 75 | - **Parallel Development:**
 76 |   - Supports multiple developers or teams working on different components simultaneously.
 77 | - **Support for Multiple Views:**
 78 |   - Utilizes the same Model and Controller with multiple Views for diverse user interfaces.
 79 | - **Long-Term Maintainability:**
 80 |   - Promotes organized and understandable code, reducing technical debt over time.
 81 | 
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | # Question
 88 | Which of the following is NOT a benefit of using the MVC architecture in software development?
 89 | 
 90 | # Choices
 91 | - [ ] Enhanced Maintainability
 92 | - [ ] Efficient Testing and Debugging
 93 | - [ ] Improved Code Reusability
 94 | - [x] Tight Coupling between Components
 95 | 
 96 | 
 97 | 
 98 | # Mvc Implementation in Project 
 99 | 
100 | 
101 | ### index.js Usage
102 | 
103 | - **Responsibility**: The `index.js` file serves as the entry point of your application, handling server setup and routing initialization.
104 | - **Server Setup**: It initializes an Express server using the `express` library.
105 | - **Routing Configuration**: The `productRouter` is imported from `productRoutes.js` and configured to handle incoming requests.
106 | - **Middleware**: Express middleware, such as `express.json()`, is applied to handle JSON request bodies.
107 | - **Server Start**: The server is started on port 8080, listening for incoming requests.
108 | 
109 | ```javascript
110 | // index.js
111 | 
112 | const express = require('express')
113 | const app = express()
114 | 
115 | // Import the productRouter for handling routes
116 | const productRouter = require('./routes/productsRoutes')
117 | 
118 | // Use the productRouter middleware to handle routes
119 | app.use('/', productRouter.router)
120 | 
121 | // Apply middleware to handle JSON request bodies
122 | app.use(express.json())
123 | 
124 | // Start the server, listening on port 8080
125 | app.listen(8080, () => {
126 |     console.log('Server Started')
127 | })
128 | ```
129 | 
130 | **In this section of code**:
131 | 
132 | - `express` is used to create and configure the server.
133 | - The `productRouter` is used to define and manage the routes, connecting them to the Controller component.
134 | - Express middleware is applied, such as `express.json()`, which parses incoming JSON request bodies.
135 | - The server is started and listens on port 8080, making your application accessible to clients.
136 | 
137 | This file essentially serves as the glue that ties together the MVC components, initializing the server, configuring routes, and ensuring proper request handling and response generation.
138 | 
139 | 
140 | ### Model Implementation
141 | 
142 | - **Responsibility**:<br> Manages data, performs database interactions, and defines data structure.
143 | - **Data Definition**:<br> The Model defines the structure of core entities (courses) in your application.
144 | - **Database Interaction**:<br> It handles database connections and operations using Mongoose.
145 | - **Entity Schema**:<br> The model includes a schema definition for the 'Course' entity, specifying fields like name, creator, published date, isPublished, and rating.
146 | - **Entity Model**:<br> The 'Course' model is created using Mongoose to represent the data structure.
147 | 
148 | **Code**:
149 | 
150 | ```javascript
151 | // myDb.js
152 | // ... (previous code)
153 | 
154 | // Schema definition for the 'Course' model
155 | const courseSchema = new mongoose.Schema({
156 |     name: String,
157 |     creator: String,
158 |     publishedDate: { type: Date, default: Date.now },
159 |     isPublished: Boolean,
160 |     rating: Number
161 | })
162 | 
163 | // Model creation for the 'Course' entity
164 | const Course = mongoose.model('Course', courseSchema)
165 | 
166 | // Functions for creating and interacting with 'Course' documents
167 | // (createCourse, getCourse, updateCourse, deleteCourse)
168 | ```
169 | 
170 | 
171 | #### Code Explanation:
172 | 
173 | - `mongoose.connect(DB, { useNewUrlParser: true, useUnifiedTopology: true })`: Establishes a connection to the database using the provided MongoDB connection string.
174 | - `courseSchema`: Defines the structure of the 'Course' entity with its fields and data types.
175 | - `Course = mongoose.model('Course', courseSchema)`: Creates a model named 'Course' based on the defined schema, allowing you to interact with the database using this model.
176 | - Functions like `createCourse`, `getCourse`, `updateCourse`, and `deleteCourse` are used for various operations on 'Course' documents in the database.
177 | 
178 | ### Controller Implementation
179 | 
180 | - **Responsibility**:<br> Acts as an intermediary between the Model and the View (routes), handling incoming requests and preparing responses.
181 | - **Data Processing**:<br> Controller functions process various actions such as retrieving data, creating, updating, and deleting data.
182 | - **Data Interaction**:<br> These functions interact with the Model to perform data operations.
183 | - **Business Logic**:<br> The Controller contains business logic for processing and validating data.
184 | - **Response Preparation**:<br> It prepares and sends responses back to the View (routes) based on the request handling.
185 | 
186 | **Code**:
187 | 
188 | ```javascript
189 | // productControllers.js
190 | 
191 | const fs = require('fs')
192 | 
193 | // Data retrieval from JSON file
194 | const data = JSON.parse(fs.readFileSync('data.json', "utf-8"))
195 | const products = data.products
196 | 
197 | // Controller functions for handling different actions
198 | // (getAllProducts, getProduct, createProduct, replaceProduct, updateProduct, deleteProduct)
199 | ```
200 | 
201 | #### Code Explanation:
202 | 
203 | - The Controller functions, such as `getAllProducts`, `getProduct`, `createProduct`, etc., are responsible for handling specific HTTP requests related to products.
204 | - These functions perform data processing, including reading from a JSON file and manipulating product data.
205 | - Business logic, such as finding products by ID or updating product information, is contained within these functions.
206 | - Responses are prepared and sent back to the View (routes) with appropriate HTTP status codes and data.
207 | 
208 | 
209 | # Question
210 | In a typical MVC implementation, what is the role of the Controller component?
211 | 
212 | # Choices
213 | - [ ] Manages the data and logic of the application.
214 | - [ ] Represents the user interface and displays information.
215 | - [ ] Handles routing and URL configuration.
216 | - [x] Acts as an intermediary between the Model and the View, processing requests and preparing responses.
217 | 
218 | 
219 | 
220 | 
221 | ### View (Routes) Implementation
222 | 
223 | - **Responsibility**:<br> In this project, the View component is represented by routes, which define endpoints for user interactions.
224 | - **Request Handling**:<br> Routes receive incoming HTTP requests from users.
225 | - **Controller Interaction**:<br> They invoke Controller functions to process requests and provide data.
226 | - **Response Generation**:<br> Based on the Controller's response, routes generate and send appropriate HTTP responses.
227 | - **User Interaction**:<br> Routes facilitate user interactions with the application through defined endpoints.
228 | 
229 | **Code**:
230 | 
231 | ```javascript
232 | // productRoutes.js
233 | 
234 | const express = require('express')
235 | const productController = require('../controllers/productControllers')
236 | 
237 | const router = express.Router()
238 | 
239 | // Routes for different user interactions
240 | router.get('/products', productController.getAllProducts)
241 | router.get('/products/:id', productController.getProduct)
242 | router.post('/products', productController.createProduct)
243 | router.put('/products/:id', productController.replaceProduct)
244 | router.patch('/products/:id', productController.updateProduct)
245 | router.delete('/products/:id', productController.deleteProduct)
246 | ```
247 | 
248 | #### Code Explanation:
249 | 
250 | - Express routes, defined in `productRoutes.js`, specify various endpoints for user interactions related to products.
251 | - These routes handle HTTP requests, such as GET, POST, PUT, PATCH, and DELETE, for product-related actions.
252 | - The routes interact with the Controller component by invoking the corresponding Controller functions, passing request data as needed.
253 | - Responses generated by the Controller are returned to the client through these routes.
254 | 
255 | In summary, this project demonstrates the separation of concerns through the Model-View-Controller pattern, with distinct roles for the Model (data management), Controller (business logic), and View (routes for user interaction). The bullet-pointed code explanations provide a detailed breakdown of each component's responsibilities and how they interact within your application.
256 | 


--------------------------------------------------------------------------------
/LLD-4 (MERN)/FullStack-7: Project Part 3- (Implementing Theatre API).md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | ## Protected Route
  4 | A protected route is a route that is not available publicly
  5 | 
  6 | **So how to access it?** 
  7 | 
  8 | It can only be accessed after passing ones credentials only after which can one see the actual route. 
  9 | 
 10 | 
 11 | ## Token
 12 | **JWT (JSON Web):** Whenever a person logs in, a JWT token is generated which is totally unique and this token is then saved to a local storage of browser user is using. 
 13 | 
 14 | ### How does it work?
 15 | If the token is already present in the browser local storage system knows that user is logged in. 
 16 | 
 17 | ```javascript
 18 | const token = jwt.sign({userID: user_id}, process.env.jwt_secret, {expires})
 19 | ```
 20 | ### Properties Used: 
 21 | 
 22 | Our objective is to retrieve the userID of the currently signed-in user. Following are the steps: 
 23 | 
 24 | * We obtain the userID from the database where user information is stored. 
 25 | * For this specific user, a JSON web token is generated.
 26 | * To achieve this, we utilize a **jwt_secret**, which is essentially a unique value responsible for generating these web tokens.
 27 | * Additionally, we employ a property that defines the token's lifespan, ensuring that after a user logs in, they will have access for only one day. 
 28 | * Subsequently, once the token expires, the user will need to log in again. 
 29 | 
 30 | ```javascript
 31 | console.log(token)
 32 | 
 33 | res.send({
 34 |     sucess: true,
 35 |     message: "User logged in",
 36 |     data: token
 37 | })
 38 | ```
 39 | 
 40 | 
 41 | ## Implementation of a protected route?
 42 | Once the token is generated and sent to the database which will then be used to implement a protected route only after which will a user be able to access the content of a particular route
 43 | 
 44 | ```javascript
 45 | router.get('/get-current-user', authMiddleware, async (req, res) => {
 46 |     try{
 47 |         const user = await User.findById(req.body.userId).select('')
 48 |         res.send({
 49 |             sucess: true,
 50 |             message: "User details fetched successfully"
 51 |             data: user
 52 |         })
 53 |     }
 54 |     catch(error){
 55 |         res.send({
 56 |            success: false,
 57 |             message: error.message,
 58 |         });
 59 |     }
 60 | })
 61 | 
 62 | ```
 63 | 
 64 | Here `/get-current-user` is a protected route, 
 65 | `authMiddleware` checks if the user is authorized to acess this route by checking if the user is authenticated or not. 
 66 | 
 67 | Only if the token is present in the database (generated prior by jwt_secret) only then we will allow the user to access the contents. 
 68 | 
 69 | ```javascript
 70 | module.exports = function(req, res, next){
 71 |     try{
 72 |         const token = req.headers.authorization.split('')[1]
 73 |         const decoded = jwt.verify(token, process.env.jwt_secret)
 74 |         req.body.userId = decoded.userId
 75 |         next()
 76 |     }
 77 |     catch(error){
 78 |         res.status(401).send({success: false, message: "Invalid"})
 79 |     }
 80 | }
 81 | ```
 82 | 
 83 | If a token is available, we first decode the user ID and then proceed to the next step.
 84 | 
 85 | Returning to our earlier code, we retrieve the userID and omit the password as it is unnecessary. Once we locate the user, we display a message indicating that they may proceed.
 86 | 
 87 | 
 88 | ## Front-end
 89 | Now that the backend part is done we need to move onto the front end part of this
 90 | 
 91 | Let's see checks needed for login function
 92 | 
 93 | ```javascript
 94 | import React from 'react'
 95 | 
 96 | const ProtectedRoute = ({childern}) => {
 97 |     return {
 98 |         <div></div>
 99 |     }
100 | }
101 | export default ProtectedRoute
102 | ```
103 | Here,
104 | **childern (home page):** a component that I want to make it protected
105 | 
106 | ### Redux
107 | As we move further manging a state is diffcult which is why we'll be using redux
108 | 
109 | ```javascript
110 | npm install @reduxjs/toolkit
111 | npm install react-redux
112 | ```
113 | 
114 | We're using redux here to basically use a loader whenever a user logs in
115 | 
116 | Three files can be created as following
117 | ```javascript
118 | /redux
119 | - loaderSlice.js
120 | - store.js
121 | - userSlice.js
122 | 
123 | ```
124 | **userSlice.js**
125 | ```javascript!
126 | import {createSlice} from '@reduxjs/toolkit';
127 | 
128 | const loadersSlice = createSlice({
129 |     name: "loaders",
130 |     initialState: {
131 |         loading: false,
132 |     },
133 |     reducers: {
134 |         ShowLoading : (state) => {
135 |             state.loading = true;
136 |         },
137 |         HideLoading : (state) => {
138 |             state.loading = false;
139 |         }
140 |     }
141 | });
142 | export const {ShowLoading, HideLoading} = loaderSlice.actions;
143 | export default loadersSlice.reducer;
144 | ```
145 | 
146 | **Store.js**
147 | ```javascript
148 | import { configureStore } from "@reduxjs/toolkit";
149 | import loadersReducer from "./loadersSlice";
150 | import usersReducer from "./usersSlice";
151 | 
152 | const store = configureStore({
153 |   reducer: {
154 |     loaders: loadersReducer,
155 |     users: usersReducer,
156 |   },
157 | });
158 | 
159 | export default store;
160 | ```
161 | 
162 | **loaderSlice.js**
163 | 
164 | ```javascript
165 | import {createSlice} from '@reduxjs/toolkit';
166 | 
167 | const loadersSlice = createSlice({
168 |     name: 'loaders',
169 |     initialState: {
170 |         loading : false,
171 |     },
172 |     reducers: {
173 |         ShowLoading : (state) => {
174 |             state.loading = true;
175 |         },
176 |         HideLoading : (state) => {
177 |             state.loading = false;
178 |         }
179 |     }
180 | });
181 | 
182 | export const {ShowLoading, HideLoading} = loadersSlice.actions;
183 | export default loadersSlice.reducer;
184 | ```
185 | 
186 | Our second step would be to show details if the existing user tries to login again, so the question here is how to get the details of a particular user
187 | 
188 | We can get user data from the following 
189 | ```javascript
190 | const { user } = useSelector{(state) => state.users}
191 | ```
192 | 
193 | Thus our final `protectedroute.js` is:
194 | 
195 | ```javascript
196 | import { message } from "antd";
197 | import React, { useEffect} from "react";
198 | import { GetCurrentUser } from "../apicalls/users";
199 | import { useNavigate } from "react-router-dom";
200 | import { useDispatch, useSelector } from "react-redux";
201 | import { SetUser } from "../redux/usersSlice";
202 | import { HideLoading, ShowLoading } from "../redux/loadersSlice";
203 | 
204 | function ProtectedRoute({ children }) {
205 |   const { user } = useSelector((state) => state.users);
206 |   const navigate = useNavigate();
207 |   const dispatch = useDispatch();
208 | 
209 |   const getpresentUser = async () => {
210 |     try {
211 |       dispatch(ShowLoading());
212 |       const response = await GetCurrentUser();
213 |       dispatch(HideLoading());
214 |       if (response.success) {
215 |         dispatch(SetUser(response.data));
216 |       } else {
217 |         dispatch(SetUser(null));
218 |         message.error(response.message);
219 |         localStorage.removeItem("token");
220 |         navigate("/login");
221 |       }
222 |     } catch (error) {
223 |       dispatch(HideLoading());
224 |       dispatch(SetUser(null));
225 |       message.error(error.message);
226 |     }
227 |   };
228 | 
229 |   useEffect(() => {
230 |     if (localStorage.getItem("token")) {
231 |       getpresentUser();
232 |     } else {
233 |       navigate("/login");
234 |     }
235 |   }, []);
236 | 
237 |   return (
238 |     user && 
239 |     (
240 |       <div className = "layout p-1">
241 |         <div className = "header bg-primary flex justify-between p-2">
242 |           <div>
243 |             <h1 className = "text-2xl text-white cursor-pointer"
244 |               // onClick={() => navigate("/")}
245 |             >Book My Show</h1>
246 |           </div>
247 | 
248 |           <div className = "bg-white p-1 flex gap-1">
249 |             <i className = "ri-shield-user-line text-primary mt-1"></i>
250 |             <h1
251 |               className = "text-sm underline"
252 |               onClick = {() => {
253 |                 if (user.isAdmin) {
254 |                   navigate("/admin");
255 |                 } else {
256 |                   navigate("/profile");
257 |                 }
258 |               }}
259 |             >
260 |               {user.name}
261 |             </h1>
262 | 
263 |             <i
264 |               className = "ri-logout-box-r-line mt-1"
265 |               onClick = {() => {
266 |                 localStorage.removeItem("token");
267 |                 navigate("/login");
268 |               }}
269 |             ></i>
270 |           </div>
271 |         </div>
272 |         <div className = "content mt-1 p-1">{children}</div>
273 |       </div>
274 |     )
275 |   );
276 | }
277 | 
278 | export default ProtectedRoute;
279 | ```
280 | ## Summary so far
281 | To sum up we have the following: 
282 | * `userRoute.js` file
283 | * Get current user route
284 | * Middleware
285 | * **API calls**: In order to get the current user
286 | * **Redux**: contains slices and store.js files
287 | * `Protected route.js` file
288 | 
289 | 
290 | 
291 | ## Login
292 | In order to prevent the user from going back to login page after logging in we can do the following 
293 | 
294 | ```javascript
295 | useEffect{() => {
296 |     if(localStorage.getItem("token")){
297 |         navigate("/");
298 |     }
299 | }, []};
300 | ```
301 | You can use CDN remix icon link in your html file to add stylish icons
302 |  
303 | 
304 | ## Users
305 | We'll have two types of user
306 | ### Admin
307 | 1. **Add the movies:** By editing updates
308 | 2. **Add the theatres**
309 | `isAdmin: true`
310 | 
311 | ### User
312 | 1. login/logout
313 | 2. see the shows
314 | 3. book the tickets
315 | 4. generate ticket
316 | 5. make payment
317 | `isAdmin: false`
318 | 
319 | `/admin` If this is present in the url of the app then check for certain permissions by checking if `isAdmin` property is *true*, if yes give the rights and if not then revert to
320 | 
321 | `/profile`: normal user rights. 
322 | 
323 | 
324 | 
325 | 
326 | ## UI - Display
327 | The finished UI should have the following: 
328 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/054/687/original/upload_9010f428767216bb0f328d971b568460.png?1697915994)
329 | 
330 | ![](https://d2beiqkhq929f0.cloudfront.net/public_assets/assets/000/054/688/original/upload_a50a1c5e7351b37a4c5c3b8c469e34b5.png?1697916285)
331 | 
332 | 
333 | ### Display: Form elements
334 | 1. **Add button**: It places the text at respective places/variables
335 | 2. **Movie Route**: Adds movies using Instance.AddMovies
336 | 3. **Table** at UI
337 | 
338 | 
339 | 
340 | 


--------------------------------------------------------------------------------