Updated loop content for DSA folder

content/batch/dsa/loops.mdx

@@ -4,6 +4,177 @@ description: Learn Loops in JavaScript
 ---
 
 <Callout>
+Want to improve this page? Raise an issue on [@github](https://github.com/FrontendFreaks/Official-Website).
+</Callout>
 
-Want to improve this page?. Raise a issue on [@github](https://github.com/FrontendFreaks/Official-Website).
-</Callout>
+## What's on this section?
+
+In this section, you will:
+
+- 🎨 Explore different types of loops in JavaScript.
+- 🔍 Understand the syntax and usage of for, while, and do-while loops.
+- 💡 Learn about loop control statements like break and continue.
+- 🚀 Practice your knowledge through assignments related to loop concepts.
+
+<Tabs defaultValue="learn">
+
+<TabsList>
+  <TabsTrigger value="learn">Learn</TabsTrigger>
+  <TabsTrigger value="assignment">Assignment</TabsTrigger>
+</TabsList>
+
+<TabsContent value="learn">
+
+### Explore Different Types of Loops
+
+In this section, you will dive into the various types of loops available in JavaScript, including:
+
+- **For Loop**: Learn how to use the `for` loop to execute code repeatedly.
+- **While Loop**: Understand the `while` loop and how it differs from the `for` loop.
+- **Do-While Loop**: Explore the `do-while` loop and its unique characteristics.
+- **Loop Control Statements**: Discover how to control loops using `break` and `continue` statements.
+
+## 📺 Watch Now
+
+<div className="w-full h-full">
+  <a href="https://www.youtube.com/watch?v=MLVJWmG2iYI" >
+    <img className="w-full h-full object-cover" src="https://camo.githubusercontent.com/382c9b7a1a30f5d7d458fd8ebb23f8b363a328dd9a12bd3ff2844f51a8694cc6/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f4d4c564a576d47326959492f302e6a7067" alt="JavaScript Loops" />
+  </a>
+</div>
+
+## 📝 Study Notes
+
+We've prepared detailed study notes to accompany the video. These notes cover essential concepts related to loops in JavaScript. Use them as a quick reference while learning or revising.
+
+### The `for` Loop
+
+The `for` loop is commonly used when you know the exact number of iterations you need. It consists of three parts: initialization, condition, and increment (or decrement).
+
+```javascript
+for (let i = 0; i < 5; i++) {
+  text += "The number is " + i + "<br>";
+}
+
+```
+### The `for in` Loop
+
+The JavaScript for in statement loops through the properties of an Object:
+
+```javascript
+const person = {fname:"John", lname:"Doe", age:25};
+
+let text = "";
+for (let x in person) {
+  text += person[x];
+}
+
+```
+### The `for of` Loop
+
+The JavaScript for of statement loops through the values of an iterable object.
+
+It lets you loop over iterable data structures such as Arrays, Strings, Maps, NodeLists, and more:
+
+```javascript
+const cars = ["BMW", "Volvo", "Mini"];
+
+let text = "";
+for (let x of cars) {
+  text += x;
+}
+
+```
+
+### The `while` Loop
+
+The while loop loops through a block of code as long as a specified condition is true.
+
+```javascript
+while (i < 10) {
+  text += "The number is " + i;
+  i++;
+}
+
+```
+
+### The ` do-while` Loop
+
+The do while loop is a variant of the while loop. This loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
+
+```javascript
+do {
+  text += "The number is " + i;
+  i++;
+}
+while (i < 10);
+
+```
+### The `Break` Statement
+
+The break statement can also be used to jump out of a loop
+
+```javascript
+for (let i = 0; i < 10; i++) {
+  if (i === 3) { break; }
+  text += "The number is " + i + "<br>";
+}
+
+```
+
+### The `continue` Statement
+
+The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
+
+```javascript
+for (let i = 0; i < 10; i++) {
+  if (i === 3) { continue; }
+  text += "The number is " + i + "<br>";
+}
+
+```
+
+
+</TabsContent>
+
+<TabsContent value="assignment">
+
+### Hands-On Assignments
+
+To reinforce your understanding of loops, we have prepared the following assignments for you:
+
+
+### 1. Print Numbers with `for` Loop
+
+Write a `for` loop that prints numbers from 1 to 5.
+### 2. Countdown with `while` Loop
+
+Create a `while` loop that counts down from 10 to 1.
+
+### 3. Iterate Through an Array
+
+Implement a `for` loop that iterates through an array and prints each element.
+
+### 4. Validate User Age with `do-while` Loop
+
+Write a `do-while` loop to prompt the user for their age until they enter a valid age (between 18 and 99).
+
+
+
+### 5. Calculate Sum of Even Numbers
+
+Create a `for` loop to calculate the sum of all even numbers from 1 to 10.
+
+
+### 6. Generate Random Numbers
+
+Implement a `while` loop that generates random numbers between 1 and 100 until a number greater than 90 is generated.
+
+
+
+Feel free to try these exercises and test your knowledge of JavaScript loops!
+
+These assignments will help you solidify your knowledge of loops and improve your coding skills.
+
+</TabsContent>
+
+</Tabs>