`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.
+
+#### Pseudocode
+
+```html
+
+
+
+ Span in Inline Element Example
+
+
+ Inline Element with Span
+
+ This is a red
+
+
+
+
+
+
+ Span in Inline Element Example
+
+
+ Inline Element with Span
+
+ This is a red
+
+
+
+
+```
+#### Output:
+
+
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/3_Introduction to CSS.md b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/3_Introduction to CSS.md
new file mode 100644
index 0000000..abb356f
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/3_Introduction to CSS.md
@@ -0,0 +1,314 @@
+# Agenda:
+- What is CSS
+- Need for CSS
+- CSS Selectors
+- Properties of CSS (color, background, fonts, and texts)
+
+So, lets start!
+
+
+>Various ways of using CSS
+They are:
+1. Inline
+2. Internal
+3. External
+
+
+These are the things that we will discuss. Now, let us see them one by one.
+
+
+- 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.
+- Now, let us see how to add CSS to this element.
+
+
+# Steps to add style tag:
+- Add `` tag inside the head tag of your HTML file. Inside this **style** tag, you can use all the CSS stylings.
+- Select the element that you need to add CSS.
+- For example, h1 and add curly braces to it. Inside this, you can define the CSS properties as shown below:
+
+```HTML=
+h1{
+ color : brown;
+}
+
+
+
+# Using CSS in three different ways:
+
+## 1. Internal CSS
+- When you write CSS in the same HTML file. (using the style tag)
+
+
+## 2. Inline CSS
+- It is writing CSS for a particular element. (using style attribute.)
+
+### Example
+```
+ I am heading 2
+```
+- 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**.
+- Inline CSS has more priority than Internal CSS.
+
+
+## 3. External CSS
+- You can create a separate file for CSS having the extension "**.css**".
+- Here you do not need to use any HTML tag. You can directly write your CSS and properties.
+
+### Example
+
+```HTML=
+H3{
+ color: green;
+}
+```
+To reflect these CSS into your HTML file, you need to link that CSS file to the HTML file.
+- Use the "link" tag to do this as shown below.
+
+```
+Positioning
+
+
+
+
+
+
+
+
+```
+
+Now lets target this 3rd box and apply position property on it.
+
+### Exercise 1
+
+#### Problem Statement
+Give **static** position value to box 3.
+
+#### Solution
+* we can give a separate id to the box3, say box_3.
+* Now, in style tag, we can use position property and set the value as **static.**
+
+#### Pseudocode
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+Static is the default position in which all the elements are positioned, so it will do nothing to the position of box3
+
+There are 5 positions in CSS that we will talk about:
+
+* static
+* relative
+* absolute
+* fixed
+* sticky
+
+Now lets give it relative position.
+
+### Exercise 2
+
+#### Problem Statement
+Give **relative** position value to box 3 and move it 20px.
+
+#### Solution
+* In style of box_3, we can use position property and set the value as **relative** along with top property as 20px.
+
+#### Pseudocode
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+Now, it will move 20 pixels from the top. We're instructing the box to move '20 pixels down from your original position at the top'.
+
+
+> **Tip to instructor:** Use different-different values to explain relative value to learners and ask learners if they have any doubt or not.
+
+
+Now lets give it absolute position.
+
+### Exercise 3
+
+#### Problem Statement
+Give **absolute** position value to box 3 and move it 20px.
+
+#### Solution
+* In style of box_3, we can use position property and set the value as **absolute**.
+
+#### Pseudocode
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+> **Tip to instructor:** This box 4 vanishing case can be tricky for learners. so take time explaining this.
+
+
+Now, we can see that box 4 has vanished but "box 4" could be positioned directly underneath "box 3", and because of the overlap, "box 4" might be hidden by "box 3".
+
+If we want "box 4" to be visible and not hidden by "box 3", you might need to adjust the positioning of box 3 and give some top value as 100px.
+
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+Now, we can see it is moving down, so that means box3 is now trying to adjust with the window itself.
+
+In this case, the element box3 is removed from the normal document flow. The other elements will behave as if that box3 is not in the document. No space is created for the element in the page layout. The values of left, top, bottom and right determine the final position of the box3.
+
+Now box3 is not trying to move relative to its original position, it will try to move relative to the window, means from the entire top of the window it is taking 100px.
+
+> **Tip to instructor:** Now use right, left and bottom properties to explain it better.
+
+Now lets understand what fixed position is.
+
+**Fixed position:**
+* Fixed Position is basically when your Element will take a place with the Respect to the window and it will not move from there.
+* Fixed-positioned element is "fixed" in a specific location on the screen, and it won't move when the user scrolls up or down the page. This can be useful for creating elements that should always be visible, like navigation bars or call-to-action buttons, regardless of where the user is on the page.
+* The element will maintain its position relative to the viewport's coordinates, providing a consistent visual reference point as the user interacts with the content.
+
+### Exercise 4
+
+#### Problem Statement
+Give **fixed** position value to box 3 and fix it at the bottom of the scrollable page.
+
+#### Solution
+* In style of box_3, we can use position property and set the value as **fixed**.
+* For fixing it to the bottom of the page, we can give right property as 4px and bottom as 1px.
+
+#### Pseudocode
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+Now if we scroll the page, the box3 will be fixed at the bottom right of the page.
+
+> **Tip to instructor:** Ask the learners, if they have any doubts
+
+Now, lets understand sticky value:
+
+**Sticky:**
+* When an element is given a "position" value of "sticky," it acts like a relative-positioned element within its containing element until a certain scroll threshold is reached. Once the user scrolls beyond that threshold, the element becomes "stuck" in place and behaves like a fixed-positioned element, remaining visible on the screen.
+* In other words, a sticky element starts as part of the normal document flow, just like a relatively positioned element. As the user scrolls, the element follows its normal position until it reaches a designated point (usually when its top or bottom edge reaches a specific distance from the viewport's edge). At that point, it becomes "sticky" and remains fixed at that position while the rest of the content scrolls.
+
+Lets go to the zomato website and see its navbar, here you can see when we scroll the page, this navbar is getting fixed at the top of the page.
+
+So on reaching a particular value, sticky gets fixed.
+
+### Exercise 5
+
+#### Problem Statement
+Give **sticky** position value to box 3 and fix it at the top of the scrollable page.
+
+#### Solution
+* In style of box_3, we can use position property and set the value as **sticky**.
+* For fixing it to the top of the page, we can give top property as 0.
+
+#### Pseudocode
+```htmlembedded
+
+
+
+
+ Positioning
+
+
+
+
+
+
+
+
+```
+
+Now if we scroll the page, the box3 will behave normally will it touches the top and them it becomes fixed to the top of the page.
+
+
+Now let's talk about Flex box.
+
+**Flex Box:**
+* Flex box stands for flexible box
+* liberty to align and Justify our Elements with just some line of code but you need to think graphically.
+* It's a layout model in CSS that makes arranging elements a whole lot easier.
+* With flexbox, you have a container that holds your elements, and it's like your shelf. Inside this container, you can use the power of flexbox to control how your elements behave.
+
+Flexbox is just a concept of CSS that makes your life very easy.
+
+> **Note to instructor:** Now use the below boilercode to start with explaining flex.
+
+Now, lets create some boxes again in HTML to start with flexbox.
+
+```htmlembedded
+
+
+
+
+ Flexbox
+
+
+
+
+
+
+
+
+```
+
+So this is the basic boxes that we made similar to above.
+
+Now lets use the **display: flex;** property in the parent container
+
+```css
+.container {
+ background-color: tomato;
+ border: 2px solid black;
+ height: 500px;
+ width: auto;
+ display: flex;
+}
+```
+
+When you apply the CSS property display: flex; to an element, you're essentially creating a flex container. This container establishes a flex formatting context for its child elements, or "flex items." This means that the child elements within this container will follow the rules and behaviors defined by the flexbox layout model.
+
+Default property of flex box is to arrange all the elements in the row as you can also see here.
+
+You can also use many flex-direction property to arrange the elements in different ways.
+
+> **Note to instructor:** Use different-different values with flex-direction property like row, column, row-reverse, column-reverse etc, to explain it better.
+
+You can also use this important property called **justify-content**.
+
+**justify-content:** Defines how flex items are distributed along the main axis (horizontal for row layout, vertical for column layout).
+
+So if we want to center all the row items, we can use **justify-content: center**
+
+```css
+.container {
+ background-color: tomato;
+ border: 2px solid black;
+ height: 500px;
+ width: auto;
+ display: flex;
+ justify-content: center;
+}
+```
+
+The justify-content: center; property applied to a flex container in CSS aligns its child elements **horizontally** at the center of the container along the main axis.
+
+But there is 1 more property that is used to align items vertically that is **align-items**.
+
+> **Note to instructor:** Explain the axis using the below diagram. diagram refence: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+
+
+
+**[Ask the learners]**
+If I say, I want my flex direction is row, what will be my main axis?
+
+- X axis
+
+**[Ask the learners]**
+And If I say, I want my flex direction is column, what will be my main axis?
+
+- Y axis
+
+Now lets take more examples of **justify-content** property.
+
+> **Note to Instructor:** Explain each of the values with examples.
+
+* **justify-content: flex-start;**
+ * Flex items are aligned at the beginning of the container (left for a row layout, top for a column layout).
+* **justify-content: flex-end;**
+ * Flex items are aligned at the end of the container (right for a row layout, bottom for a column layout).
+* **justify-content: center;**
+ * Flex items are centered along the container's main axis.
+ * Equal space is added before the first item and after the last item, creating a balanced appearance.
+* **justify-content: space-between;**
+ * Flex items are evenly spaced along the main axis.
+ * The first item aligns with the container's start, the last item aligns with the container's end, and equal space is added between the items.
+* **justify-content: space-around;**
+ * Flex items are evenly spaced along the main axis, with space distributed around them.
+ * Space is added before the first item, after the last item, and between each pair of items.
+* **justify-content: space-evenly;**
+ * Flex items are evenly spaced along the main axis, with equal space added between them.
+ * Equal space is added before the first item, between all items, and after the last item.
+
+There are many options for this property, you can choose to play around with all of them.
+
+Now lets understand **align-items** property.
+
+The **align-items property** lets you control how flex items are positioned on the cross axis within the container.
+
+> **Note to Instructor:** Explain each of the values of align-items with examples.
+
+* **align-items: flex-start;**
+ * Flex items align at the start of the cross axis (top for row layout, left for column layout).
+ * No additional space is added between items and the container's cross axis edge.
+* **align-items: flex-end;**
+ * Flex items align at the end of the cross axis (bottom for row layout, right for column layout).
+ * No additional space is added between items and the container's cross axis edge.
+* **align-items: center;**
+ * Flex items are vertically centered along the cross axis.
+ * Equal space is added above and below the items, creating a balanced appearance.
+* **align-items: baseline;**
+ * Flex items are aligned along their text baselines.
+ * This value can be useful when items have varying font sizes or text content.
+* **align-items: stretch;**
+ * Flex items are stretched to fill the container's cross axis.
+ * If no height is explicitly set on the items, they will take up the full height of the container.
+
+
+
+**[Ask the learners]**
+If flex-direction if set to row and justify-content is center, which direction it will align?
+
+- Horizontally
+
+Now, we have covered two important properties, justify-content and align-items. Now we will move formward with some interesting properties.
+
+
+**[Ask the learners]**
+Do you know what is a responsive website?
+
+- A responsive website is a website that can work of different screen size and can adapt to those different screen sizes. It responds and adjusts its layout, images, and content to fit the screen it's being viewed on, whether that's a desktop computer, tablet, or smartphone.
+
+Lets take an example to scaler's website
+
+> **Note to Instructor:** Navigate to https://www.scaler.com/ and show its responsiveness
+
+If you minimize the screen, you can see that everything is changing according to the screen size. Design is not breaking and is adapting to the screen size whether it is mobile view or the desktop view.
+
+> **Note to Instructor:** Now to explain screensize better, you can navigate to our HTML page and show different mobile and responsive views in inspect tab.
+
+In inspect tab of our HTML website, we can check how our website will look in different dimensions and screen sizes.
+
+If we decrease the screen size, we can see that the boxes are shrinking. That means it is not responsive, There are various properties in flex box that we can use to make our website responsive.
+
+In the current scenario the boxes are getting shrinked but if I don't want it to shrink and I want them to adjust according to the screen size, for that we can use some CSS properties.
+
+There is 1 property know as **flex-wrap**
+
+**flex-wrap:** The flex-wrap property in flexbox controls whether flex items should wrap onto multiple lines within the flex container when there's not enough space to fit them all on a single line.
+
+So if we use the above code with flex-wrap property, we can see that the boxes are now responsive and not shrinking.
+
+```htmlembedded
+
+
+
+
+ Flexbox
+
+
+
+
+
+
+
+
+```
+
+> **Note to Instructor:** Now create more boxes to expain **flex-wrap** property better.
+
+
+The flex-wrap property is especially useful when dealing with responsive layouts. It allows you to control how flex items reorganize when the available space changes. For example, if you have a row of cards and they don't fit on a smaller screen, setting flex-wrap: wrap; would cause them to stack vertically, creating a more readable layout.
+
+Here's what each value of flex-wrap does:
+
+* flex-wrap: nowrap;
+ * This is the default value.
+ * Flex items will stay on a single line, even if they cause overflow. They won't wrap to the next line.
+* flex-wrap: wrap;
+ * When there's not enough space for all items on a single line, flex items will wrap to the next line. They will stack vertically if needed.
+* flex-wrap: wrap-reverse;
+ * Similar to wrap, but the wrapping happens in reverse order. The last flex item becomes the first item on the new line, and so on.
+
+
+Now we can discuss about item wise flex box,For now we were using flex box in container but now we will use flex box within the container items
+
+
+> **Note to Instructor:** Navigate to https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-properties-for-the-childrenflex-items and explain that we can use flex properties for children items.
+
+
+There is 1 property called **order** that is used for ordering the items.
+
+The **order** property in flexbox allows you to control the visual order in which flex items appear within a flex container, regardless of their order in the HTML markup. It's particularly useful for reordering items for different screen sizes or creating unique visual layouts. H
+
+lets give the order property to box1, and see what happens:
+
+```htmlembedded
+
+
+
+
+ Flexbox
+
+
+
+
+
+
+
+
+```
+
+Now you can see that the box1 is ordered at the last.
+
+let's understand this with an example:
+
+
+
+Suppose, we gave order: 4 to box1 and order: 2 to box3.
+
+> **Note to Instructor:** So the question is how will the boxes arrange themselves?
+
+* box1 has the order 4, so it will go at last.
+* box3 has order 2, so it will go at third.
+* box 2 will be at 2nd position
+* box1 will be at first.
+
+
+
+Now lets' understand flex-shrink property.
+
+The **flex-shrink** property in flexbox determines how flex items shrink when the container's available space is limited. It defines the ability of an item to shrink in relation to other items in the container when the container's size is reduced.
+
+let's understand this with an example:
+
+We are providing flex-shrink property as 2 to box3.
+
+```htmlembedded
+
+
+
+
+ Flexbox
+
+
+
+
+
+
+
+
+```
+
+Now, whenever we are downsizing the screen box will be the first one to shrink the most.
+
+Similarly there is a property called flex-grow
+
+**flex-grow:**
+* This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
+
+> **Note to Instructor:** Show the similar example as flex-shrink.
+
+lets see a basic example:
+
+```htmlembedded
+.box3{
+ flex-shrink: 2;
+}
+```
+
+Now the box3 will grow the most on increasing the screen size
+
+> **Note to Instructor:** Now ask for doubts to the learners about the doubt that came up during the class.
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/6_CSS Grid.md b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/6_CSS Grid.md
new file mode 100644
index 0000000..ab93ea1
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/6_CSS Grid.md
@@ -0,0 +1,824 @@
+## Agenda
+
+Today we will be discussing about Responsive Layout and Grid in CSS.
+
+In previous session, we learned about flexbox and media queries. you can practice more about Flexbox via https://flexboxfroggy.com/.
+
+So let's start with today's session.
+
+
+Sometimes, when you have to create a very complex layout, you can use a Grid.
+
+**[Ask the learners]**
+What is a Grid?
+
+
+Let's take an example to understand this better, when we were kids, there were notebooks and the pages were of below structure.
+
+
+
+This is basically a grid structure.
+
+**CSS Grid Layout** is a layout in CSS that allows you to create two-dimensional grid layouts for arranging and aligning elements on a web page. It provides a powerful way to structure and design both rows and columns of content, allowing for complex and flexible layouts.
+
+In CSS Grid, we can use more properties as compared to Flexbox. So, lets jump on to VS Code to understand CSS Grid better.
+
+
+
+> **Tip to instructor:** Make a boilerplate code by creating 9 items and use those items for explaining CSS Grid. While writing the code, make sure to explain each line to the learners.
+
+Let's create a basic layout of 9 items which we will use to understand Grid.
+
+
+**HTML Code:**
+
+```htmlembedded
+
+
+
+ CSS Grid
+
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
Item 7
+
Item 8
+
Item 9
+
CSS Grid
+
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
Item 7
+
Item 8
+
Item 9
+
CSS Grid
+
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+
Item 6
+
Item 7
+
Item 8
+
Item 9
+
Grid Layout
+
+
+
+
+ Content
+ Navigation Bar
+
+
+
+
+```
+
+So, now we have created a basic layout of the application.
+
+for initializing grid in our application, we can use display: grid; property.
+
+```htmlembedded
+body{
+ font-size: 20px;
+ height: 100vh;
+ display: grid;
+ }
+```
+
+now lets give some borders and colors to all the elements.
+
+```htmlembedded
+
+
+
+ Grid Layout
+
+
+
+
+ Content
+ Navigation Bar
+
+
+
+
+```
+
+To convert this layout to our desired layout, we can use 1 css property called grid-template-areas, where we can tell CSS what area to give to a specific section.
+
+we can use grid-area to call that specific area and provide that area to our elements
+
+```htmlembedded
+
+
+
+ Grid Layout
+
+
+
+
+ Content
+ Navigation Bar
+
+
+
+
+```
+
+The CSS styles define the grid layout using grid-template-areas, specifying where each section should appear in the grid. The classes header, nav, main, aside, and footer are assigned to their respective grid areas using the grid-area property.
+
+Now using this code we have reached the basic layout requirements for us. But we have to play with heights and widths of the elements to make it exactly like the desired one.
+
+We first need to add 1 more sidebar for our requirements.
+
+**[Ask the learners]**
+You can take some time and tell me how to do it?
+
+Ans,
+* we need to add 4 templates in grid-template-areas property,
+* we have to make 1 more element for sidebar and give it the same styling
+* then we can add new template name to grid-template-areas and create new element style with respect to our template.
+
+```htmlembedded
+
+
+
+ Grid Layout
+
+
+
+
+ Content
+ Navigation Bar
+
+ Sidebar 2
+
+
+
+```
+
+Now only height and width of the templates is left, so we can use grid-template-columns and grid-template-rows properties:
+
+```htmlembedded
+
+
+
+ Grid Layout
+
+
+
+
+ Content
+ Navigation Bar
+
+ Sidebar 2
+
+
+
+```
+
+* **grid-template-columns:** 1fr 4fr 1fr 1fr; defines the widths of the columns in the grid. The first column takes up 1 fraction of the available space, the second column takes up 4 fractions, and the last two columns take up 1 fraction each.
+* **grid-template-rows:** 80px 1fr 70px; defines the heights of the rows in the grid. The first row has a fixed height of 80px, the second row takes up 1 fraction of the available space, and the third row has a fixed height of 70px.
+
+
+In this, we have achieved the layout that we wanted to achieve
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/7_CSS (specificity , inheritance , rendering).md b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/7_CSS (specificity , inheritance , rendering).md
new file mode 100644
index 0000000..8dd13a5
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/7_CSS (specificity , inheritance , rendering).md
@@ -0,0 +1,413 @@
+# CSS Cascading, Specificity, Inheritance and Overflow
+
+
+### Introduction
+
+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.
+
+**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.
+
+**Specific:** Suppose you are diagnosed with fever then the doctor prescribes you with some medicines that are *particular* to the disease i.e., fever.
+
+
+### What is Cascading in CSS?
+
+Cascade is defined as top-to-bottom flow.
+
+*Example:*
+```css!
+.h1{
+ colour: red;
+}
+.h1{
+ colour: blue;
+}
+```
+The output will be blue because cascading always goes down therefore blue comes later therefore priority will be given to the later part.
+
+**CSS Cascading involves Specificity and Inheritance which will be covered in this lecture.**
+
+
+
+### Specificity
+
+To understand specificity let's take an example.
+
+**First**: Create an HTML file to understand specificity.
+**Second**: Create an unordered list of let's say "fruits".
+
+```htmlembedded!
+
+
+ Apple
+ Mango
+ Orange
+
+
+```
+
+**Third**: Assign 'id' and 'class' to your unordered list.
+
+```htmlembedded!
+
+
+ Apple
+ Mango
+ Orange
+
+
+```
+
+**Fourth**: Using CSS, make the colour of the class "favourite" blue.
+
+The Selector will be id i.e., "fruits" Inside this id select a list element and then a specific class i.e., "favourite".
+
+```htmlembedded!
+
+```
+
+**Fifth**: Using CSS, change the colour of the unordered list to blue as well.
+
+```htmlembedded!
+
+```
+
+**[Ask the learners]**
+
+What will happen if we change the colour of the unordered list to blue after changing the colour of class "favourite" to red?
+
+```htmlembedded!
+
+```
+
+--> 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.
+Hover over the selector `ul#fruits li` you will see "Selector Specificity: (1,0,2)".
+
+Before understanding the Selector Specificity values:
+
+**[Ask the learners]**
+
+What if the style attribute is applied in the list tag with class = "favourite"?
+
+```htmlembedded!
+
+
+ Apple
+ Mango
+ Orange
+
+
+```
+
+--> 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.
+
+### Understanding values in specificity
+
+Specificity can have **four** values if the style attribute is also included.
+
+
+
+| Style attribute | IDs | Classes | Elements |
+| :--------: | :--------: | :--------: | :---------: |
+
+#### How to count specificity?
+
+The selector `ul#fruits li` has "Selector Specificity: (1,0,2)". But how?
+
+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).
+
+Similarly, the value of the selector `ul#fruits li.favourite` is (1,1,2).
+
+#### How does the Selector Specificity make sure what selector should be applied?
+
+> Remove style attribute from the list element with class = "favourite".
+
+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.
+
+**[Ask the learners]**
+
+Arrange them from the least effective to the most effective selector.
+1. `.test`
+2. `h1.test`
+3. `#try`
+4. `h1`
+
+--> **4<1<2<3** is the order.
+
+Let's compare the values of each one of them.
+1. `.test` - It has one class. Therefore, the value is (0,1,0).
+2. `h1.test` - It has one class and one element. Therefore, the value is (0,1,1).
+3. `#test` - It has one ID. Therefore, the value is (1,0,0).
+4. `h1` - It has one element. Therefore, the value is (0,0,1).
+
+**[Ask the learners]**
+
+Calculate the value of the Selector Specificity of the following selector.
+`#try ul div.test h2{}`
+
+--> **(0,1,1,3)**
+
+ID - #try
+Class - .test
+Element - ul, div, h2
+
+| Style attribute | ID| Class|Element|
+| :--------: | :--------: | :--------: | :-------: |
+| 0| 1 | 1 |3|
+
+**[Ask the learners]**
+
+Calculate the value of the Selector Specificity of the following selector.
+`#try span img .test .main header`
+
+--> **(0,1,2,3)**
+
+ID - #try
+Class - .test, .main
+Element - span, img, header
+
+| Style attribute | ID| Class|Element|
+| :--------: | :--------: | :--------: | :-------: |
+| 0| 1 | 2 |3|
+
+> You can use [Keegan](https://https://specificity.keegan.st/) to calculate Specificity value.
+
+
+### Keyword - `!important`
+
+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.
+
+#### Example
+
+```css!
+ul#fruits li.favourite{
+ color: red;
+ }
+
+ul#fruits li{
+ color: blue !important;
+ }
+```
+
+All the list elements will turn into a blue colour regardless of the Specificity Value.
+
+> Priority of Inline CSS will be more than Internal CSS and External CSS.
+
+> 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.
+
+
+### CSS Inheritance
+
+#### Definition
+As the last names are inherited in a family same way inheritance works in CSS which inherits some property from the parent.
+
+We will be looking at the four properties - **Default, Inherit, Initial and Unset**.
+
+Let's take an example where we create an unordered list and add href to all the list elements:
+
+```htmlembedded!
+
+ Default Link Color
+ Inherit Link Color
+ Initial Link Color
+ Unset Link Color
+
+```
+
+First, Let's assign classes to the three properties: Inherit, Initial and Unset.
+
+```htmlembedded!
+
+ Default Link Color
+ Inherit Link Color
+ Initial Link Color
+ Unset Link Color
+
+```
+
+### Inherit Property
+
+Inherit is defined as the properties inherited from the parent. The properties applied to the parent are inherited by the child.
+
+For example
+
+```htmlembedded!
+
+
+
+
+ Heading
+
+
+
+```
+
+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.
+
+If the parent is not specified then the parent will always be the body tag by default.
+
+To understand it better, let's take "class-1" from our unordered list of inheritance properties and apply `color: inherit` to the anchor tag.
+
+```css!
+body{
+ color: red;
+}
+.class-1 a{
+ color: inherit;
+}
+```
+
+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.
+
+### Initial Property
+
+The initial property will always take the default properties.
+
+```css!
+body{
+ color: red;
+}
+.class-1 a{
+ color: inherit;
+}
+.class-2 a{
+ color: initial;
+}
+```
+
+The color of the class-2 anchor tag will take the default color i.e., black.
+
+> 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.
+
+### Unset property
+
+Unset depends on the inherited value.
+Unset checks if any properties in the body can be inherited will be inherited.
+
+For example:
+
+```css
+body{
+ color: red;
+ display: inline;
+}
+.class-1 a{
+ color: inherit;
+}
+.class-2 a{
+ color: initial;
+}
+.class-3 a{
+ color: unset;
+}
+```
+
+
+### CSS Overflow
+
+When the content goes out of the container is known as **Overflow**.
+
+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.
+
+```htmlembedded!
+
+
+
+ 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.
+
+
+```
+
+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.
+
+#### Example
+
+Let's understand how:
+
+```htmlembedded!
+
+
+
+ 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.
+
+
+```
+
+#### Properties of Overflow
+
+**Hidden**: The content that remains outside the container will be hidden or not visible. It does not occupy space where the content is hidden.
+
+**Scroll**: A scroll bar is added inside the container so that you can go through the whole content inside the container.
+
+**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.
+
+**Visible**: It will make the content visible. There will be no change.
+
+> The container takes only the space designated to it. Therefore, the overflow content will overlap with the other content added after the container.
+
+**[Ask the learners]**
+
+How will we apply the overflow condition if we make the container horizontal for the following div content?
+
+```htmlembedded!
+
+ Scaler
+
+```
+
+-->
+```htmlembedded!
+
+```
+
+We can add any other property as well it will work similarly to the vertical container.
+
+> If you want to hide the vertical or horizontal scroll bar you can use the following syntax: `overflow-x: hidden;` or `overflow-y: hidden;`.
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/10_Debouncing and Throttling.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/10_Debouncing and Throttling.md
new file mode 100644
index 0000000..a4802b3
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/10_Debouncing and Throttling.md
@@ -0,0 +1,223 @@
+
+
+## SetTimeout Method
+
+`SetTimeout` is a method that allows you to execute a specific function after a certain delay.
+
+**Syntax:**
+```javascript
+SetTimeoutCfn(function, delay);
+```
+
+- `function`: The function you want to execute after the delay.
+- `delay`: The time interval (in milliseconds) after which the specified function should be executed.
+
+For example, if you want to start an animation after a delay of 1, 2, or 3 seconds, you could use the following code:
+
+```javascript
+function startAnimation() {
+ // Code to start the animation
+}
+
+// Using SetTimeout to call the startAnimation function after a delay
+SetTimeoutCfn(startAnimation, 1000); // 1000 milliseconds (1 second)
+SetTimeoutCfn(startAnimation, 2000); // 2000 milliseconds (2 seconds)
+SetTimeoutCfn(startAnimation, 3000); // 3000 milliseconds (3 seconds)
+```
+
+
+```javascript
+// Declare a variable to hold the timeout ID
+let animationTimeout;
+
+// Function to start the animation
+function startAnimation() {
+ // Code to start the animation
+ console.log("Animation started");
+}
+
+// Function to stop the animation
+function stopAnimation() {
+ // Clear the timeout to prevent the animation from starting
+ clearTimeout(animationTimeout);
+ console.log("Animation stopped");
+}
+
+// Using SetTimeout to call the startAnimation function after a delay
+animationTimeout = setTimeout(startAnimation, 2000); // Starts after 2000 milliseconds (2 seconds)
+
+// You can call stopAnimation to cancel the scheduled animation
+// For example, if you want to stop it before it starts
+stopAnimation();
+```
+
+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.
+
+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.
+
+## Debouncing
+**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.
+
+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.
+
+Here's a simple example of debouncing using JavaScript:
+
+```javascript
+// Debounce function: accepts a function and a delay
+function debounce(func, delay) {
+ let timeoutId;
+
+ // Return a function that will be executed after the delay
+ return function() {
+ // Clear the previous timeout
+ clearTimeout(timeoutId);
+
+ // Set a new timeout
+ timeoutId = setTimeout(func, delay);
+ };
+}
+
+// Function to be debounced
+function processInput() {
+ console.log("Processing input...");
+}
+
+// Create a debounced version of the processInput function
+const debouncedProcessInput = debounce(processInput, 300);
+
+// Simulate frequent user input (e.g., typing)
+document.addEventListener("input", debouncedProcessInput);
+```
+
+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.
+
+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.
+
+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.
+
+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.
+
+**Scenario and Explanation:**
+
+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.
+
+Here's how the events play out:
+
+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.
+
+2. `id=2`, 2000ms: The user continues typing. Another event occurs while the timer is still counting down. The timer is reset to 2000ms.
+
+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.
+
+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.
+
+**Explanation of Code:**
+
+Let's use the provided code example to explain how this works in JavaScript:
+
+```javascript
+// Debounce function for network requests
+function debounceNetworkRequest(func, delay) {
+ let timeoutId;
+
+ return function() {
+ clearTimeout(timeoutId);
+
+ timeoutId = setTimeout(func, delay);
+ };
+}
+
+// Function to send network request
+function sendNetworkRequest() {
+ // Code to send the network request
+ console.log("Network request sent");
+}
+
+// Create a debounced version of the network request function
+const debouncedSendNetworkRequest = debounceNetworkRequest(sendNetworkRequest, 1000);
+
+// Simulate user typing events
+console.log("User starts typing...");
+debouncedSendNetworkRequest(); // id=1, 1000ms
+debouncedSendNetworkRequest(); // id=2, 2000ms
+debouncedSendNetworkRequest(); // id=3, 2500ms
+console.log("User stops typing...");
+debouncedSendNetworkRequest(); // id=4, 3000ms
+```
+
+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.
+
+
+
+## Throttling
+
+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.
+
+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`.
+
+**Scenario and Explanation:**
+
+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.
+
+Here's how the events play out using throttling:
+
+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.
+
+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).
+
+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.
+
+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.
+
+**Explanation of Code:**
+
+Here's how the throttling code example works in JavaScript:
+
+```javascript
+// Throttle function for network requests
+function throttleNetworkRequest(func, delay) {
+ let lastExecution = 0;
+
+ return function() {
+ const now = Date.now();
+
+ if (now - lastExecution >= delay) {
+ func();
+ lastExecution = now;
+ }
+ };
+}
+
+// Function to send network request
+function sendNetworkRequest() {
+ // Code to send the network request
+ console.log("Network request sent");
+}
+
+// Create a throttled version of the network request function
+const throttledSendNetworkRequest = throttleNetworkRequest(sendNetworkRequest, 1000);
+
+// Simulate user typing events
+console.log("User starts typing...");
+throttledSendNetworkRequest(); // id=1, 1000ms
+throttledSendNetworkRequest(); // id=2, 2000ms (delayed)
+throttledSendNetworkRequest(); // id=3, 2500ms (delayed)
+console.log("User stops typing...");
+throttledSendNetworkRequest(); // id=4, 3000ms
+```
+
+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.
+
+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.
+
+Here's a tabular comparison between debouncing and throttling:
+
+| Aspect | Debouncing | Throttling |
+|---------------------|--------------------------------------------------|------------------------------------------------|
+| Purpose | Delay function execution until inactivity | Limit function execution rate |
+| Execution | Executes after a pause in events | Executes at a steady rate |
+| Event Resets Timer? | Yes, resets the timer on each event during delay | No, maintains a steady execution interval |
+| Frequency Handling | Reduces function calls during rapid events | Limits function calls to a set interval |
+| Use Cases | Typing (search suggestions), resizing events | Scrolling, mouse movement, rate-limited APIs |
+
+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.
\ No newline at end of file
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/1_Introduction to DOM.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/1_Introduction to DOM.md
new file mode 100644
index 0000000..3c1d723
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/1_Introduction to DOM.md
@@ -0,0 +1,505 @@
+# Introduction to Document Object Model
+
+#### Definition
+Dom is a tree structure in which every HTML element is arranged in heirarchical order.
+
+#### Example
+
+```htmlembedded
+
+
+
+ Document
+
+
+
+
+
This is heading 2
+
+
+
+
+
+
This is heading 1
+
+
This is Paragraph
+
+
Document
+
+
+ Say Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+**Code:** Using getElementsByClassName
+
+```htmlembedded
+
+
+
+ Document
+
+
+ Say Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+**Code:** Using querySelector by ID
+
+```htmlembedded
+
+
+
+ Document
+
+
+ Say Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+**Code:** Using querySelector by class
+
+```htmlembedded
+
+
+
+ Document
+
+
+ Say Hello
+ Say Bye
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+**Code:** Using querySelector by elements
+
+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.
+
+```htmlembedded
+
+
+
+ Document
+
+
+ Say Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+**Step 2:** hello should get appended
+
+**What is an event?**
+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).
+
+**Method - addEventListener:** We can add any event to any of our elements with using addEventListener method.
+
+
+```javascript
+
+
+
+ Document
+
+
+ Say Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+#### Append Hello DOM Tree
+
+
+
+
+#### Question
+
+Fix the list by inserting the missing element using querySelectorAll and insertBefore
+
+#### Solution
+
+**Step 1:** creating node list
+
+**Note:** Node list is an array like structure which will have your elements in indexed form stored.
+
+```javascript
+
+
+
+ Document
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+ 8
+ 9
+ 10
+
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+**Step 2:** adding element
+
+```javascript
+
+
+
+ Document
+
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+
+ 8
+ 9
+ 10
+
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+#### Question
+
+Fix the mathmatical problem using JS
+
+#### Solution
+
+```javascript
+
+
+
+ Document
+
+
+
+ 2 + 2 = 22
+
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+#### Question
+
+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"
+
+#### Solution
+
+**classList:** An element can have multiple classes attached to it and all of those classes are collected in a structure called classList.
+
+Example:
+
+```javascript
+ Our card
+
+```
+
+The classList for this div will be - [card, test, blue]
+
+```javascript
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+**Output:**
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/2_Event and Event Handling.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/2_Event and Event Handling.md
new file mode 100644
index 0000000..241aaef
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/2_Event and Event Handling.md
@@ -0,0 +1,1100 @@
+# Events and Event Handling
+
+
+#### Definition
+
+**Event:** In JavaScript, an event is a signal that something has happened in the web page or application. This could be user interactions like clicks, key presses, or page loading.
+
+**Event Handling:** Event handling in JavaScript refers to the process of writing code to respond to events. This involves attaching event listeners to specific elements in the DOM (Document Object Model) and defining functions that are executed when the specified event occurs. Event handling allows developers to create interactive and dynamic web experiences.
+
+
+
+#### Question 1
+
+Make the filter work
+
+#### Solution
+
+**Parent element:** This is a property which will get the parent element from the DOM tree of a specific child.
+
+
+
+
+```javascript
+
+
+
+ Document
+
+
+
+
+ BOOK MY SHOW
+
+ None
+ Action
+ Romance
+ Comedy
+
+
+
+
Action Movie - 1
+
Rs. 100
+
+
Action Movie - 2
+
Rs 200
+
+
Action Movie - 3
+
Rs. 150
+
+
Romance - 2
+
Rs. 150
+
+
Romance - 3
+
Rs. 150
+
+
Action Movie-4
+
Rs 200
+
+
Romance - 4
+
Rs. 100
+
Document
+
+
+
+
+ Press 1 to go to Section-1
+
+ Section 1
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi ipsum
+ rem placeat ullam vero animi adipisci laboriosam libero quidem quisquam
+ quam quae veniam, exercitationem aspernatur quaerat qui harum maiores
+ tenetur vel magnam temporibus dolor modi deserunt. Excepturi nesciunt sint
+ velit blanditiis provident modi voluptate, corrupti fugit est minima quae
+ qui praesentium minus cupiditate aut! Ipsam voluptatum dolores hic quis
+ iure ipsa, aperiam deserunt harum aspernatur similique laudantium a eaque,
+ sint obcaecati, ut consequuntur eum? Officia delectus quis qui velit
+ minima assumenda ipsa, quos natus quae amet sequi laudantium cumque sit
+ aliquam perspiciatis tenetur ad illum quaerat aperiam aspernatur beatae?
+ Cupiditate dolorum modi aut odio debitis esse ad nesciunt suscipit magnam
+ quis alias tempora asperiores, optio quisquam sapiente blanditiis ducimus
+ eveniet quasi sed ipsa iure aliquid. Sapiente minima recusandae nesciunt,
+ magni atque vel quidem quibusdam numquam velit quas fuga, in rem.
+ Blanditiis delectus tempora eius possimus minima, necessitatibus error,
+ similique rerum incidunt iure amet explicabo iusto. Incidunt laudantium
+ ipsa hic tenetur perspiciatis, expedita beatae modi voluptatem delectus
+ veniam dolores numquam. Maiores fugit, quidem ad id voluptates vel.
+ Dolores consequuntur recusandae voluptatum voluptatibus ipsum fugit soluta
+ voluptatem adipisci sint molestiae! Cum itaque repudiandae asperiores quas
+ ratione molestiae, quaerat, quam, sint illo a consequuntur odit ullam
+ accusamus! Adipisci asperiores aut laboriosam facilis non illo voluptas
+ vitae, obcaecati deserunt, assumenda perferendis similique optio, ullam
+ earum quasi. Nostrum necessitatibus illo voluptas modi repellendus id eum
+ ducimus? Voluptatum fugit maiores voluptate, quod suscipit, excepturi quas
+ nam minus rem, illum consectetur! Aliquam voluptatibus a molestias
+ officiis qui nobis ratione ex quidem minima saepe maiores voluptates
+ corporis provident, pariatur fugiat expedita omnis numquam voluptas
+ sapiente fugit nesciunt laboriosam eligendi. Voluptatibus quo, impedit
+ nemo error mollitia maiores soluta tempore repellendus nesciunt, vel hic
+ quidem voluptatem commodi quia, voluptas deleniti reiciendis magnam
+ aliquam delectus dolore iusto sint. Possimus, numquam, dignissimos cum
+ sint consequatur molestias, nemo dicta doloribus adipisci amet consectetur
+ iste qui. Fugiat mollitia itaque odio, commodi et voluptates obcaecati
+ iure assumenda ab amet voluptate tempora vitae a alias adipisci nesciunt
+ laboriosam sit natus. Consectetur accusantium iure voluptates libero
+ eligendi non eveniet perferendis minus perspiciatis numquam eius, adipisci
+ ducimus maiores saepe neque quidem tempore nostrum rem beatae nulla omnis
+ expedita sunt autem? Dignissimos sint tempore mollitia obcaecati animi
+ pariatur ipsam nemo vitae doloremque in omnis ex corporis expedita natus,
+ aliquid quod esse quos praesentium culpa, veniam quo? Eum nesciunt, est
+ laudantium earum omnis sequi. Delectus est velit tenetur iusto minima
+ vero, quidem natus, placeat, aspernatur atque quibusdam dolorem quisquam
+ blanditiis porro explicabo repellendus modi. Nam beatae natus accusamus
+ quos impedit adipisci corporis fugiat architecto hic ut odio perferendis
+ placeat obcaecati ullam tempore et cumque eum sunt, dignissimos quibusdam
+ quaerat minima numquam rem. Unde eum culpa ullam, deleniti quae quos
+ dolorem, corrupti cupiditate, repellendus impedit tenetur repellat
+ voluptates aliquid possimus in sed dolore quam aut ex eius rem corporis
+ nulla enim doloribus. Id quam impedit doloremque explicabo temporibus,
+ nisi quos dolore earum, dolores deleniti sint eum quidem. Voluptas magnam
+ quod, eius labore amet ipsam veniam sapiente, quos neque commodi eligendi
+ quasi nulla cupiditate quidem sequi nesciunt. Assumenda praesentium
+ debitis reiciendis alias qui, porro autem libero numquam omnis mollitia
+ cupiditate. Ex blanditiis maiores aliquam labore suscipit, distinctio hic
+ ab quaerat, ut soluta consequatur pariatur aperiam iste quidem voluptates
+ saepe, facilis ipsum doloremque? Quidem tenetur eaque, sunt inventore
+ laudantium explicabo laborum similique vitae sequi autem aspernatur?
+ Consequatur ullam natus porro reiciendis officiis. Vero, consequatur
+ itaque? Repellendus dolor voluptate aut voluptatum libero tenetur natus
+ dicta dolorum assumenda quae. Error nam dolores voluptatibus consectetur
+ repudiandae laudantium deleniti quaerat consequatur, porro, aliquid at
+ dicta libero quidem, suscipit facilis sed aspernatur ab in rerum non.
+ Tempore aut dolores, assumenda mollitia dicta, neque minima explicabo
+ excepturi, eveniet nobis nulla tenetur. Pariatur dolore dolorum nobis
+ commodi, quo amet saepe quae magnam eius! Ex vero consectetur delectus
+ aliquid! Minima culpa possimus dicta iste excepturi aut quia officiis
+ reiciendis animi perspiciatis neque, deserunt minus beatae voluptates
+ veritatis rerum tempore molestias reprehenderit dolorem suscipit
+ repellendus esse non optio? Necessitatibus magni alias cumque repellendus
+ blanditiis tempora incidunt beatae labore in explicabo illo enim nisi quos
+ corrupti dolor adipisci ipsam, reprehenderit dolores vero. Labore ad, non
+ quos nam reiciendis sapiente molestias nobis, facilis placeat voluptatibus
+ perspiciatis dolorem voluptatem ipsum. Sint accusantium libero, fugiat
+ quibusdam delectus quia nostrum minima sequi illo quidem magni rem ex et
+ quasi ab error omnis eligendi odit repellat provident expedita
+ perspiciatis iusto! Adipisci, molestiae! Eaque delectus molestiae facilis
+ amet quis sed laudantium, quas ullam inventore ipsum nam adipisci hic?
+ Magnam nulla culpa pariatur at. Rem alias, ducimus ea atque omnis culpa
+ fuga, pariatur vel unde ad expedita in aliquid consequuntur excepturi.
+ Veritatis quia, voluptatum repellat quos ipsa dignissimos recusandae
+ delectus quaerat dolore reprehenderit. Fugiat, voluptate quibusdam. Ea
+ amet atque, veniam ullam labore nesciunt eveniet? Nulla reiciendis
+ accusamus ipsam laboriosam officia, provident corporis porro sunt!
+ Corporis incidunt tempora, quod unde quae alias repellat odio ea quisquam
+ quos beatae? Tempora, nisi doloremque! Ea enim, quos cum repudiandae sequi
+ ut mollitia qui quidem inventore molestiae corrupti exercitationem cumque
+ minima? Optio consequuntur porro saepe tempora excepturi nihil facere
+ facilis doloribus vero totam quae aut illum adipisci dolores provident
+ sunt, voluptatum vitae iure id nulla beatae non quaerat accusamus. Vitae
+ magni cum ab dolores eum sint consectetur laborum, quam magnam iste itaque
+ similique, modi ducimus non a aliquam corporis nam earum delectus tempora
+ expedita officia! Ducimus, officiis id rem officia, ipsa atque fugit
+ quisquam provident nobis ullam alias aperiam, minus quo ipsum quibusdam.
+ Delectus corrupti suscipit sed nobis temporibus sapiente quas illum,
+ pariatur sint deserunt incidunt reiciendis doloribus unde numquam ut,
+ quisquam, doloremque quod non? Unde nisi dolorem repudiandae iusto nulla,
+ perspiciatis eligendi magnam sequi assumenda non quam repellat natus
+ consectetur harum, architecto qui. Aliquid, iste pariatur! Expedita
+ explicabo molestias possimus laborum voluptates maiores, accusantium
+ voluptate eos excepturi dignissimos eveniet earum placeat! Velit cumque
+ facilis dolorem, maiores quidem dolores tenetur amet fugiat similique
+ doloribus porro exercitationem, laboriosam rerum nihil, praesentium odio.
+ Animi soluta quia totam vero, necessitatibus ratione debitis omnis atque
+ officiis consequatur esse libero nulla assumenda fugiat non rerum
+ asperiores ullam ipsam quam harum amet? Blanditiis, error officia!
+ Architecto maiores tempora sit error eum ducimus, consequuntur laudantium
+ fuga reprehenderit voluptas alias magnam distinctio nisi eveniet maxime
+ vel dolores repudiandae assumenda officia doloribus saepe nemo, molestias
+ minima. Neque iusto, ullam repellendus quidem nostrum temporibus deleniti
+ itaque dolore aliquid eveniet, molestias exercitationem corrupti molestiae
+ fugit tenetur perferendis quibusdam iste esse sapiente nam praesentium
+ consequuntur? Inventore ipsa natus neque assumenda. Cupiditate ex nobis
+ deserunt laudantium ratione asperiores porro voluptate debitis culpa,
+ explicabo, cum vel. Nulla delectus vitae voluptatibus facere nisi ab modi
+ exercitationem ipsam inventore in illum recusandae, cumque iste nemo
+ laborum, nihil autem libero accusamus expedita quasi ea maiores? Aperiam
+ eveniet officia id officiis in excepturi quae, vel illo? Commodi quis
+ libero cupiditate, quae praesentium at consequatur ipsa necessitatibus
+ veniam optio nam ipsam voluptatem officiis omnis voluptate id
+ exercitationem sunt vero fugiat explicabo, quidem beatae aspernatur porro
+ voluptatum? Nisi ipsam quisquam ipsum incidunt repellendus? Perferendis
+ dignissimos dolorum soluta quaerat. Eaque odit perferendis quasi vero
+ dolorum eius accusamus atque, autem a dicta architecto facere. Nostrum et
+ possimus cum, a perferendis ducimus laudantium harum? Hic voluptatum quam,
+ assumenda ipsa quod nemo possimus temporibus blanditiis sequi rerum
+ obcaecati iusto quidem dolore libero adipisci non, nulla pariatur quo,
+ ducimus quos perferendis corporis. Quos totam laboriosam consectetur,
+ quaerat similique unde, earum aliquid magni molestias at esse porro
+ perspiciatis, alias voluptatem? Alias consequatur nostrum voluptatum,
+ doloribus adipisci aperiam pariatur magni aspernatur cum repellat vero
+ debitis corrupti deleniti sequi vel modi harum in? Reiciendis quas
+ voluptatibus veniam earum delectus cum soluta harum. Distinctio enim,
+ repellendus alias labore id, eveniet cum repudiandae commodi, doloribus
+ animi eaque exercitationem? Quas nobis reprehenderit quis ut dolorem
+ obcaecati sequi recusandae perferendis facere. Magnam voluptatibus
+ asperiores ratione voluptate hic repellat reprehenderit sequi quisquam.
+ Consequuntur quos, explicabo delectus beatae labore tenetur perspiciatis
+ ipsum consequatur obcaecati sunt necessitatibus est dolorem vero odit
+ exercitationem nam architecto itaque iusto fugit consectetur rerum
+ laboriosam rem ducimus ad? Tempore, soluta eius id sed, expedita
+ consectetur unde consequatur doloremque iure dolore enim molestias maiores
+ commodi cum vitae aut aliquid, sapiente sit dicta assumenda quibusdam. Et,
+ distinctio voluptatem voluptas omnis eaque qui sapiente dicta voluptate
+ quos dolores vel magni inventore sunt quisquam ipsa recusandae eveniet
+ quibusdam, saepe repudiandae itaque quia doloremque mollitia quis nobis!
+ Sapiente dolorem quae fugiat deleniti molestias fuga odit eveniet
+ voluptatibus nostrum beatae porro dolore soluta officiis, aspernatur,
+ sequi est! Blanditiis velit et dolor, aut deserunt quod quasi totam! Ipsam
+ perferendis culpa maxime! Aliquid quisquam delectus eum iste consectetur
+ sit labore voluptas? Autem voluptatibus, excepturi numquam repellendus
+ quaerat dolorem, obcaecati eum inventore qui similique odit, optio
+ adipisci consequatur. Ullam sequi reiciendis harum in amet eligendi eum
+ recusandae. Deleniti ullam facilis voluptatem blanditiis recusandae!
+ Provident animi porro architecto earum sunt soluta voluptas eaque quaerat
+ hic odio deleniti impedit velit qui alias corporis sed, obcaecati
+ consequatur quo omnis sit et. Deleniti ea delectus non iusto expedita
+ laborum, itaque nesciunt nisi inventore recusandae eveniet. Reprehenderit
+ nesciunt fugit atque iste omnis error possimus molestias laudantium at,
+ culpa natus amet qui dolore sint commodi adipisci repudiandae dignissimos
+ voluptate provident illum quo! Iusto natus illum nisi harum dolore culpa,
+ corrupti doloribus nesciunt sed consequatur animi adipisci ratione, odio
+ soluta reiciendis veniam dicta dolores est et maiores eius nostrum totam
+ quidem. Magnam aperiam nisi ut maxime aspernatur, autem dolorum cum, ex
+ laborum temporibus, neque necessitatibus fugiat! Dignissimos corrupti
+ doloribus voluptate nam deleniti saepe, dolor sit. Voluptatem autem
+ reiciendis suscipit ut porro optio delectus dolores iusto, molestiae vel
+ quos eaque esse, fugit facere. Amet quod distinctio, illum ullam possimus
+ laborum aut explicabo eos tempore repellendus dolorem sunt tempora
+ eligendi laboriosam sit temporibus aperiam similique. Accusantium labore
+ eligendi animi adipisci magni, veritatis non libero! Asperiores doloribus
+ fugit, fugiat distinctio consequatur tempora totam illo iste earum, unde
+ accusantium enim similique! Quidem cupiditate culpa, dignissimos unde sint
+ nihil fugit commodi nemo odio at facilis eveniet. Molestias vel neque id
+ quas a delectus pariatur iure eaque vitae ea, deserunt laborum repellat,
+ voluptatum beatae ducimus perspiciatis dolorem libero repellendus error
+ possimus, alias maxime? Molestiae vitae iusto veniam quo et exercitationem
+ eos suscipit tenetur incidunt eaque ducimus quaerat eum ex autem, quia
+ eveniet iure laboriosam, placeat cupiditate porro, obcaecati impedit atque
+ expedita? Impedit, accusantium? Similique exercitationem est eaque
+ deserunt quibusdam vitae recusandae, quaerat, esse numquam quasi porro
+ necessitatibus velit dignissimos quas rem possimus ipsum ducimus quod
+ adipisci vero qui dicta, dolor nam. Tempore expedita laudantium facilis!
+ Ab saepe nostrum a tempora, sequi nihil est unde eos quas voluptate,
+ libero reprehenderit molestiae numquam dolorem pariatur distinctio
+ veritatis accusamus alias. Nisi iure quasi dicta repellat placeat, quis
+ inventore? Doloribus, distinctio consequatur! Fuga deleniti placeat
+ perspiciatis mollitia sequi labore cupiditate minus cum assumenda,
+ quibusdam quia accusantium natus expedita porro quasi voluptatibus magni
+ esse nihil illum id illo. Quos ipsa magni facilis sed distinctio cum
+ aspernatur necessitatibus, voluptates temporibus officiis placeat qui
+ saepe provident enim fugit voluptate minima repellat labore dolores, vero
+ velit amet nesciunt esse? Delectus eligendi ullam accusamus consequatur
+ blanditiis aspernatur maiores libero neque dolor quae fugit, alias
+ repellat ex unde fuga est. Quibusdam pariatur rerum dicta similique
+ facilis rem voluptatibus. Doloremque, quisquam similique! Odit incidunt
+ quos illo ex voluptatibus, nam blanditiis rerum accusamus aperiam atque
+ magni quidem tenetur et vero voluptate nihil quisquam beatae ducimus optio
+ voluptas laboriosam! Accusamus odio nesciunt, beatae molestiae dolore
+ cupiditate eum, sit repudiandae iusto natus minima vitae quas sint. Harum,
+ repellat. Odio cum, pariatur tempora aliquid perspiciatis reiciendis sed
+ similique non numquam veritatis doloremque sit velit placeat laborum
+ quasi. Odio excepturi vitae distinctio cum sint quos adipisci perferendis
+ cupiditate assumenda eveniet! Nisi corporis id quis culpa adipisci,
+ aliquid praesentium laudantium tempora beatae at totam iste et quae,
+ quidem aliquam numquam aperiam. Ipsum ea pariatur itaque maiores, tenetur
+ unde, sit, enim exercitationem officiis ducimus consectetur ipsa deserunt.
+ Laudantium inventore tempore impedit dolorum similique assumenda officia,
+ nulla quas deserunt sit? Ut reiciendis officiis vitae dolorem nobis illo
+ hic dolor quasi, suscipit aut enim necessitatibus, amet incidunt sunt
+ magni unde? Dicta odio voluptas, perspiciatis porro possimus esse
+ praesentium tempora, tempore et, eos cum ea architecto molestias veritatis
+ at quia? Similique, nemo! Sint quo soluta corporis assumenda magni. Lorem
+ ipsum dolor sit amet consectetur adipisicing elit. Officia praesentium
+ reprehenderit vero ratione quia quaerat rerum dicta quidem accusamus.
+ Dolorem molestias qui nam aperiam vitae asperiores optio voluptatibus quae
+ sit repellendus facilis sunt cum consectetur officiis, harum fugit magni!
+ Velit placeat corporis beatae sed ea quae impedit molestias tempora
+ blanditiis, maiores porro molestiae iure saepe repellat veritatis error
+ ullam sapiente optio quia. Illo aliquid quo quaerat, consequatur nemo
+ recusandae pariatur quae odio nam ut natus laboriosam cum voluptatibus!
+ Dolores, ut cupiditate nisi numquam adipisci ullam minima architecto
+ consequuntur inventore veritatis, possimus dolorum ipsam expedita
+ accusamus repellat fugiat id vitae. Dolor inventore porro iusto quisquam
+ dolorum nihil, deserunt laborum accusantium expedita nostrum corporis
+ aliquam, exercitationem, consequuntur aut doloremque magnam architecto
+ voluptates. Eos laudantium veniam praesentium sit vero saepe natus quaerat
+ rem ut veritatis molestias non provident repellat labore totam voluptates
+ ullam mollitia alias, aut modi, dolorem nostrum! Repellat, laboriosam
+ voluptates inventore similique deleniti sit ea odit, minima consectetur
+ ducimus possimus officia quam at? Saepe exercitationem temporibus quaerat
+ eum ipsam animi, dolores voluptates dignissimos nisi tenetur voluptas
+ eveniet aut fugiat impedit facilis recusandae sapiente? Accusantium
+ dignissimos, voluptate vel cumque illum quisquam culpa Lorem ipsum dolor,
+ sit amet consectetur adipisicing elit. Beatae et consectetur, qui officia
+ libero a tenetur facere ex dolore accusantium debitis, hic, culpa
+ distinctio atque fugiat tempora temporibus excepturi inventore nam aliquid
+ quia facilis reprehenderit ut. Enim, illum voluptas ipsum quibusdam
+ commodi assumenda. Reiciendis, harum sapiente laudantium officiis pariatur
+ tenetur nostrum ipsa quibusdam corporis sit quam velit. Lorem ipsum, dolor
+ sit amet consectetur adipisicing elit. Culpa cum minima iste eligendi enim
+ ea quam exercitationem modi, similique saepe cupiditate incidunt
+ laudantium facere nostrum inventore porro nobis rerum dicta aspernatur
+ quia excepturi nesciunt vero. Quo vel, fugit, hic voluptatibus adipisci
+ repudiandae dolore veritatis laboriosam distinctio incidunt nisi sapiente
+ quibusdam ducimus officiis ut a esse beatae amet quia, animi velit.
+ Ratione neque exercitationem, illo culpa placeat voluptatibus
+ reprehenderit beatae unde omnis asperiores quam sequi vel aspernatur fuga
+ deserunt laboriosam numquam labore sunt voluptatem? Illum soluta saepe ad
+ blanditiis odio accusamus quia. Temporibus veniam deleniti debitis
+ deserunt? Eveniet et laboriosam velit provident quasi quaerat quibusdam
+ eos, animi vel. Amet placeat velit, aspernatur voluptatem quidem
+ reiciendis impedit totam fuga labore perspiciatis officia commodi repellat
+ modi nisi. Aut asperiores ad repellat mollitia vel illum, sunt distinctio
+ corrupti inventore quos hic quas facilis molestias unde minus dicta rem
+ maiores eveniet soluta quia maxime iste provident nesciunt voluptatibus!
+ Expedita, dolorum blanditiis magnam porro accusamus asperiores beatae ex
+ molestias odit neque quo repellendus aperiam ea voluptate a enim iure
+ numquam fugit tenetur! Harum accusantium molestias ipsa consectetur
+ eligendi, deserunt praesentium ratione non aliquid quo recusandae quas
+ libero distinctio dicta et, in quos doloribus sit labore vel cupiditate
+ minima iste officia repudiandae. Nemo impedit sit itaque rerum soluta quos
+ facilis praesentium alias illum necessitatibus cumque excepturi doloremque
+ laboriosam dolorum blanditiis eos hic pariatur est debitis, maiores
+ voluptatum nisi. Totam, soluta nesciunt pariatur, odio doloribus nobis
+ error debitis enim facere cupiditate velit maxime earum itaque quibusdam
+ voluptatibus modi ut, hic esse? Ex nobis neque itaque pariatur eius ab
+ incidunt nisi ullam laboriosam quibusdam voluptatibus dolores suscipit,
+ minus nostrum, deleniti iusto reiciendis. Accusamus iste est commodi
+ accusantium delectus. Tenetur rerum maiores sed odit dolores. Odio
+ assumenda dolorem maiores doloremque dicta aliquam rem enim numquam est
+ voluptate sed corporis facere illo molestias sit at, minus reiciendis
+ eaque repellat? Voluptates quo maxime eum quasi totam odit laborum
+ molestiae sunt cupiditate numquam? Dignissimos similique reprehenderit,
+ repellendus placeat, vel fugiat id labore nemo ab a explicabo itaque nisi
+ saepe quidem magni impedit pariatur odio, et consectetur ducimus quos
+ laborum voluptas vitae eveniet! Beatae doloremque omnis, hic accusantium
+ explicabo quaerat obcaecati quae aspernatur illum natus, repellat
+ perspiciatis et asperiores provident totam. Doloribus odio sequi, fugiat
+ repudiandae minima soluta tempora vitae explicabo voluptas officia
+ distinctio cupiditate adipisci unde. Aspernatur, inventore quasi.
+ Quisquam, in fugiat doloribus vel omnis similique dolorem, inventore est
+ esse eum perspiciatis minus vero molestiae explicabo delectus libero ab
+ repudiandae? Est rem magnam exercitationem quia, quaerat excepturi
+ voluptatibus provident asperiores eius qui molestias laborum nemo dolor
+ officiis ab explicabo tempora tenetur nisi harum repellat consequatur
+ doloremque. Vel, ut deserunt. Numquam alias labore officia nam modi,
+ minus, temporibus voluptates libero doloribus quasi maxime similique
+ magnam est atque, omnis doloremque nisi tempora eaque beatae velit! Rerum
+ ipsum laborum, numquam nesciunt placeat recusandae corrupti neque at
+ molestiae sint odit ipsam provident necessitatibus voluptate ipsa
+ explicabo perferendis magni ab magnam praesentium voluptatum suscipit
+ aperiam dolores. A explicabo cupiditate nostrum iusto distinctio
+ voluptatum quam expedita, magni assumenda atque adipisci fuga pariatur,
+ quod exercitationem aspernatur maiores corporis sequi, accusantium
+ voluptas molestiae aliquid fugit eius tempora dolore. Assumenda sed
+ accusantium quia quisquam necessitatibus officiis modi in, quos,
+ laudantium maxime asperiores officia. Asperiores provident, nisi voluptate
+ debitis praesentium quaerat amet temporibus hic tempora dignissimos,
+ officia reprehenderit natus veniam nostrum blanditiis, numquam molestiae
+ sit culpa consectetur facere aliquam adipisci! Nam, corrupti voluptatibus
+ molestias placeat quo rem laboriosam magnam consectetur iste ullam
+ sapiente distinctio error iusto id optio pariatur ea excepturi vitae?
+ Magnam tempore mollitia ex necessitatibus? Numquam corporis, aliquam vitae
+ porro consectetur doloribus tempora libero vero eos quibusdam distinctio
+ ullam? Alias, ullam sequi minus debitis dolorum animi nulla fugit, eos ex,
+ saepe at quibusdam libero odit repudiandae? Dignissimos, aut sint.
+ Deserunt est error, provident, soluta fuga alias possimus molestias
+ laborum quasi dolorum a. Nesciunt consequatur porro distinctio tenetur
+ possimus, iure sit deserunt veniam omnis amet reiciendis. Temporibus odio
+ recusandae delectus impedit totam consequatur beatae corrupti id esse
+ repudiandae, sed ut saepe voluptatem nisi accusamus similique quisquam
+ excepturi amet. Harum rem consequatur mollitia minima at vitae corporis
+ quis cupiditate iste maiores praesentium dolorem culpa reprehenderit
+ officiis, eaque voluptatum accusantium dolores natus asperiores odit vel
+ neque. Fugit, sit error ipsa in alias atque numquam explicabo odio natus
+ harum, id nam! Repellendus obcaecati illum doloribus facilis. Delectus
+ voluptatem maxime nobis deserunt eius eaque magni voluptas tempora hic
+ eveniet, laborum neque, minima, velit possimus. Assumenda consequatur quas
+ consectetur rem labore aspernatur, esse quaerat, ipsum iure maxime autem
+ necessitatibus veritatis similique suscipit impedit facere odio doloribus
+ dolores incidunt laudantium. Quaerat doloremque vel velit impedit
+ molestias consequuntur, provident animi officiis ipsam expedita suscipit.
+ Laborum alias quas veniam. Quos deserunt sapiente ex doloremque, expedita
+ architecto autem consequuntur. Commodi nobis voluptatibus cupiditate
+ accusantium iure molestias repellat, cumque voluptate distinctio, eum modi
+ voluptates, dignissimos illum molestiae eius magnam consectetur
+ consequatur hic? Quo hic quod labore ex quisquam quos error nesciunt
+ itaque cupiditate odit minus quasi dolorum non officiis doloremque,
+ consequatur id rerum explicabo recusandae! Reiciendis accusamus
+ consequatur corporis recusandae cupiditate libero illum aperiam.
+ Similique, atque deserunt sequi, quis, est id libero earum iusto hic
+ provident vel. Cupiditate, provident tempore voluptatum quibusdam id earum
+ sequi mollitia vitae aliquid, soluta iure veritatis officiis ipsum
+ incidunt non eum quos hic! Fugiat ut dicta dignissimos earum, alias iste
+ officia quidem placeat nesciunt officiis et magni autem fuga voluptates
+ temporibus porro numquam sint facilis dolorem aut aliquam ex tenetur
+ reiciendis. Commodi at aperiam hic sequi, ratione perferendis a qui
+ eligendi fuga optio nihil vel minus, facilis quos! Consectetur nesciunt
+ corporis odit temporibus officia porro, numquam, ratione cupiditate,
+ possimus deleniti nam. Dolorem blanditiis ad saepe odio dolorum veniam
+ doloremque error in voluptates eos ea asperiores itaque, dicta dolor quasi
+ nulla quis alias aliquid, nobis eveniet. Nam quam nisi architecto, eius
+ magnam aut exercitationem aspernatur doloribus, iusto, fugit amet quod
+ odio temporibus. Consectetur aspernatur ab voluptatem, in voluptatum
+ excepturi magni hic non, itaque ad quisquam! Ex inventore repellat magni
+ quaerat assumenda magnam adipisci consectetur sit explicabo officiis
+ possimus optio, voluptas doloribus rerum, doloremque similique sapiente
+ commodi. Eligendi ea porro, ad praesentium recusandae vitae laudantium
+ sunt placeat numquam tempora rerum nobis, eum cumque magnam non.
+ Aspernatur quae dolore nemo quasi saepe, id blanditiis repudiandae
+ provident molestias rerum nesciunt similique quos eaque ab facere earum
+ dolor illo ipsam? Debitis enim eius sint sequi dignissimos ipsa unde,
+ natus repudiandae accusamus laborum iste esse, quod, non ex praesentium
+ repellat ullam sapiente perferendis dolores? Impedit sequi consectetur
+ velit pariatur facilis omnis perspiciatis odit officiis libero, optio
+ delectus labore ullam unde a voluptate? Consectetur saepe sed harum fugit
+ magnam accusamus labore ab repudiandae aperiam quae blanditiis pariatur a
+ officiis ut esse eligendi amet veniam maiores architecto soluta magni,
+ ipsam repellendus dolores? Dolor libero sapiente non officia ullam quis
+ quas tenetur itaque laudantium consectetur fugiat deleniti repellat rem
+ dicta, voluptatibus aspernatur omnis nesciunt facere explicabo,
+ necessitatibus odio, sit ex recusandae? Praesentium illo quo tenetur vel
+ iure ipsa consectetur. reprehenderit. Ea architecto autem nemo voluptatem
+ aliquam deleniti ducimus unde?
+
+
+ Section 2
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni vel
+ voluptas debitis. Ipsa architecto aspernatur quaerat praesentium magni.
+ Perspiciatis saepe molestiae esse consequuntur dolorem exercitationem
+ asperiores sit, eos odio, est repellat veritatis voluptate modi.
+ Consequatur eos a quisquam quidem illum, labore aliquid sunt voluptas
+ mollitia saepe animi voluptate iure cum ducimus quaerat autem optio iste
+ suscipit tempore. Iure recusandae nam necessitatibus autem ipsa nihil
+ velit, sapiente hic provident, quisquam dignissimos voluptatum sint
+ deleniti magnam fuga ea enim. Quis rem perferendis perspiciatis molestiae
+ molestias excepturi atque consectetur blanditiis! Dolorem voluptatum
+ accusamus eaque ratione voluptatem quaerat atque dicta mollitia,
+ laudantium beatae placeat quia quasi neque obcaecati quidem consequatur
+ illum quae labore. Necessitatibus ducimus maxime velit asperiores in
+ magni! Dolores eum debitis itaque? Lorem ipsum dolor sit amet consectetur
+ adipisicing elit. Numquam, beatae quas! Asperiores fugit, deserunt
+ dignissimos quam, quis quidem totam cupiditate expedita et molestias
+ architecto nesciunt facere culpa accusantium id unde?Lorem ipsum dolor sit
+ amet consectetur adipisicing elit. Labore explicabo ad id! Quo ullam,
+ vitae expedita alias neque delectus pariatur vero aut excepturi beatae,
+ dolore ducimus nulla cumque perspiciatis consequatur incidunt ipsum
+ nostrum maiores quos quasi aspernatur fugiat maxime molestiae placeat.
+ Sint quasi officiis ea magnam dicta cumque libero quam ad ullam
+ reprehenderit et assumenda, rerum blanditiis consequatur obcaecati
+ quisquam voluptate quae eum porro doloremque, hic ipsum! Qui fugit
+ repellat nesciunt quidem quibusdam laboriosam fuga corrupti, vero rem
+ tenetur veritatis. Nemo minima esse reiciendis, saepe excepturi ducimus
+ qui voluptatum perferendis sequi corporis eum nostrum itaque sed adipisci,
+ omnis fugit pariatur! Ab illum laboriosam explicabo molestiae architecto
+ nihil doloribus ut nulla, eligendi dolorum maxime labore! Corporis harum
+ vel nemo pariatur repellat ea, amet molestiae eaque illum aliquid
+ voluptate voluptates voluptatem debitis magni cum architecto inventore
+ velit alias exercitationem? Ad corrupti facilis cum magni nulla illum!
+ Itaque aliquam maiores rerum ut praesentium consequuntur repellat aperiam
+ deleniti, veniam laboriosam excepturi ullam iste adipisci beatae laborum
+ et enim voluptatibus nisi autem dolorem laudantium nostrum doloremque
+ odio. Dolorem nesciunt est aut inventore recusandae nobis suscipit ab
+ maxime corporis dignissimos minus unde magnam, molestias error? Pariatur,
+ quibusdam fugiat aperiam doloribus voluptate repellat saepe sed nam hic
+ nesciunt quaerat vel laudantium culpa ad facere, earum odio impedit unde
+ mollitia amet? Rem, at ut nemo, tempora, nobis numquam expedita veritatis
+ voluptates eius dolores atque quibusdam minus nulla eaque accusamus
+ reprehenderit itaque unde velit! Suscipit iusto obcaecati blanditiis
+ dolores inventore, nemo ipsam sapiente sed qui voluptate laboriosam,
+ aliquid maxime recusandae tenetur illo. Commodi illo distinctio ab
+ accusantium maxime ipsum corporis, accusamus qui explicabo? Dolore,
+ explicabo. Itaque facilis non magni minus error harum consectetur nemo
+ architecto, eligendi maxime laboriosam voluptas neque nostrum delectus cum
+ sapiente quaerat veniam nisi distinctio sit vitae aspernatur autem!
+ Assumenda unde excepturi facilis nisi, iste atque ut dolor quos vero
+ reiciendis voluptatum itaque iure sapiente iusto eaque ullam quis quas est
+ laborum obcaecati aperiam cum ratione? Magnam sed nulla libero officia
+ cupiditate voluptas consequatur! Fugit, provident molestias facere
+ suscipit laborum aliquid repellendus voluptates tempora eos commodi dolore
+ omnis odit et hic modi animi, dolorem obcaecati accusantium nihil eum
+ delectus? Unde accusantium quasi magnam perspiciatis exercitationem
+ cupiditate at molestiae doloribus, architecto illum corporis tempore
+ dolores voluptas in explicabo culpa debitis alias, repudiandae natus?
+ Provident cum rem ipsum. Ipsum odio dolorem eos id debitis repellendus
+ placeat ratione tempore possimus voluptatibus error, ad deleniti
+ perspiciatis vel cum quibusdam, voluptate, ipsam voluptates nam voluptas
+ rem! Quo non expedita earum delectus temporibus, nostrum reiciendis alias
+ commodi laboriosam optio iusto consectetur, sint culpa minus ea cupiditate
+ distinctio voluptatem nisi deserunt! Illum eveniet quia aperiam dicta
+ enim. Quia illo non at! Eaque vel repellat, unde minima rem temporibus
+ sint quisquam, ipsum, modi ex blanditiis. Molestiae sit molestias ex
+ animi, officia aut, excepturi porro rem pariatur, ipsam ea recusandae
+ corporis quaerat alias dignissimos odit similique. Cum tenetur est neque
+ sed quis aperiam sapiente possimus adipisci nam, magni repellendus minus
+ id incidunt! Ipsa at tempore repellat incidunt tenetur quaerat provident!
+ Reiciendis odio at itaque nam! Quidem modi, distinctio excepturi nam
+ molestias quas, necessitatibus ad, iure error a nulla quae repellat ipsa
+ aliquam. Unde voluptatibus distinctio impedit. Porro, provident
+ repellendus ipsam voluptates veniam non laboriosam molestiae amet
+ accusantium consequatur illo necessitatibus quo officiis sapiente eligendi
+ rem iusto qui unde, illum, recusandae quod! Magnam eaque optio deserunt
+ officia quibusdam magni cumque dolor atque placeat cum consectetur vel
+ quam modi a voluptate obcaecati expedita, nulla itaque neque incidunt
+ totam, perspiciatis dicta minus! Voluptas error blanditiis corrupti
+ mollitia dolorem, illo dicta aliquid officiis tempora iste nulla facere,
+ quo hic! Reprehenderit ea facere labore voluptates dolore accusamus
+ ducimus placeat distinctio. Illum tempora labore obcaecati! Repudiandae,
+ at maxime perspiciatis ex, totam maiores deserunt a quibusdam dolores
+ cumque, cum facere! Esse nemo tempora impedit iure sapiente eligendi non
+ excepturi, reiciendis praesentium autem a architecto alias maiores totam
+ mollitia minima atque facilis quas! Perferendis vero corporis explicabo
+ autem mollitia esse beatae dignissimos error cumque assumenda tenetur
+ commodi, animi dolorem necessitatibus sapiente. Qui magnam adipisci
+ inventore repellendus consequatur tempore eveniet unde. Doloribus, officia
+ quasi et aperiam quidem sapiente asperiores iusto? Magnam, in sed?
+ Provident atque omnis temporibus voluptate? Maxime nesciunt nisi debitis.
+ Quo veniam corrupti itaque, vitae quae debitis? Adipisci ipsam voluptates
+ dolores mollitia nesciunt reiciendis error provident laboriosam? Officia
+ tempora alias numquam est asperiores modi veritatis et reiciendis nisi ut
+ corporis quam, odit deserunt omnis odio ad iure maxime explicabo aut
+ aliquam, rem adipisci exercitationem sunt! Fuga officiis, tempore,
+ doloribus rerum esse alias dolores nam, cupiditate vero non aperiam
+ praesentium perferendis ipsam voluptatem saepe exercitationem! Adipisci
+ quaerat delectus, quia magni provident commodi in sint quod inventore
+ explicabo! Repudiandae, veritatis dolorem obcaecati non possimus
+ cupiditate eos dolorum veniam commodi dignissimos esse blanditiis repellat
+ tempore impedit ex fugit incidunt autem, quo culpa minus! Quisquam
+ reprehenderit error esse excepturi, similique tempora quas quis. Facere
+ magnam quae earum hic numquam dignissimos quia exercitationem impedit
+ blanditiis cum soluta deleniti nobis cumque suscipit possimus placeat
+ iusto asperiores, perferendis fuga consectetur nesciunt ipsum fugit!
+ Fugiat ea magnam impedit? Voluptatem sit dicta quam quas nobis reiciendis
+ a commodi. Neque velit asperiores rerum, vel aliquid consequuntur itaque
+ vero cumque adipisci, culpa assumenda quia a tenetur. Ad temporibus saepe
+ dolore doloremque omnis suscipit quaerat dicta? Quasi molestiae totam
+ reprehenderit facere error ipsum laborum quia veritatis suscipit.
+ Praesentium pariatur dolores vitae dicta optio error, consectetur, ex
+ earum obcaecati exercitationem est, facilis nesciunt perferendis odit unde
+ quia corporis voluptates consequatur veniam recusandae ducimus eum ea
+ nihil. Natus nostrum illo eaque veniam. Ex itaque esse tempore quam.
+ Labore, excepturi vitae. Nobis totam minus officiis perspiciatis corrupti
+ ipsa, nemo ipsum numquam in adipisci! Amet molestias doloribus velit ea,
+ natus, sint optio dolores autem, earum nesciunt aliquid inventore
+ pariatur? Eos perspiciatis error veritatis quod pariatur non quisquam,
+ harum magnam saepe nihil soluta dolor laudantium, commodi eaque adipisci.
+ Deleniti laudantium omnis, provident odio eius ad officiis consequuntur
+ possimus id iusto sed velit! Ducimus dicta eius illo molestiae veniam
+ esse. Magni, explicabo adipisci excepturi illo quo molestiae ullam iste.
+ Eum alias, enim voluptatum beatae neque culpa ducimus repellendus dolore
+ illum perspiciatis ipsa consequatur fuga necessitatibus exercitationem,
+ rem minima, qui iure molestias nihil nulla explicabo cumque nemo esse
+ deserunt? Dignissimos aperiam accusamus quae deleniti voluptate laboriosam
+ iure officia adipisci, quaerat, commodi, amet ex nesciunt! Odio, aut
+ inventore tempora repellat id quidem facere dolore dicta omnis amet
+ praesentium esse ex vero a. Cum, ullam aliquam. Magnam debitis culpa
+ adipisci nulla at similique sunt amet, asperiores repellendus eaque earum
+ eius laborum facilis porro. Doloremque, iusto nostrum repellendus
+ assumenda quaerat exercitationem eius nemo porro ratione molestiae,
+ voluptas omnis, sint laudantium neque fugit nihil facere asperiores
+ expedita cumque laboriosam quibusdam dolorem consectetur eveniet!
+ Excepturi perspiciatis odit provident earum similique possimus a, esse
+ voluptatum in, sint et modi, dolorum molestias quasi vitae ea blanditiis
+ tempore quam soluta atque saepe. Necessitatibus, a. Nihil porro est
+ quaerat suscipit omnis praesentium explicabo fugiat distinctio, quis et
+ ipsum veniam ab animi illo dolore eum nostrum, unde nesciunt. Optio
+ officia tempora natus unde, harum neque deserunt est nobis, reprehenderit
+ praesentium illo iure cumque corrupti saepe asperiores! Harum sequi quos
+ atque soluta mollitia tempora error veritatis, perspiciatis repellendus
+ officiis illo quidem alias aut necessitatibus sit id eaque vero maxime.
+ Iste quidem commodi error, aperiam cum incidunt sed nemo necessitatibus,
+ hic omnis recusandae sequi est molestias? Iusto corrupti saepe in, tenetur
+ suscipit magni aut voluptas nostrum ipsam voluptatum debitis neque, ex
+ blanditiis quia non sunt totam odit, recusandae minus cupiditate! Earum
+ nobis harum molestiae iure voluptas veniam minus ad assumenda ut quod
+ tempore adipisci voluptatum cumque sequi, molestias quam eius ex non
+ soluta aperiam fugit voluptate, eum est veritatis? Possimus voluptate
+ porro atque aliquid est deleniti voluptates odit provident ratione veniam
+ consequuntur ex ipsum dolore, dolorum illum hic similique fugit sed
+ doloribus dicta doloremque sint labore explicabo. Hic, consequuntur ipsum!
+ Ducimus minima quia dicta maiores ea quis, in suscipit magni animi
+ laudantium mollitia excepturi recusandae soluta rerum consequatur,
+ eligendi obcaecati officia? Quibusdam ipsam ab, numquam enim molestias
+ perferendis assumenda in ea ad eos at, nobis pariatur facere eum odit
+ minima! Eaque, dolor eos voluptas excepturi harum dicta magni aspernatur
+ consequatur deserunt rerum dolorum illum, nihil ad pariatur quidem nostrum
+ sunt. Distinctio assumenda dolorum, soluta veritatis explicabo accusantium
+ mollitia! Ratione dolores molestias vitae? Libero fuga ut possimus nobis
+ magnam voluptates distinctio? Facere illo illum natus doloremque est
+ dolorem saepe, molestias quaerat aspernatur sapiente? Nihil maxime iste
+ placeat id voluptatem possimus eum doloremque ipsum aperiam rem, quo
+ quidem voluptatibus sint quae cum dolorem, culpa nemo. Tempora veniam
+ facilis provident nisi officiis, iure, dolore vero porro distinctio quam
+ asperiores modi consequatur eveniet quod, velit accusamus minus ea. Sunt
+ illum quo ullam consequuntur, sequi quia quidem repellat rem sed
+ dignissimos accusamus assumenda vel libero esse odit natus nihil itaque.
+ Beatae quibusdam earum, nulla odit eveniet aperiam libero esse tempore?
+ Ullam recusandae, maiores quaerat id dolores nobis? Exercitationem
+ molestias voluptatem nemo, itaque minus quam et ullam illo nihil quod
+ amet, debitis magnam vitae sed. Quos delectus quam est reiciendis tempore,
+ non, magni magnam laudantium aliquam sequi quis blanditiis nobis quibusdam
+ repellendus quia deleniti tempora nesciunt expedita velit natus
+ perferendis iure ipsum quae! At ut fugiat debitis exercitationem ducimus
+ voluptatibus vero provident! Nesciunt, adipisci! Nisi minima laudantium
+ quisquam, nostrum temporibus harum laboriosam velit ea non ut architecto?
+ Culpa maxime quia possimus quibusdam accusamus impedit beatae quis nisi a
+ atque consequuntur deleniti, distinctio neque? Nulla consectetur quibusdam
+ quos odio accusantium rerum ut sapiente voluptatum aliquid tempora itaque
+ debitis exercitationem voluptates dolor quaerat, explicabo facere nostrum
+ obcaecati delectus neque. Nemo, aliquam corrupti optio in ea nulla vel,
+ ducimus, nobis hic veritatis temporibus? Excepturi laborum placeat
+ explicabo iusto eos porro nihil optio inventore iste, quis, facere eius
+ deserunt vel ab facilis culpa neque in veritatis omnis! Consectetur
+ aliquam inventore natus facere sequi quo excepturi et optio sint soluta!
+ Odit corrupti asperiores cupiditate possimus odio tempora libero animi
+ labore quia? Inventore quaerat aut sunt recusandae adipisci dolores eius
+ alias voluptas non numquam molestias placeat maxime repellendus,
+ architecto rerum blanditiis harum. Fugit labore blanditiis quam, delectus
+ voluptas similique nulla doloremque maxime sit est eligendi pariatur
+ voluptate ducimus non earum qui consequatur libero! Adipisci quia nam
+ velit consequuntur omnis, at molestias obcaecati doloremque sit, quos
+ voluptatem ut nesciunt illo! Porro tempora aliquid veniam, unde
+ consequuntur debitis quaerat. Eaque ea est atque dolor dolorem nobis minus
+ nesciunt porro, animi quia nulla dignissimos. Incidunt delectus itaque
+ doloremque eius earum placeat distinctio cupiditate modi ut sit. Dolor, a
+ at. Distinctio recusandae tempora ex eligendi dolores? Quam, a unde eos,
+ cupiditate ratione magnam, sapiente praesentium reiciendis inventore ullam
+ totam commodi veritatis ut. Ipsum dolor ipsa ex aliquid, id rem itaque
+ quod saepe explicabo autem! Cupiditate aspernatur illo veritatis, ex
+ provident natus tempore est? Aliquid quod magnam maxime harum nihil optio
+ facere ut sed, sapiente enim. Rerum quam quaerat odio perferendis modi cum
+ earum qui provident repudiandae assumenda laudantium ratione dignissimos,
+ animi possimus obcaecati aperiam? Alias consequuntur rerum ipsa porro
+ minus mollitia deserunt dicta nostrum accusantium doloremque quia magnam
+ repellendus odit saepe at reprehenderit molestiae earum iusto, illum
+ totam! Nostrum minus reprehenderit culpa veritatis officiis asperiores
+ placeat! Ducimus et excepturi, impedit error illo repudiandae assumenda
+ quo. Odit nisi perferendis mollitia magnam hic, repudiandae soluta
+ inventore nemo, modi dolore accusamus! Accusamus, possimus quia eligendi
+ esse officiis minima sequi, minus voluptatem quod corporis architecto
+ dolor aspernatur dolorem optio nihil similique voluptas deleniti, non
+ recusandae assumenda fuga quo illo sit impedit. Fugiat quae delectus
+ aliquam suscipit nulla obcaecati numquam consectetur id temporibus, ipsa
+ consequatur molestias alias eos corrupti autem facere repellat voluptates.
+ Id aspernatur, possimus repudiandae dignissimos at cumque, similique
+ molestiae quaerat velit et fugit vitae magnam dolorum fugiat. Eaque rem,
+ neque provident eius earum, ab, laboriosam non quas nam unde consectetur
+ tempora tenetur facilis aut rerum ad magni? Provident modi consequatur
+ ducimus quisquam, eius iusto non quod, soluta hic, commodi doloribus
+ incidunt in sit sint culpa voluptate aut assumenda debitis autem deleniti?
+ Quia quam qui ipsam id perspiciatis sequi fugiat provident beatae
+ consequatur recusandae consectetur nisi doloribus magnam necessitatibus
+ autem odio commodi, dolores nulla adipisci. Magni eius dicta, repellat
+ laboriosam, esse velit molestias eaque aliquid dolore harum neque,
+ dignissimos maiores perferendis dolorum? psa eos quos deserunt, reiciendis
+ dolor omnis sequi minus, aut, necessitatibus magni corrupti. Qui quis
+ reprehenderit, error quod, nobis non aperiam autem, praesentium modi et
+ deserunt quia repellat natus recusandae maxime magnam ea delectus
+ asperiores voluptates sit dignissimos vero libero. Necessitatibus, dolore
+ quod dolorum excepturi minima voluptatum asperiores quae cum. Dicta
+ voluptatibus debitis maxime! Voluptatum fuga id accusantium natus hic
+ ducimus aperiam quis provident ratione quo. Deserunt molestiae corrupti
+ natus suscipit non vero debitis enim, odio accusantium similique sapiente
+ dolor maxime optio a doloribus eius est repudiandae accusamus cumque
+ aspernatur? Porro ipsum officia recusandae quas aspernatur at iste veniam.
+ Rerum ullam libero mollitia quos accusantium dignissimos voluptatum! Nihil
+ vitae recusandae qui quos nemo, officia laudantium ex, alias debitis
+ inventore repudiandae itaque similique? Architecto ipsam ea tempore
+ similique corrupti qui placeat necessitatibus esse blanditiis expedita
+ officiis quos, vero sint nobis obcaecati doloribus rerum a! Repellat
+ delectus voluptatum laboriosam, maiores hic dolorum accusantium veniam
+ omnis dolore ullam! Ad doloribus temporibus soluta, quos, cupiditate
+ accusantium ipsam in sapiente labore eos eum hic ex? Odio repudiandae
+ voluptatum blanditiis et quos, aperiam, ea nisi culpa qui fugit sint cum
+ quasi! Facere tenetur qui, asperiores ipsam similique rerum quae tempore,
+ laborum repudiandae quibusdam praesentium saepe a iure impedit, culpa eos
+ corrupti vitae dicta. Libero facilis consequatur, labore quisquam illum
+ rem quia consectetur earum veritatis accusantium officia quae tempora aut
+ voluptatibus sed porro maiores ab velit? Veritatis error at quas iusto
+ ducimus id tenetur, dolorum illo tempore dolor quod, explicabo, beatae
+ temporibus iure suscipit odit. Ex consequatur impedit possimus natus qui
+ totam quam incidunt. Blanditiis ratione quos quasi hic ab veniam itaque
+ fuga saepe similique eaque ullam tenetur distinctio, enim, alias quia amet
+ temporibus dicta, consequuntur mollitia.
+
+
+ Section 3
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, animi
+ eos. Dolores porro dolore, nulla maiores reprehenderit neque, culpa, eaque
+ quos minus iusto ducimus autem ex consequatur. Minus, maxime atque
+ exercitationem excepturi, soluta facilis quidem doloribus, impedit earum
+ molestias molestiae voluptatem voluptatibus odio. Asperiores suscipit eos
+ non maiores. Atque aspernatur quidem omnis, aut aperiam id perferendis
+ incidunt cum! Veritatis, aut nostrum quisquam quae nobis unde? Sint quos
+ illo facilis ex ab! Officiis enim aut nihil laborum adipisci alias a qui,
+ debitis, nulla recusandae repudiandae numquam aliquam labore sequi vitae
+ fugiat inventore. Laborum nam, eius veritatis nulla voluptas aperiam odit
+ fugiat repellendus ab est. Sed repellat corporis vitae unde eligendi
+ deleniti quae distinctio similique commodi eum, accusantium illum sint
+ modi reiciendis error, provident, magni voluptatem veniam quod. Quae
+ labore laboriosam repudiandae accusantium voluptatibus. Quaerat, ducimus
+ qui! Vel temporibus dolore dolorum quos magnam, non, aperiam quam,
+ pariatur provident possimus assumenda laboriosam! Quas illo quam dolorum
+ reprehenderit exercitationem veniam voluptate, libero esse, earum eum
+ saepe explicabo voluptas cum recusandae repellendus fugit praesentium odio
+ odit maiores obcaecati a accusantium neque veritatis temporibus! Dolorum
+ neque voluptas qui suscipit sunt tenetur excepturi unde eligendi
+ necessitatibus molestiae quo eum, dolore repudiandae, harum vitae
+ laboriosam iste? Obcaecati aspernatur aut minus nobis. Nostrum, sunt
+ incidunt nulla, quisquam, a iusto corporis impedit tempora repudiandae
+ obcaecati accusamus quaerat dolores perferendis quia veritatis vero harum
+ quidem provident ut architecto ab hic iste quos. At nesciunt tenetur odit
+ aut hic tempora magnam doloribus suscipit quae possimus consequuntur ipsum
+ adipisci vero, rerum, explicabo sit? Accusantium delectus laborum
+ repudiandae corrupti, incidunt iusto voluptates et omnis? Eaque fuga
+ consectetur magni ex nostrum illo cupiditate vitae quod, architecto, hic
+ eligendi laborum, quae pariatur alias molestias repellendus quis nesciunt
+ autem? Aliquid, quaerat voluptatum quae porro nostrum, eveniet
+ necessitatibus facere placeat, perferendis nemo ullam quo officia harum
+ dignissimos? Odio, possimus ullam! Unde enim debitis, vero voluptatum,
+ iusto, iste consequatur exercitationem natus sequi et doloribus. Repellat
+ tenetur hic autem excepturi iste eligendi laborum temporibus dolore,
+ quibusdam dicta asperiores itaque sed cumque eum dolor sunt? Molestias
+ quaerat aliquid, eligendi inventore, hic veniam maiores quasi, minima
+ quibusdam dolorum quidem facere. Consequuntur quidem repellat numquam
+ ratione nesciunt voluptatum, qui, sapiente placeat nihil, dolorem culpa
+ beatae alias neque. At quia, magnam itaque obcaecati amet aspernatur
+ maxime hic nihil omnis adipisci mollitia harum veritatis, voluptate totam
+ voluptas, quas perspiciatis fugit unde. Quaerat quos eius, amet ea quam
+ maiores consectetur perferendis ipsam animi aut, molestiae iure!
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+---
+title: getBoundingClientRect() Method
+description:
+duration: 900
+card_type: cue_card
+---
+
+#### Question 3
+
+How to retrive position and dimensions of an element usng getBoundingClientRect() method?
+
+**getBoundingClientRect():** The `getBoundingClientRect()` method is a JavaScript method that is used to retrieve the position and dimensions of an element relative to the viewport (the visible area of a web page). It returns a DOMRect object containing properties like top, left, right, bottom, width, and height, which describe the position and size of the element.
+
+#### Solution
+
+```javascript
+
+
+
+ Document
+
+
+
+
+ Hello
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+---
+title: Button working
+description:
+duration: 900
+card_type: cue_card
+---
+
+#### Question 4
+
+Make remove all button work and make individual delete btn work
+
+#### Solution
+
+```javascript
+
+
+
+ Document
+
+
+ Remove All
+
+
+ Task - 1
+ delete
+
+
+ Task - 2
+ delete
+
+
+ Task - 3
+ delete
+
+
+ Task - 4
+ delete
+
+
+
+
+
+
+```
+
+**Output:**
+
+
+
+
+
+#### Question 5
+
+Create a button that is destroyed by clicking on it but two new buttons are created in it's place.
+
+#### Solution
+
+```javascript
+
+
+
+ Document
+
+
+
+ double
+
+
+
+
+
+
+```
+
+**Output:**
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/3_Dynamic DOM.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/3_Dynamic DOM.md
new file mode 100644
index 0000000..51525d4
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/3_Dynamic DOM.md
@@ -0,0 +1,742 @@
+# Dynamic DOM (Consume and work with an API)
+
+
+
+## Agenda
+* Create a weather app using an API.
+* We will be using the "weather API" for getting the data of real-time weather and use that data in our app.
+* Pre-requisites required for this app include **JSON**, **API** which will be covered in this lecture itself.
+
+
+
+### JSON
+* It stands for JavaScript Object Notation which is a data representation format.
+* Let us consider an example to understand. Suppose, you have a farm and you sell products like vegetables, fruits, eggs etc. When a customer comes, everything is organized in different sections. You won't be storing everything inside a single container. It will be segregated like this-
+
+
+
+When a customer demands a product, that particular product will be given to them. In the same way, an API also works.
+
+**API**
+* Stands for **Application Programming Interface**.
+* It is an interface where all the data and protocols can be stored in a section-wise manner.
+* Just like the above example in the way we served the request to the customers, the data will be saved in an interface called as API
+* Consider that apart from the customers, the you also cater to the needs of a restaurant by providing them with the products that they need.
+* In this way, the demands of both customers and restaurant gets their demands fulfilled.
+* These customers are basically **clients**. The shops are nothing but **servers**.
+> Ask the students if they are familiar with the concept of client and server.
+
+* The data is being requested from an external factor. Whatever the client needs, he will seek that from the external source.
+* There are different use cases of various data and it is impossible to store it in a single place.
+
+**Key points**
+* API acts as a bridge between client and server.
+* It has huge sets of data that can be used for applications.
+* API not only has data, but also has protocols, method implementations etc.
+
+#### Example
+Consider you want to order a burger from Zomato or Swiggy. You decide to order it from Burger King. For that, Zomato will need to use the API of burger king to get the data of Burger king.
+
+* This data is coming from the API.
+* The API is stored in JSON format.
+
+
+
+
+> Ask students if they have heard about APIs, then mention that some of the experienced folks might have heard about this. Earlier, REST APIs and SOAP APIs were used to store data and write APIs. Now JS devs thought about introducing JSON which is similar to the JS Syntax.
+
+
+**Key points**
+* JSON stands for JavaScript Object Notation.
+* It has a format similar to that of objects in JS. It has key-value pairs.
+* The value can be obtained by using a key.
+* The JSON file should end with '.json' extension.
+
+
+>Open VSCode and create a Farm.json file.
+
+Coming to the previous example, a farm can have name, registration number, number of goods etc. There are many farms as such. **We want to create a dataset of all the farms where we can see data of each individual farm.**
+
+
+#### Code
+
+First start with this code, and tell the students to ensure that the **keys** are enclosed in **double quotes** so that it does not throw an error.
+```javascript
+
+[
+ {
+ "name":"Farm 1",
+ "products":["Eggs","Milk","vegetables"],
+ "registrationNo":1234,
+ "Employees":70,
+ "isOperating": true
+ }
+]
+```
+
+This is the first object. Whenever we are creating different objects within the same JSON file, ensure that the **keys remain the same** for all the objects. They should **not change**.
+
+The code for 3 farms is-
+```javascript
+
+{
+ {
+ "name":"Farm 1",
+ "products":["Eggs","Milk","vegetables"],
+ "registrationNo":1234,
+ "Employees":70,
+ "isOperating": true
+ },
+ {
+ "name":"Farm 2",
+ "products":["Eggs","Milk","Cheese"],
+ "registrationNo":12345,
+ "Employees":60,
+ "isOperating": false
+ },
+ {
+ "name":"Farm 1",
+ "products":["vegetables"],
+ "registrationNo":12346,
+ "Employees":30,
+ "isOperating": true
+ }
+
+}
+```
+
+> Show some examples of APIs to the students. Tell them that we will be creating a weather app today and open it.
+> https://www.weatherapi.com/
+> Inform that they need to sign-in.
+
+* Find the API key and paste it under the **API explorer** tab.
+* Select the protocol as **HTTPS**.
+* Click on show response. You can see the JSON format in the response section.
+
+Proceeding to our code, create an `index.html` file. Inside the script tag, paste the above JSON code.
+
+```javascript
+
+
+
+ Document
+
+
+
+
+
+```
+
+You will see an array of objects. This is not in the JSON format. To obtain the JSON format, we will enclose the objects in backtick.
+
+**Key points**
+* To convert JSON to JavaScript readable code, we use the **JSON.parse()** method
+* The data received from a web server is a string, so to convert we use the JSON.parse() method to convert to a JavaScript object.
+* When working with APIs, we get everything in string, so to parse that JSON, we use the JSON.parse() method.
+
+
+>Brief the students about the steps to sign up on the https://www.weatherapi.com/. Ask them to do it accordingly.
+
+* After logging in, there will be an API key generated which will be unique for everyone. Copy that key first.
+* Under **API Response Fields**, you can check all the fields that the API is providing. There are many options available.
+* Under **API Explorer**, paste the key. You will see the API Call as follows.
+
+
+
+
+Here the "q" stands for **query** and here we are querying for London. The call is basically our URL and inside this we also have our API key and the search query.
+
+* Apart from the current data, you can also get the Forecast, Future data as provided by the API.
+
+
+
+
+
+> Inform the students that For this project, we will be focusing on the JS part, so the CSS part has already been created and we just have to paste it.
+> Guide the students about the final interface before starting the code.
+
+
+
+
+**Step 1**
+Create `index.html`, `style.css` and `index.js` files in VSCode.
+
+**Step 2**
+Inside the `index.html` file, we will be creating various divisions for various parameters like temperature, location, time and date etc.
+
+
+
+In the other division for weather condition, we will display an emoji along with the weather condition.
+
+
+
+**Step 3**
+Create a form which contains an input field and a button also.
+
+
+
+> Write a step-by-step code for each step.
+
+**Code**
+```javascript
+
+
+
+ Weather app Class
+
+
+
+
20
+
+
Location
+
Random time and Date
+
+
+
+
+
Condition
+
+
+
+
+
+
+
+
+
+
+
+```
+
+Execute the above code, the output is
+
+
+
+This is a simple HTML code, we will have to add CSS to style it.
+
+> Inform the students that we will not focus on the CSS part as it is simple. We will just paste the code.
+
+**Style.css**-
+```css
+@import url("https://fonts.googleapis.com/css2?family=Economica&family=Grape+Nuts&family=Roboto:wght@100;300;400;700;900&display=swap");
+
+* {
+ margin: 0%;
+ padding: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+.container {
+ width: 100%;
+ height: 100vh;
+ background-color:#01161E;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.weather {
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ color: white;
+}
+
+.weather > div {
+ margin: 0.625rem;
+}
+
+.weather1 {
+ font-size: 4rem;
+}
+
+.weather p {
+ font-size: 2rem;
+}
+.weather span {
+ font-size: 0.75rem;
+}
+
+.weather3 span {
+ margin: 0.3rem;
+}
+
+.weather3 img {
+ width: 2rem;
+}
+nav {
+ height: 100px;
+ padding: 1rem 0;
+ position: absolute;
+ bottom: 0%;
+ width: 100%;
+ background-color: rgba(180, 177, 177, 0.202);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+nav form {
+ width: 70%;
+ grid-template-columns: 5fr 1fr;
+ display: grid;
+}
+
+.searchField {
+ font-size: 1.1rem;
+ outline: none;
+ color: white;
+ background-color: transparent;
+ padding: 1rem 0;
+ border: none;
+ border-bottom: 2px solid white;
+ width: 98%;
+}
+
+nav form button {
+ background-color:#4ECDC4;
+ font-size: 1.1rem;
+ color: white;
+ outline: none;
+ border: none;
+ cursor: pointer;}
+```
+
+After executing the CSS code, the output is
+
+
+
+**Index.js**-
+
+We will see how to get data from an API. We will use the **fetch API**. The **fetch()** method will be used here.
+> Type fetch method in the browser and just show the docs as a glimpse.
+
+The URL will be passed to the fetch() method as a parameter. We will understand how to use the fetch() method inside our JS code.
+
+We will be coming across various terms like async, await but they will be covered in depth in the later lectures.
+
+Before diving deep into the fetch() method, we will understand the try and catch block which is a pre-requisite for this.
+
+The try block is used to execute the code that might encounter an error. An error can lead to unexpected termination of the program. Hence we put it inside the try block and any error that might be encountered by the try block is sent to the catch block. This is the exception handling concept.
+
+In the try block, we will define the URL which is the API call.
+
+```javascript
+ let url = `https://api.weatherapi.com/v1/current.json?key=35af7ff606db422880d141328231305&q=${target}&aqi=no`
+ ```
+Here we have wrapped the url in backticks so that we can use the string template literals which denoted bt the `${}` symbol.
+
+* Let us understand using a real-life analogy about asynchronous programming.
+
+* Suppose you are teaching a batch of 100 students. One student asks doubt and it takes 5 minutes to resolve it. Another student asks a doubt which takes another 5 minutes. One more student asks a doubt and it takes 5 minutes. To solve the doubts of 3 students, 97 students has to waste their 15 minutes.
+
+> Ask the students what could a better approach for this?
+
+* A better approach is to teach first and in the last few minutes of the lecture, take up the doubts of the students. In this way, the time of the other students is not wasted.
+
+* Now just replace students with functions. The first approach is the synchronous programming where everything happens in a sequence.
+
+* In synchronous programming, important instructions get blocked due to some previous instructions, which causes a delay in the user interface. **Asynchronous** code execution allows to execution next instructions immediately and **doesn't block the flow** because of previous instructions.
+
+**Key points**
+* In APIs, we will be using the asynchronous JS.
+* We will be using **async** and **await** keywords which are important.
+* The **async** keyword needs to be added before the function which tells the function that it is asynchronous.
+* The **await** keyword tells that it needs wait till the data comes.
+
+```javascript
+const response = await fetch(url)
+```
+
+Now let's run the code till now.
+
+```java
+let target = "Pune"
+async function fetchData(target){
+ try {
+ let url = `https://api.weatherapi.com/v1/current.json?key=8b6d5f63a04a485fa5351525232908&q=${target}&aqi=no`
+
+ const response = await fetch(url)
+
+ console.log(response)
+ }
+ catch(error){
+ console.log(error)
+ }
+}
+
+fetchData(target)
+```
+
+We will obtain this
+
+
+
+This is not in the JSON format. We will have to convert this to JSON by using the **.json() method**.
+
+We will add this line-
+```javascript
+const data = await response.json()
+console.log(data)
+```
+
+We will receive the data in JS object format.
+
+Now we will **extract dynamic values from** the object.
+
+Look into the format, to obtain temperature, we will go under `current` and then in `temp_c`
+
+
+
+Let us write the required values.
+
+```java
+let currentTemp = data.current.temp_c
+let currentCondition = data.current.condition.text
+let locationName = data.location.name
+let localTime = data.location.localtime
+let conditionEmoji = data.current.condition.icon
+```
+We will print these values on the console to see if they have been fetched properly or not. Output is
+
+
+
+
+To print and display the data on the website, we will use DOM. The data has to be changed dynamically and for that, DOM has to be used. We will use the classes earlier written in HTML to target and dynamically set values. The code for DOM part-
+
+```javascript
+const temperatureField = document.querySelector(".temp");
+const cityField = document.querySelector(".time_location p");
+const dateField = document.querySelector(".time_location span");
+const emojiField = document.querySelector(".weather_condition img");
+const weatherField = document.querySelector(".weather_condition span");
+const searchField = document.querySelector(".searchField");
+const form = document.querySelector("form");
+```
+> Just explain in short about the variable and which class it is targeting. Eg- `temperatureField` variable is targeting the `temp` class.
+
+Now, we want to make our search bar work. We will add an event listener to it. Whenever there is an event performed, the event listener will execute the callback function passed as a parameter.
+
+The search function changes the value of the target(the target city) to the value that we have entered. After typing the city and pressing the submit button, the form will get submitted and the "submit" event will get invoked.
+
+The `fetchData` function will be passed the value of the target that we have entered.
+
+```javascript
+form.addEventListener('submit' , search )
+
+//search- callback function
+
+function search(){
+ target = searchField.value
+
+ fetchData(target)
+}
+
+```
+
+The code till now is
+
+```javascript
+const temperatureField = document.querySelector(".temp");
+const cityField = document.querySelector(".time_location p");
+const dateField = document.querySelector(".time_location span");
+const emojiField = document.querySelector(".weather_condition img");
+const weatherField = document.querySelector(".weather_condition span");
+const searchField = document.querySelector(".searchField");
+const form = document.querySelector("form");
+
+let target = "Pune"
+async function fetchData(target){
+ try {
+ let url = `https://api.weatherapi.com/v1/current.json?key=8b6d5f63a04a485fa5351525232908&q=${target}&aqi=no`
+
+ const response = await fetch(url)
+
+ const data = await response.json()
+
+ form.addEventListener('submit' , search )
+
+ function search(){
+ target = searchField.value
+
+ fetchData(target)
+ }
+ console.log(data)
+
+ let currentTemp = data.current.temp_c
+ let currentCondition = data.current.condition.text
+ let locationName = data.location.name
+ let localTime = data.location.localtime
+ let conditionEmoji = data.current.condition.icon
+ console.log(currentTemp ,currentCondition ,locationName , localTime , conditionEmoji )
+ }
+ catch(error){
+ console.log(error)
+ }
+}
+fetchData(target)
+```
+
+After we run the code, we see that even after entering the name of the city in the search bar, the results are not getting updated. It is because, the form is submitting the value somewhere and page is getting refreshed. This is the nature of the form that after it is submitted, the page is refreshed.
+
+For that, we use the **preventDefault()** method. Our code for the `search()` function becomes-
+
+```javascript
+function search(e){
+
+ e.preventDefault()
+ target = searchField.value
+
+ fetchData(target)
+}
+```
+
+Now, when we search for a city, the output is obtained on the console.
+
+
+
+
+Now, we will update the data on our page. A function `updateDOM()` will be created which will contain the values to be updates as parameters.
+
+
+>First demonstrate this example. We will use the **innerText()** method to set the value inside the HTML.
+
+```javascript
+function updateDOM(temp , locationName , time , emoji , condition){
+
+ temperatureField.innerText = temp
+
+ cityField.innerText = locationName
+
+
+ emojiField.src = emoji
+
+ weatherField.innerText = condition
+}
+```
+
+
+
+
+**ADD DAY**
+
+We can also add day along with the date. Here, **date objects** will be used.
+
+> console.log(time) then ask the students whether the date or the time is useful to get the day. The answer is date.
+
+Since the date and time is separated by a space, we will use the **split()** method to separate them.
+
+
+
+The split() method splits the value at the delimiter provided and returns an array. Here. after splitting the above value, we get the date at 0th position and time at 1st position.
+
+
+
+```javascript
+const exactTime = time.split(" ")[1]
+const exactdate = time.split(' ')[0]
+```
+
+To convert date to day, we follow-
+```java
+const exactDate = new Date(exactdate).getDay()
+```
+
+The output is a number which indicate the day in form of a number.
+
+
+
+We will write another function that converts the day number to day.
+
+```javascript
+function getDayFullName(num) {
+ switch (num) {
+ case 0:
+ return "Sunday";
+
+ case 1:
+ return "Monday";
+
+ case 2:
+ return "Tuesday";
+
+ case 3:
+ return "Wednesday";
+
+ case 4:
+ return "Thursday";
+
+ case 5:
+ return "Friday";
+
+ case 6:
+ return "Saturday";
+
+ default:
+ return "Don't Know";
+ }
+ }
+```
+
+Our final code is
+
+```javascript
+const temperatureField = document.querySelector(".temp");
+const cityField = document.querySelector(".time_location p");
+const dateField = document.querySelector(".time_location span");
+const emojiField = document.querySelector(".weather_condition img");
+const weatherField = document.querySelector(".weather_condition span");
+const searchField = document.querySelector(".searchField");
+const form = document.querySelector("form");
+
+
+let target = 'Pune'
+
+
+form.addEventListener('submit' , search )
+
+
+function search(e){
+
+ e.preventDefault()
+ target = searchField.value
+
+ fetchData(target)
+}
+
+
+
+async function fetchData(target){
+ try {
+ let url = `https://api.weatherapi.com/v1/current.json?key=35af7ff606db422880d141328231305&q=${target}&aqi=no`
+
+ const response = await fetch(url)
+
+ const data = await response.json()
+
+ console.log(data)
+
+
+ let currentTemp = data.current.temp_c
+ let currentCondition = data.current.condition.text
+ let locationName = data.location.name
+ let localTime = data.location.localtime
+ let conditionEmoji = data.current.condition.icon
+
+ console.log(currentTemp ,currentCondition ,locationName , localTime , conditionEmoji )
+
+
+ updateDOM(currentTemp , locationName ,localTime ,conditionEmoji , currentCondition)
+
+ } catch (error) {
+ console.log(error)
+ }
+}
+
+
+
+function updateDOM(temp , locationName , time , emoji , condition){
+
+
+ console.log(time)
+
+ const exactTime = time.split(" ")[1]
+ const exactdate = time.split(' ')[0]
+
+
+
+
+ const exactDay = getDayFullName(new Date(exactdate).getDay())
+ console.log(exactDay)
+
+
+
+ temperatureField.innerText = temp
+
+ cityField.innerText = locationName
+
+ dateField.innerText = `${exactTime} ${exactDay} ${exactdate}`
+
+
+ emojiField.src = emoji
+
+ weatherField.innerText = condition
+
+
+}
+
+
+
+function getDayFullName(num) {
+ switch (num) {
+ case 0:
+ return "Sunday";
+
+ case 1:
+ return "Monday";
+
+ case 2:
+ return "Tuesday";
+
+ case 3:
+ return "Wednesday";
+
+ case 4:
+ return "Thursday";
+
+ case 5:
+ return "Friday";
+
+ case 6:
+ return "Saturday";
+
+ default:
+ return "Don't Know";
+ }
+ }
+
+
+fetchData(target)
+```
\ No newline at end of file
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/4_Kanban Board - 1(Design and Structure of the App).md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/4_Kanban Board - 1(Design and Structure of the App).md
new file mode 100644
index 0000000..f31f5ab
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/4_Kanban Board - 1(Design and Structure of the App).md
@@ -0,0 +1,462 @@
+
+
+## Agenda
+**Topics to cover in Javascript:**
+
+Certainly, here are the headings for the provided topics:
+
+1. **Kanban Board**
+2. **Create and Update Task**
+3. **Lock and Unlock Tasks**
+4. **Colors**
+5. **Pop-up Dialog Box**
+6. **Delete**
+8. **Local Storage**
+
+We will try to cover most of these topics in today's sessions and the remaining in the next.
+
+So let's start.
+
+
+
+## Demo of the project:
+
+Initially showing the demonstartion of the adding task, setting the colors, unlock/lock feature, filtering based on the colors and delete feature.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Discussing about the local storage and the crud operation and also try to cover the drag-drop functionalities, accessibility.
+
+On the highest level, mainly there are two components, to mark those will be using the two divs namely toolbox-container and maincontainer.
+
+Inside the toolbox container first there are different tags for colors which we ca have and after that these two boxes of + and X. Apart fro that we can those ticket also.
+
+
+### WireFrame of the Kanban Board
+
+
+
+In toolbox container there are two container namely toolbox-priority-cont and action-btn-cont.
+* Inside the toolbox-priority-cont we are having the four divs of colors(pink, blue, purple and green).
+* In the toolbox-priority-cont having the two divs of add-btn and remove-btn. Alaso adding the font from the cdn font library.
+
+
+Opening the live server and just seeing the effects of the added code till now and nothing is visible till now since no css has been added.
+
+```htmlembedded
+
+
+
+ KanbanBoard
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+Nothing is visible as no css has been added.
+
+
+
+Let's start creating the css file namely style.css, and adding the code for the colors first by creating the css variables for the colors like pink, green, purple etc.
+
+```css
+/* create css variables */
+:root{
+ --ligthBackground: #F9F5EB;
+ --background:#E4DCCF;
+ --red:#EA5455;
+ --blue:#002B5B;
+ --green:#245953;
+}
+
+*{
+ box-sizing: border-box;
+}
+
+body{
+ margin: 0;
+ padding: 0;
+ background-color: var(--background);
+}
+```
+
+Now adding the css for the toolbox container starting with height, background-color and then adding the toolbox-priority-container by providing it with height, background-color. Same for the action-btn also same color and height.
+
+```css
+/* styling starts from here */
+
+
+/* ************toolbox_cont **********/
+.toolbox-cont{
+ height: 5rem;
+ background-color: var(--blue);
+ display: flex;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ width: 100vw;
+}
+```
+
+
+
+Now adding the display: flex in the parent conatiner namely in the toolbox-container in the css code. Add margin-left in the toolbox-priority-cont and margin-left in the action-btn-cont. Also change the background-color of the action-btn-cont to the light.
+
+Now add the color blocks in the toolbox-priority-cont. Providing the height and width to the color block. Also add the display:space-evenly and align-items:center to the parent class.
+
+```css
+.toolbox-priority-cont{
+ height: 3rem;
+ width: 18rem;
+ background-color:var(--ligthBackground);
+ margin-left: 5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+.action-btn-cont{
+ height: 3rem;
+ width: 10rem;
+ background-color:var(--ligthBackground);
+ margin-left: 5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.color{
+ height: 1.5rem;
+ width: 3rem;
+}
+.red{
+ background-color: var(--red);
+}
+
+.blue{
+ background-color: var(--blue);
+}
+
+.green{
+ background-color: var(--green);
+}
+
+.black{
+ background-color: black;
+}
+```
+
+
+
+
+
+
+
+
+
+Provide the font size to the both add-btn and remove-btn and also add the display:flex, align-item:center and justify-content:space-evenly in the action-btn-cont.
+
+```css
+.add-btn,.remove-btn{
+ font-size: 1.25rem
+}
+.action-btn-cont{
+ height: 3rem;
+ width: 10rem;
+ background-color:var(--ligthBackground);
+ margin-left: 5rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+```
+
+
+Now let's add the hover effect to the button of add-btn and remove-btn as follows:
+```css
+.add-btn:hover{
+background-color: #4BB543;
+}
+.remove-btn:hover{
+background-color: #4BB543;
+}
+```
+
+**Asking Question?**
+
+Can you add the hover effect to these color boxes in the nav bar?
+**Ans:** You can try by themself.
+
+Now lets start creating the modal with its html and css structure as follows:
+
+```htmlembedded
+
+
+```
+
+
+
+```css
+ .modal-cont{
+ height: 50vh;
+ width: 45vw;
+ display: flex;
+ background-color: lightsalmon;
+ position: absolute;
+ top:30%;
+ left: 27%;
+ display: none;
+
+
+}
+ .textArea-cont{
+ height: 100%;
+ width: 75%;
+ resize: none;
+ outline: none;
+ border: none;
+ background-color: #dfe4ea;
+ font-size: 2rem;
+ color: black;
+ }
+ .priority-colors-container{
+ height: 100%;
+ width: 25%;
+ display: flex;
+ flex-direction: column;
+ background-color: #4b4b4b;
+ align-items: center;
+ justify-content: space-around;
+
+ }
+ .priority-color{
+ height: 3rem;
+ width: 5rem;
+ }
+
+ .active{
+ border: 5px solid lightsalmon;
+ }
+```
+
+
+
+
+
+
+
+
+
+
+
+This CSS code defines styles for a modal container and its components:
+
+1. **.modal-cont:**
+ - Defines the modal's dimensions and appearance.
+ - Positioned absolutely with a specific top and left offset.
+ - Initially hidden with `display: none`.
+
+2. **.textArea-cont:**
+ - Represents a text area within the modal.
+ - Takes 75% of the modal's width.
+ - Has specific styling for background color, font size, and no borders.
+
+3. **.priority-colors-container:**
+ - A container for priority color elements.
+ - Takes 25% of the modal's width.
+ - Aligns items vertically and adds a background color.
+
+4. **.priority-color:**
+ - Represents priority color elements.
+ - Fixed dimensions for each element.
+
+5. **.active:**
+ - Adds a border to elements with this class, using a lightsalmon color.
+
+Overall, these styles are likely used for a modal interface, with a text area and priority color options.
+
+Now we will be working for the buttons of + and X by giving the event listener to them. Here is a basic structure of the event Litener for them as follows:
+
+```htmlembedded
+Eventlistener.(click):
+let flag=false
+flag=true
+if(flag=true){
+modal visible
+}
+```
+
+```javascript!
+let addBtn = document.querySelector('.add-btn')
+let modalCont = document.querySelector('.modal-cont')
+let addTaskFlag = false
+
+addBtn.addEventListener('click' , function(){
+ // Display the model
+ addTaskFlag = !addTaskFlag
+
+ if(addTaskFlag == true){
+ modalCont.style.display = 'flex'
+ }
+ else{
+ modalCont.style.display = 'none'
+ }
+
+})
+```
+This JavaScript code adds functionality to a button:
+
+1. `addBtn` and `modalCont` variables are defined to select HTML elements with specific classes.
+
+2. An event listener is added to `addBtn` for a click event.
+
+3. When the button is clicked, a flag (`addTaskFlag`) toggles between true and false.
+
+4. If `addTaskFlag` is true, the modal container (`modalCont`) is displayed by changing its `display` style property to 'flex'.
+
+5. If `addTaskFlag` is false, the modal container is hidden by setting its `display` property to 'none'.
+
+This code toggles the visibility of the modal when the button is clicked.
+
+
+Now lets create the structure of the task ticket as follows:
+
+```htmlembedded
+
+
+
+
+```
+Now also give the styling to the task ticket:
+```javascript
+ .modal-cont{
+ height: 50vh;
+ width: 45vw;
+ display: flex;
+ background-color: lightsalmon;
+ position: absolute;
+ top:30%;
+ left: 27%;
+ display: none;
+}
+.ticket-cont{
+ height: 12rem;
+ width: 15rem;
+ background-color: coral;
+}
+.ticket-color{
+ height: 1rem;
+}
+
+.ticket-id{
+ background-color: yellow;
+ height: 2rem;
+}
+```
+
+
+
+
+
+
+
+
+
+
+This CSS code defines styles for a modal container and its associated ticket elements:
+
+1. **.modal-cont:**
+ - Defines the modal's dimensions and appearance.
+ - Positioned absolutely with specific top and left offsets.
+ - Initially hidden with `display: none`.
+ - Has a flex display and a light salmon background color.
+
+2. **.ticket-cont:**
+ - Represents a ticket container.
+ - Fixed height and width for each ticket.
+ - Coral background color.
+
+3. **.ticket-color:**
+ - Represents a color strip on the ticket.
+ - Fixed height and width, typically used for visual categorization.
+
+4. **.ticket-id:**
+ - Represents the ID section of the ticket.
+ - Has a yellow background color and a specific height.
+
+These styles appear to be used for creating a modal with tickets, each with a color strip and an ID section.
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/5_Kanban Board-2 (DOM Manipulation).md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/5_Kanban Board-2 (DOM Manipulation).md
new file mode 100644
index 0000000..d75e346
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/5_Kanban Board-2 (DOM Manipulation).md
@@ -0,0 +1,292 @@
+# Full Stack LLD & Projects: JavaScript-8: Kanban Board-2(DOM Implementation & Manipulation)
+
+
+
+**Agenda of this Lecture:**
+
+* Ticket Generation
+* Adding Task, colour, ID to generated ticket
+* Ticket Removal
+* Locking Mechanism
+* Editing Ticket Content
+
+
+
+### Explanation
+
+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.
+
+In the file `script.js` we will add this function:
+
+```javascript
+function createTicket() {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+}
+```
+
+Now we will add **class** to this particular div using the `setAttribute` :
+
+```javascript
+function createTicket() {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+
+ // Set the class attribute of the ticket container
+ ticketCont.setAttribute('class', 'ticket-cont'); //
+}
+```
+
+Whenever this function is called, a new ticket will be created with class `ticket-cont`.
+
+As `ticketCont` contains 3 more divs inside, we will create them inside this function using `innerHTML` function
+
+```javascript
+function createTicket() {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+ ticketCont.setAttribute('class', 'ticket-cont');
+
+ // Create the HTML content for the ticket container
+ ticketCont.innerHTML = `
+
+
12345/div>
+
Random Task
`
+
+ mainCont.appendChild(ticketCont)
+```
+
+So we are passing the HTML codes here, so whenever a ticket is created , these 3 divs will also be there.
+
+
+
+
+
+### Explanation
+
+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.
+
+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.
+
+```javascript
+modalCont.addEventListener('keydown', function(e) {
+ let key = e.key;
+
+ if (key === 'Shift') {
+ createTicket(); // Call the createTicket function to create a new ticket
+ modalCont.style.display = 'none'; // Hide the modal
+ textArea.value = ''; // Clear the textarea's content
+ }
+})
+```
+
+
+
+
+### Explanation
+
+As of now everything like Task, color and ID of the created task is static. In this we will be making it dynamic.
+
+
+
+So we can choose color, and the ticket will come with a randomly generated ID.
+
+To identify and select these priority color divs, we will use `querySelectorAll` method
+
+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:
+
+```javascript
+let allPriorityColors = document.querySelectorAll('.priority-color');
+
+allPriorityColors.forEach(function(colorElem) {
+ colorElem.addEventListener('click', function() {
+ // Remove 'active' class from all priority colors
+ allPriorityColors.forEach(function(priorityColorElem) {
+ priorityColorElem.classList.remove('active');
+ });
+
+ // Add 'active' class to the clicked colorElem
+ colorElem.classList.add('active');
+
+ // Implement additional logic to assign the selected color to a task
+ // For example, you can use this space to perform your task color assignment
+ });
+});
+```
+
+In this code, when a color element with the class 'priority-color' is clicked, the event listener:
+
+* Iterates through all `allPriorityColors` and removes the 'active' class from each element.
+* Adds the 'active' class to the clicked `colorElem`.
+* Implements additional logic to assign the selected color to a task
+
+
+
+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.
+
+Now we will have a **color array**.
+
+We define an array of colors and updates the modalPriorityColor variable based on the selected color when a color element is clicked.
+
+```javascript
+let colors = ["lightpink", "lightgreen", "lightblue", "black"];
+let modalPriorityColor = colors[colors.length - 1]; // Default to black
+
+let allPriorityColors = document.querySelectorAll('.priority-color');
+
+allPriorityColors.forEach(function(colorElem) {
+ colorElem.addEventListener('click', function() {
+ // Remove 'active' class from all priority colors
+ allPriorityColors.forEach(function(priorityColorElem) {
+ priorityColorElem.classList.remove('active');
+ });
+
+ // Add 'active' class to the clicked colorElem
+ colorElem.classList.add('active');
+
+ modalPriorityColor = colorElem.classList[0]; // Update modalPriorityColor
+ });
+});
+```
+
+In this code:
+
+* You define an array colors with color names.
+* `modalPriorityColor` is initially set to the last color in the array ('black') as the default.
+* The event listener loop iterates through each color element and adds a click event listener.
+* When a color element is clicked, the 'active' class is toggled as before.
+* Additionally, the `modalPriorityColor` is updated to match the class name of the clicked color element, indicating the selected color.
+
+
+
+**Passing ticketColor to createTicket Function:**
+
+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.
+
+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.
+
+```javascript
+function createTicket(ticketColor) {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+ ticketCont.setAttribute('class', 'ticket-cont');
+
+ // Create the HTML content for the ticket container
+ ticketCont.innerHTML = `
+
+
12345
+
Random Task
+ `;
+
+ // Append the ticket container to the main container
+ mainCont.appendChild(ticketCont);
+}
+
+// Event listener for 'Shift' key press in modalCont
+modalCont.addEventListener('keydown', function(e) {
+ let key = e.key;
+
+ if (key === 'Shift') {
+ createTicket(modelPriorityColor); // Create a new ticket with the selected color
+ modalCont.style.display = 'none'; // Hide the modal
+ textArea.value = ''; // Clear the textarea's content
+ }
+});
+```
+
+
+
+Now we need to update the task details
+
+* The `createTicket` function accepts two parameters: `ticketColor` for the color of the ticket and `ticketTask` for the content of the ticket's task.
+* The `ticketTask` parameter is used to dynamically insert the task content into the task-area div element.
+* In the modalCont event listener, the content of the `textAreaCont` element is retrieved using .value and assigned to taskContent.
+* When the 'Shift' key is pressed, a new ticket is created with the selected color and task content, and then the modal is hidden.
+* The content of the `textAreaCont` element is cleared for the next input.
+
+```javascript
+function createTicket(ticketColor, ticketTask) {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+ ticketCont.setAttribute('class', 'ticket-cont');
+
+ // Create the HTML content for the ticket container
+ ticketCont.innerHTML = `
+
+
12345
+
${ticketTask}
+ `;
+
+ // Append the ticket container to the main container
+ mainCont.appendChild(ticketCont);
+}
+
+// Event listener for 'Shift' key press in modalCont
+modalCont.addEventListener('keydown', function(e) {
+ let key = e.key;
+
+ if (key === 'Shift') {
+ let taskContent = textAreaCont.value; // Get the content from the textarea
+ createTicket(modelPriorityColor, taskContent); // Create a new ticket with the selected color and task content
+ modalCont.style.display = 'none'; // Hide the modal
+ textAreaCont.value = ''; // Clear the textarea's content
+ }
+});
+```
+
+Now we need to uniquely generate ID for each task created:
+
+We will be using an external library **shortID** for this
+
+```javascript
+function createTicket(ticketColor, ticketID, ticketTask) {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+ ticketCont.setAttribute('class', 'ticket-cont');
+
+ // Create the HTML content for the ticket container
+ ticketCont.innerHTML = `
+
+
${ticketID}
+
${ticketTask}
+ `;
+
+ // Append the ticket container to the main container
+ mainCont.appendChild(ticketCont);
+}
+
+// Event listener for 'Shift' key press in modalCont
+modalCont.addEventListener('keydown', function(e) {
+ let key = e.key;
+
+ if (key === 'Shift') {
+ let taskContent = textAreaCont.value; // Get the content from the textarea
+ let ticketID = shortid(); // Generate a unique ticket ID
+ createTicket(modelPriorityColor, ticketID, taskContent); // Create a new ticket with the selected color, ticket ID, and task content
+ modalCont.style.display = 'none'; // Hide the modal
+ textAreaCont.value = ''; // Clear the textarea's content
+ }
+});
+```
+
+
+
+
+
+To remove the task, we can do similarly to what we did for adding task:
+
+```javascript
+let removeTaskFlag = false;
+
+let removeBtn = document.querySelector('.remove-btn'); // Replace with the actual class or ID selector
+removeBtn.addEventListener('click', function() {
+ removeTaskFlag = !removeTaskFlag; // Toggle the removeTaskFlag when the button is clicked
+
+ if (removeTaskFlag) {
+ alert('Delete button is activated.');
+ }
+});
+```
+
+---
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/6_ Kanban Board -3(Bussiness Logics & Local Storage).md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/6_ Kanban Board -3(Bussiness Logics & Local Storage).md
new file mode 100644
index 0000000..63e8ada
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/6_ Kanban Board -3(Bussiness Logics & Local Storage).md
@@ -0,0 +1,172 @@
+# Full Stack LLD & Projects: JavaScript-9: Kanban Board -3(Bussiness Logics & Local Storage)
+
+
+**Agenda of this Lecture:**
+
+* Locking Mechanism
+* Changing the Priority color of the Task
+* Filtering out Task with using the priority color filter
+* Showing All Tasks on db click
+
+
+
+### Explanation
+
+Currently we have just implemented the project, but we dont have any lock in the project.
+Hence, we will be implementing the lock in this section
+
+We can use the **font-awesome** and get a lock icon for our tasks.
+
+
+```javascript
+function createTicket(ticketColor, ticketID, ticketTask) {
+ // Create a new ticket container element
+ let ticketCont = document.createElement('div');
+ ticketCont.setAttribute('class', 'ticket-cont');
+
+ // Create the HTML content for the ticket container
+ ticketCont.innerHTML = `
+
+
${ticketID}
+
${ticketTask}
+
+ `;
+
+ // Append the ticket container to the main container
+ mainCont.appendChild(ticketCont);
+
+ handleRemoval(ticketCont);
+}
+```
+
+* We have added an additional `div` element with the class `ticket-lock` to represent the lock icon for each ticket.
+* 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.
+
+
+
+
+Now we have added the lock, but we need to make it functional now:
+
+```javascript
+let lockClose = 'fa-lock';
+let lockOpen = 'fa-lock-open';
+
+function handleLock(ticket) {
+ let ticketLockElem = ticket.querySelector('.ticket-lock');
+ let ticketLockIcon = ticketLockElem.children[0];
+
+ ticketLockIcon.addEventListener('click', function() {
+ console.log('Lock Selected'); // Added single quotes around the log message
+ if (ticketLockIcon.classList.contains(lockClose)) {
+ ticketLockIcon.classList.remove(lockClose);
+ ticketLockIcon.classList.add(lockOpen);
+
+ } else {
+ ticketLockIcon.classList.remove(lockOpen);
+ ticketLockIcon.classList.add(lockClose);
+
+ }
+ });
+}
+```
+
+
+Now to make the content editable inside the task section whenever the lock is open, we will make the following changes:
+
+```javascript
+let lockClose = 'fa-lock';
+let lockOpen = 'fa-lock-open';
+
+function handleLock(ticket) {
+ let ticketLockElem = ticket.querySelector('.ticket-lock');
+ let ticketLockIcon = ticketLockElem.children[0];
+
+ let ticketTaskArea = ticket.querySelector('.task-area'); // Corrected selector
+
+ ticketLockIcon.addEventListener('click', function() {
+ console.log('Lock Selected');
+ if (ticketLockIcon.classList.contains(lockClose)) {
+ ticketLockIcon.classList.remove(lockClose);
+ ticketLockIcon.classList.add(lockOpen);
+ ticketTaskArea.setAttribute('contenteditable', 'true'); // Changed 'contenteditable', 'true'
+ } else {
+ ticketLockIcon.classList.remove(lockOpen);
+ ticketLockIcon.classList.add(lockClose);
+ ticketTaskArea.setAttribute('contenteditable', 'false'); // Changed 'contenteditable', 'false'
+ }
+ });
+}
+```
+
+* Corrected the selector for `ticketTaskArea` to use '.task-area'.
+* Changed the `contenteditable` attribute value to 'true' or 'false' to correctly toggle the editable state of the task area based on the lock state.
+
+
+### Explanation
+
+In this section we will handle the color of the tasks
+
+
+
+```javascript
+function handleColor(ticket) {
+ let ticketColorBand = ticket.querySelector('.ticket-color'); // Corrected selector
+ ticketColorBand.addEventListener('click', function() {
+ let currentColor = ticketColorBand.classList[0]; // Changed index to 0
+
+ let currentColorIdx = colors.findIndex(function(color) {
+ return currentColor === color;
+ });
+
+ currentColorIdx++; // Increment the index
+
+ let newTicketColorIdx = currentColorIdx % colors.length; // Corrected variable name
+ let newTicketColor = colors[newTicketColorIdx]; // Corrected variable name
+
+ ticketColorBand.classList.remove(currentColor); // Corrected spelling
+ ticketColorBand.classList.add(newTicketColor); // Corrected spelling
+ });
+}
+```
+
+
+
+
+
+### Explanation
+
+In this feature, we need to filter the task according to the priority color.
+
+
+
+```javascript
+let toolboxColors = document.querySelectorAll('.color');
+
+for (let i = 0; i < toolboxColors.length; i++) {
+ toolboxColors[i].addEventListener('click', function() {
+ let selectedToolboxColor = toolboxColors[i].classList[0];
+
+ let allTickets = document.querySelectorAll('.ticket-cont'); // Corrected selector
+ for (let j = 0; j < allTickets.length; j++) {
+ allTickets[j].remove(); // Removed square brackets and added j to index
+
+ let filteredTickets = ticketsArr.filter(function(ticket) {
+ return selectedToolboxColor === ticket.ticketColor;
+ });
+
+ filteredTickets.forEach(function(filteredTicket) {
+ createTicket(
+ filteredTicket.ticketColor,
+ filteredTicket.ticketTask,
+ filteredTicket.ticketID
+ );
+ });
+ }
+ });
+}
+```
+
+
+
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/7_Kanban Board -4(local storage).md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/7_Kanban Board -4(local storage).md
new file mode 100644
index 0000000..2fcd4df
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/7_Kanban Board -4(local storage).md
@@ -0,0 +1,309 @@
+
+
+
+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.
+
+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.
+
+What might be the underlying cause of this problem?
+
+To address this issue, we're planning to implement a validation process using unique identifier to prevent the occurrence of duplicate tickets.
+
+
+This is the code that we have implemented till now for filtering tickets.
+
+
+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.
+
+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.
+
+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.
+
+
+
+
+#### Pseudocode
+```javascript
+
+for (let i = 0; i < toolboxColors.length; i++) {
+ toolboxColors[i].addEventListener('click', function() {
+ let selectedToolBoxColor = toolboxColors[i].classList[0];
+
+ let filteredTickets = ticketsArr.filter(function(ticket) {
+ return selectedToolBoxColor === ticket.ticketColor;
+ });
+
+ let allTickets = document.querySelectorAll('.ticket-cont');
+
+ for (let i = 0; i < allTickets.length; i++) {
+ allTickets[i].remove();
+ }
+
+ filteredTickets.forEach(function(filteredTicket) {
+ createTicket(filteredTicket.ticketColor, filteredTicket.ticketTask, filteredTicket.ticketId);
+ });
+ });
+}
+
+```
+
+
+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.
+
+
+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.
+
+
+
+ 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?
+
+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.
+
+
+#### Pseudocode
+```javascript
+function createTicket(ticketColor, ticketTask, ticketId) {
+ // Adding an identifier
+ let id = ticketId || shortid();
+}
+```
+
+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.
+
+#### Pseudocode
+```javascript
+function createTicket(ticketColor, ticketTask, ticketId) {
+ // Adding an identifier
+ let id = ticketId || shortid();
+
+ // Other code
+
+ if (!ticketId) {
+ ticketArr.push({ ticketColor, ticketTask, ticketId: id });
+ }
+}
+
+```
+
+---
+title: What is local storage?
+description: Gaining Insight into Local Storage and How to Utilize It
+duration: 600
+card_type: cue_card
+---
+
+> Note to instructor - Address any questions that the students might have.
+
+
+ What kind of ID will the shortid library generate?
+
+It will produce a random ID for the ticket.
+
+
+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.
+
+What exactly is local storage? What are your thoughts on the ideal function of local storage?
+
+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.
+
+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.
+
+
+
+
+
+What is a Windows object?
+
+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).
+
+
+#### Pseudocode
+
+```htmlembedded
+
+
+
+
Title of the document
+
+
+
+
+
+
+
+
+
+```
+
+
+
+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.
+
+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.
+
+
+
+Now, let's see how we are gonna implement local storage
+
+
+In which scenarios will the requirement for local storage arise?
+
+Let's review all our functionalities:
+
+
+
+
+a. Creating a ticket involves storing them within local storage.
+b. Updating a ticket, whether altering its color or task, entails updating these modified values in local storage.
+c. Deleting a ticket results in its removal from local storage.
+
+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.
+
+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:
+
+#### Pseudocode
+```javascript
+
+function createTicket(ticketColor, ticketTask, ticketId) {
+ if (!ticketId) {
+ ticketArr.push({ ticketColor, ticketTask, ticketId: shortid() });
+ localStorage.setItem('tickets', JSON.stringify(ticketArr));
+ }
+}
+
+```
+
+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.
+
+
+> Note to instructor - Test to determine whether the local storage has been successfully established or not.
+
+
+
+
+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.
+
+
+
+
+We employ the stringify method to establish the data, while the reverse, JSON.parse, allows us to retrieve the data back in JSON format.
+
+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.
+
+#### Pseudocode
+```javascript=
+
+// local storage
+
+if (localStorage.getItem('tickets')) {
+ ticketsArr = JSON.parse(localStorage.getItem('tickets'));
+ ticketsArr.forEach(function(ticket) {
+ createTicket(ticket.ticketColor, ticket.ticketTask, ticket.ticketId);
+ });
+}
+
+```
+
+> Note to instructor - Test this by refreshing the page again; you'll observe that nothing is removed.
+
+
+> Note to instructor - Feel free to address any questions that students might have.
+
+
+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.
+
+#### Pseudocode
+```javascript
+
+function getTicketIdx(id) {
+ let ticketIdx = ticketArr.findIndex(function(ticketObj) {
+ return ticketObj.ticketId === id;
+ });
+ return ticketIdx;
+}
+
+```
+
+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.
+
+
+#### Pseudocode
+```javascript
+function handleLock(ticket) {
+ let ticketLockElem = ticket.querySelector('.ticket-lock');
+ let ticketLockIcon = ticketLockElem.children[0];
+ let ticketTaskArea = ticket.querySelector('.task-area');
+
+ ticketLockIcon.addEventListener('click', function() {
+ let ticketIdx = getTicketIdx(id);
+ // Other code
+
+ // Updated task
+ ticketsArr[ticketIdx].ticketTask = ticketTaskArea.innerText;
+ localStorage.setItem('tickets', JSON.stringify(ticketsArr));
+ });
+}
+
+```
+
+Henceforth, it will be retained with an updated task.
+
+
+
+
+Now, let's proceed to explore the color feature.
+
+
+#### Pseudocode
+```javascript
+function handleColor(ticket) {
+ let ticketColorBand = ticket.querySelector('.ticket-color');
+
+ ticketColorBand.addEventListener('click', function() {
+ // getting index
+ let ticketIdx = getTicketIdx(id);
+ let currentColor = ticketColorBand.classList[1];
+
+ let currentColorIdx = colors.findIndex(function(color) {
+ return currentColor === color;
+ });
+
+ currentColorIdx++;
+
+ let newTicketColorIdx = currentColorIdx % colors.length;
+ let newTicketColor = colors[newTicketColorIdx];
+
+ ticketColorBand.classList.remove(currentColor);
+ ticketColorBand.classList.add(newTicketColor);
+
+ // Updated task
+ ticketsArr[ticketIdx].ticketColor = newTicketColor;
+ localStorage.setItem('tickets', JSON.stringify(ticketsArr));
+ });
+}
+
+```
+
+
+
+Now, let's evaluate the final feature, which involves deleting data from local storage.
+
+
+#### Pseudocode
+```javascript
+function handleRemoval(ticket) {
+ ticket.addEventListener('click', function() {
+ if (!removeTaskFlag) return;
+
+ let idx = getTicketIdx(id);
+ ticket.remove(); // UI removal
+
+ let deletedElement = ticketsArr.splice(idx, 1);
+ localStorage.setItem('tickets', JSON.stringify(ticketsArr));
+ });
+}
+
+```
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/8_UI Case Studies-1.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/8_UI Case Studies-1.md
new file mode 100644
index 0000000..61ce065
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/8_UI Case Studies-1.md
@@ -0,0 +1,407 @@
+
+## Agenda
+
+- What is Event Propagation?
+- Concept of Bubbling
+- Concept of capturing
+- Machine coding question
+ - Star Rating Component
+ - Counter Component
+
+We will try to cover most of these topics in today's sessions and the remaining in the next.
+
+It is going to be a bit challenging, advanced, but very interesting session covering topics that are asked very frequently in interviews.
+
+So let's start.
+
+
+## Event Propagation
+ Event propagation refers to the process of how events are dispatched and processed in the Document Object Model (DOM) hierarchy of elements in web development. There are two main phases of event propagation: capturing phase and bubbling phase. During these phases, events can propagate through the DOM tree from the root to the target element (capturing) or from the target element back up to the root (bubbling).
+
+### Bubbling
+ Event bubbling is one of the phases of event propagation in the DOM. When an event occurs on a DOM element, it first triggers the event handlers on the target element itself, then it bubbles up to its parent elements in the DOM hierarchy. This allows for the creation of more general event listeners that can be applied to parent elements to handle events from multiple child elements.
+
+### Capturing
+ Event capturing is the other phase of event propagation in the DOM. During the capturing phase, events start from the root element and propagate down to the target element. This phase occurs before the bubbling phase and can be useful when you want to capture events on parent elements before they reach their child elements.
+
+Certainly, let's use an example to explain event bubbling and capturing with three nested `
` elements: `#grandparent`, `#parent`, and `#child`. Suppose you have the following HTML structure:
+
+```html
+
+```
+
+Now, let's say we attach a click event listener to each of these `
` elements and observe how event propagation works.
+
+```javascript
+const grandparent = document.querySelector('#grandparent');
+const parent = document.querySelector('#parent');
+const child = document.querySelector('#child');
+
+grandparent.addEventListener('click', function() {
+ console.log('Grandparent clicked');
+});
+
+parent.addEventListener('click', function() {
+ console.log('Parent clicked');
+});
+
+child.addEventListener('click', function() {
+ console.log('Child clicked');
+});
+```
+
+Here's how the event propagation works during both the capturing and bubbling phases when you click on the `#child` element:
+
+1. **Capturing Phase:**
+ When an event occurs, it starts from the root element (``) and goes down the DOM tree. In this phase, the event handlers are triggered in the following order:
+
+ 1. `#grandparent` capturing
+ 2. `#parent` capturing
+ 3. `#child` capturing (target phase)
+
+ However, we don't have capturing event listeners in this example, so nothing will be logged during this phase.
+
+2. **Target Phase:**
+ This is where the event reaches the target element, which is `#child`. The event handler for `#child` is triggered, and you will see the message "Child clicked" logged to the console.
+
+3. **Bubbling Phase:**
+ After the target phase, the event bubbles up through the DOM tree in the opposite direction. The event handlers are triggered in the following order:
+
+ 1. `#child` bubbling
+ 2. `#parent` bubbling
+ 3. `#grandparent` bubbling (root phase)
+
+ As a result, you will see the messages "Parent clicked" and "Grandparent clicked" logged to the console, in that order.
+
+So, the output in the console when you click on the `#child` element will be:
+
+```
+Child clicked
+Parent clicked
+Grandparent clicked
+```
+
+This example demonstrates the sequence of event propagation during both the capturing and bubbling phases in the context of nested `
` elements. The capturing and bubbling phases allow you to handle events at different levels of the DOM hierarchy.
+
+Let's explore the event propagation using the `useCapture` parameter set to both `true` and `false` for the same example with the three nested `
` elements: `#grandparent`, `#parent`, and `#child`.
+
+```javascript
+const grandparent = document.querySelector('#grandparent');
+const parent = document.querySelector('#parent');
+const child = document.querySelector('#child');
+
+grandparent.addEventListener('click', function() {
+ console.log('Grandparent clicked (Bubbling)');
+}, false);
+
+parent.addEventListener('click', function() {
+ console.log('Parent clicked (Bubbling)');
+}, false);
+
+child.addEventListener('click', function() {
+ console.log('Child clicked (Bubbling)');
+}, false);
+
+grandparent.addEventListener('click', function() {
+ console.log('Grandparent clicked (Capturing)');
+}, true);
+
+parent.addEventListener('click', function() {
+ console.log('Parent clicked (Capturing)');
+}, true);
+
+child.addEventListener('click', function() {
+ console.log('Child clicked (Capturing)');
+}, true);
+```
+
+In this example, we've added event listeners with both capturing and bubbling phases for each of the three elements. The `useCapture` parameter is set to `true` for capturing and `false` for bubbling.
+
+**Scenario 1: useCapture set to `false` (Bubbling)**
+
+When you click on the `#child` element, the event will propagate in the bubbling phase. The order of event handling will be:
+
+1. `#child` clicked (Bubbling)
+2. `#parent` clicked (Bubbling)
+3. `#grandparent` clicked (Bubbling)
+
+The output in the console will be:
+
+```
+Child clicked (Bubbling)
+Parent clicked (Bubbling)
+Grandparent clicked (Bubbling)
+```
+
+**Scenario 2: useCapture set to `true` (Capturing)**
+
+When you click on the `#child` element, the event will propagate in the capturing phase. The order of event handling will be:
+
+1. `#grandparent` clicked (Capturing)
+2. `#parent` clicked (Capturing)
+3. `#child` clicked (Capturing)
+
+The output in the console will be:
+
+```
+Grandparent clicked (Capturing)
+Parent clicked (Capturing)
+Child clicked (Capturing)
+```
+
+In both scenarios, the event propagation follows the sequence based on the capturing or bubbling phase, as determined by the `useCapture` parameter. Keep in mind that the capturing phase occurs before the bubbling phase and that events propagate through the DOM hierarchy accordingly.
+
+### Event Propagation Cycle
+The event propagation cycle refers to the sequence of phases through which an event travels within the Document Object Model (DOM) hierarchy. There are two main phases in the event propagation cycle: the capturing phase and the bubbling phase. Here's an overview of the cycle:
+
+1. **Capturing Phase:**
+ - The event starts at the root of the DOM tree (typically the `` element).
+ - The event travels down the DOM tree through each ancestor element of the target element.
+ - During this phase, event handlers registered with the capturing phase (`useCapture` set to `true`) are triggered on each ancestor element in the order they appear in the hierarchy from the root to the target.
+ - The event reaches the target element.
+
+2. **Target Phase:**
+ - The event reaches the target element for which the event was triggered.
+ - Event handlers registered on the target element are executed.
+
+3. **Bubbling Phase:**
+ - After the target phase, the event travels back up the DOM tree in reverse order.
+ - Event handlers registered with the bubbling phase (`useCapture` set to `false`) are triggered on each ancestor element in the reverse order from the target to the root.
+ - The event eventually reaches the root of the DOM tree.
+
+This cycle allows developers to define event listeners that respond to events at different levels of the DOM hierarchy. By using capturing and bubbling, you can efficiently manage and handle events on multiple elements without needing to attach individual listeners to each element.
+
+
+Certainly, let's modify the example to demonstrate how to stop event propagation after the click event on the `#child` element using the `stopPropagation` method. Here's the updated code:
+
+```javascript
+const grandparent = document.querySelector('#grandparent');
+const parent = document.querySelector('#parent');
+const child = document.querySelector('#child');
+
+grandparent.addEventListener('click', function(e) {
+ console.log('Grandparent clicked (Bubbling)');
+});
+
+parent.addEventListener('click', function(e) {
+ console.log('Parent clicked (Bubbling)');
+});
+
+child.addEventListener('click', function(e) {
+ console.log('Child clicked (Bubbling)');
+ e.stopPropagation(); // Stop propagation after clicking the child element
+});
+```
+
+In this example, when you click on the `#child` element, the event propagation will be stopped after the event handler for the `#child` element executes. As a result, the event will not continue to bubble up to the parent and grandparent elements. Only the message "Child clicked (Bubbling)" will be logged to the console.
+
+If you remove the line `e.stopPropagation();`, you'll see the standard bubbling behavior where the event continues to propagate, and you'll see all three messages in the console: "Child clicked (Bubbling)", "Parent clicked (Bubbling)", and "Grandparent clicked (Bubbling)".
+
+Remember that stopping propagation can impact the expected behavior of event handling, so it should be used with caution and only when necessary.
+
+
+
+
+Here are the problem statements for each of the machine coding round problems you mentioned:
+
+1. **Star Rating Component:**
+ 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.
+
+2. **Counter Component:**
+
+3. **Nested Comment System:**
+ 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.
+
+4. **Product Card Component:**
+ 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.
+
+5. **OTP Input Section:**
+ 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.
+
+For each problem, you'll need to design and implement a solution using the programming language of your choice. Make sure to consider the user experience, error handling, and any other relevant aspects. Depending on the context of the coding round, you might be required to write modular and efficient code, handle edge cases, and possibly interact with a user interface (if applicable).
+
+### Creating a counter component
+Firstly we will be discussing the problem statement of Creating a counter component that displays a number and has buttons to increment and decrement the number. The user should be able to click the buttons to increase or decrease the displayed number.
+
+Certainly, here's a simple implementation of a counter app using HTML, CSS, and JavaScript that includes the functionalities you mentioned:
+
+**HTML (index.html):**
+```html
+
+
+
+
+
+
+
Counter App
+
+
+
+ -
+ 0
+ +
+ Reset
+
+
+
+
+```
+
+**CSS (styles.css):**
+```css
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+
+.counter {
+ display: flex;
+ align-items: center;
+}
+
+.btn {
+ padding: 10px 15px;
+ font-size: 18px;
+ background-color: #3498db;
+ color: #fff;
+ border: none;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+ background-color: #2980b9;
+}
+```
+
+**JavaScript (script.js):**
+```javascript
+const decrementButton = document.getElementById('decrement');
+const incrementButton = document.getElementById('increment');
+const resetButton = document.getElementById('reset');
+const countDisplay = document.getElementById('count');
+
+let count = 0;
+
+decrementButton.addEventListener('click', () => {
+ if (count > 0) {
+ count--;
+ countDisplay.textContent = count;
+ }
+});
+
+incrementButton.addEventListener('click', () => {
+ count++;
+ countDisplay.textContent = count;
+});
+
+resetButton.addEventListener('click', () => {
+ count = 0;
+ countDisplay.textContent = count;
+});
+```
+
+In this implementation, we have an HTML structure with buttons for decrementing, incrementing, and resetting the counter. The JavaScript code adds event listeners to these buttons to handle their respective functionalities. The counter value is displayed and updated in the `countDisplay` element. The CSS styles provide a basic look for the counter app.
+
+Copy and paste the HTML, CSS, and JavaScript code into separate files (index.html, styles.css, script.js) in the same directory, and then open the index.html file in a web browser to see and interact with the counter app.
+
+### Star Rating Component
+Firstly we will be discussing the problem statement of Designing 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..
+
+Absolutely, here's an explanation for the star rating component that includes comments in the JavaScript code to help you understand how it works:
+
+**index.html:**
+```html
+
+
+
+
+
+
+
Star Rating Component
+
+
+
+
+
+ ★
+ ★
+ ★
+ ★
+ ★
+
+
+
Rating: 0 /5
+
+
+
+
+```
+
+**script.js:**
+```javascript
+// Get all star elements
+const stars = document.querySelectorAll('.star');
+
+// Get the rating display element
+const ratingDisplay = document.getElementById('rating');
+
+// Add a click event listener to each star
+stars.forEach(star => {
+ star.addEventListener('click', () => {
+ // Get the value from the data-value attribute
+ const value = parseInt(star.getAttribute('data-value'));
+ // Update the rating display and stars based on the clicked value
+ updateRating(value);
+ });
+});
+
+// Function to update the rating display and filled stars
+function updateRating(value) {
+ stars.forEach(star => {
+ // Get the value from the data-value attribute
+ const starValue = parseInt(star.getAttribute('data-value'));
+ // Toggle the 'filled' class based on whether the star's value is less than or equal to the selected value
+ star.classList.toggle('filled', starValue <= value);
+ });
+ // Update the rating display text content
+ ratingDisplay.textContent = value;
+}
+```
+
+**styles.css:**
+```css
+body {
+ font-family: Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+}
+
+.rating {
+ text-align: center;
+}
+
+.star {
+ font-size: 24px;
+ cursor: pointer;
+ transition: color 0.3s ease;
+}
+
+.star.filled {
+ color: gold;
+}
+```
+
+In this star rating component, users can click on stars to indicate their rating. The JavaScript code adds a click event listener to each star, and the `updateRating` function toggles the "filled" class on stars based on their value compared to the selected rating. The CSS styles provide visual feedback by changing the color of filled stars to gold.
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/9_UI Case Studies-2.md b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/9_UI Case Studies-2.md
new file mode 100644
index 0000000..77dfeef
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-2 (JavaScript)/DOM/9_UI Case Studies-2.md
@@ -0,0 +1,269 @@
+
+## Agenda
+
+- What is Event Delegation?
+ - Relation with concept of Bubbling
+- Machine coding question
+ - Star Rating Component
+ - Counter Component
+
+We will try to cover most of these topics in today's sessions and the remaining in the next.
+
+It is going to be a bit challenging, advanced, but very interesting session covering topics that are asked very frequently in interviews.
+
+So let's start.
+
+## Event delegation
+
+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.
+
+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:
+
+1. **Event Delegation:**
+ 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.
+
+2. **Event Bubbling:**
+ 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.
+
+Now, let's see how these concepts work together:
+
+- 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.
+- Since you've attached a single event listener to the container holding the product cards, the event bubbles up to the container.
+- 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`).
+- 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
+
+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:
+
+**HTML Structure:**
+```html
+
+
+
Headphones
+
Product A
+
Product B
+
+
+
Laptops
+
Product X
+
Product Y
+
+
+
Mobiles
+
Product P
+
Product Q
+
+
+```
+
+**JavaScript:**
+```javascript
+const categoriesContainer = document.getElementById('categories');
+
+categoriesContainer.addEventListener('click', (event) => {
+ const clickedElement = event.target;
+
+ // Check if the clicked element is a product
+ if (clickedElement.classList.contains('product')) {
+ const category = clickedElement.closest('.category').querySelector('h2').textContent;
+ const product = clickedElement.textContent;
+
+ console.log(`Clicked on ${product} in the ${category} category.`);
+ // Handle the click action for the product here
+ }
+});
+```
+
+In this example:
+
+- The `categoriesContainer` element is the common ancestor for all categories and products.
+- The event listener is attached to the `categoriesContainer` to capture clicks on any of its child elements.
+- When a product is clicked, the event bubbles up through the category section, reaching the `categoriesContainer`.
+- 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.
+- This code efficiently handles clicks on products within any category, demonstrating the combined usage of event delegation and event bubbling.
+
+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.
+
+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.
+
+**HTML Structure:**
+```html
+
+```
+
+**JavaScript:**
+```javascript
+const colorPalette = document.getElementById('colorPalette');
+
+colorPalette.addEventListener('click', (event) => {
+ const clickedElement = event.target;
+
+ // Check if the clicked element is a color box
+ if (clickedElement.classList.contains('color-box')) {
+ const color = clickedElement.style.backgroundColor;
+ document.body.style.backgroundColor = color;
+ }
+});
+```
+
+In this example:
+
+- The `colorPalette` element is the common ancestor for all color boxes.
+- The event listener is attached to the `colorPalette` to capture clicks on any of its child elements.
+- When a color box is clicked, the event bubbles up to the `colorPalette`.
+- 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.
+- The background color of the `body` element is then set to the extracted color, effectively changing the page's background color.
+
+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.
+
+Here are the problem statements for each of the machine coding round problems you mentioned:
+
+1. **Star Rating Component:**
+ 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.
+
+2. **Counter Component:**
+
+3. **Nested Comment System:**
+ 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.
+
+4. **Product Card Component:**
+ 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.
+
+5. **OTP Input Section:**
+ 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.
+
+### Nested Comment System
+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.
+
+**Nested Comment System: Overview**
+
+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.
+
+- **Nested Structure:** Comments are organized hierarchically, where each comment can have zero or more child comments (replies).
+- **Collapse/Expand:** Users can collapse or expand comment threads to show or hide replies, improving readability for lengthy discussions.
+- **Event Delegation:** Since comments can be added dynamically, event delegation is useful for handling interactions like replying and collapsing.
+
+**HTML Structure:**
+
+```
+
+
+
+
+
+
Nested Comments Example
+
+
+
+
+
+
+
+```
+
+**CSS:**
+
+```css
+.comment {
+ margin: 10px;
+ border: 1px solid #ccc;
+ padding: 10px;
+}
+
+.reply-btn,
+.collapse-btn {
+ margin-right: 10px;
+}
+
+.all-comment:not(:first-child) {
+ margin-left: 4rem;
+}
+
+```
+
+**JavaScript:**
+
+```javascript
+const commentsContainer = document.getElementById('comments');
+
+commentsContainer.addEventListener('click', (event) => {
+ const clickedElement = event.target;
+
+ // Handle replying to comments
+ if (clickedElement.classList.contains('reply-btn')) {
+ const comment = clickedElement.closest('.comment');
+ const replyBox = document.createElement('div');
+ replyBox.className = 'comment reply';
+ replyBox.innerHTML = `
+
+
Submit
+ `;
+ comment.querySelector('.replies').appendChild(replyBox);
+ }
+
+ // Handle collapsing/expanding comment threads
+ if (clickedElement.classList.contains('collapse-btn')) {
+ const comment = clickedElement.closest('.comment');
+ const replies = comment.querySelector('.replies');
+ replies.style.display = replies.style.display === 'none' ? 'block' : 'none';
+ }
+});
+
+commentsContainer.addEventListener('click', (event) => {
+ const clickedElement = event.target;
+
+ // Handle submitting replies
+ if (clickedElement.classList.contains('submit-btn')) {
+ const replyInput = clickedElement.closest('.comment.reply').querySelector('input');
+ const replyText = replyInput.value;
+ const newReply = document.createElement('div');
+ newReply.className = 'comment';
+ newReply.innerHTML = `
User: ${replyText}
`;
+ clickedElement.closest('.comment.reply').appendChild(newReply);
+ replyInput.value = '';
+ }
+});
+```
+
+**Explanation:**
+
+- The HTML structure represents a simple comment system with reply and collapse buttons.
+- The CSS provides basic styling for comments and buttons.
+- The JavaScript code uses event delegation on the `commentsContainer`.
+- When the "Reply" button is clicked, a new reply box is dynamically added under the corresponding comment.
+- When the "Collapse" button is clicked, the replies are toggled to show or hide.
+
+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.
+
+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:
+
+1. The page will display a comment with a "Reply" button and a "Collapse" button.
+2. Clicking the "Reply" button will create a new reply box beneath the comment where users can input their replies.
+3. Clicking the "Collapse" button will toggle the visibility of the replies.
+
+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.
+
+Please note that you'll need to create an HTML file and include the provided HTML, CSS, and JavaScript code within appropriate sections (HTML, `
+
+
+```
+#### Output
+
+
+#### Buttons
+Button elements are used to create clickable elements that can trigger actions when clicked, such as submitting a form or triggering JavaScript functions.
+
+#### Code:
+```html
+
+```
+#### Output
+
+
+
diff --git a/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/2_HTML (Lists , Tables and Forms).md b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/2_HTML (Lists , Tables and Forms).md
new file mode 100644
index 0000000..aab5b84
--- /dev/null
+++ b/Non-DSA Notes/FullStack-LLD/LLD-1 (HTML/CSS)/2_HTML (Lists , Tables and Forms).md
@@ -0,0 +1,244 @@
+## List
+
+In HTML you can structure your content in a more readable and organized manner using lists. There are two types of lists such as
+1. Ordered lists `