Print numbers from 1 to 10 (Basic for)

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

---

2️⃣ Print numbers from 10 to 1 (Reverse loop)

for (let i = 10; i >= 1; i--) {
  console.log(i);
}

---

3️⃣ Print even numbers (Loop with if)

for (let i = 1; i <= 20; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

---

4️⃣ Print odd numbers (Loop with if)

for (let i = 1; i <= 20; i++) {
  if (i % 2 !== 0) {
    console.log(i);
  }
}

---

5️⃣ Sum of numbers from 1 to 10

let sum = 0;for (let i = 1; i <= 10; i++) {
  sum += i;
}console.log(sum);

---

6️⃣ Multiplication table of 5

for (let i = 1; i <= 10; i++) {
  console.log(`5 x ${i} = ${5 * i}`);
}

---

7️⃣ Nested loop: Print square pattern

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= 3; j++) {
    row += "* ";
  }
  console.log(row);
}

---

8️⃣ Nested loop: Number pattern

for (let i = 1; i <= 3; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += j + " ";
  }
  console.log(row);
}

---

9️⃣ while loop: Print 1 to 5

let i = 1;while (i <= 5) {
  console.log(i);
  i++;
}

---

🔟 while loop: Sum of first 5 numbers

let i = 1;
let sum = 0;while (i <= 5) {
  sum += i;
  i++;
}console.log(sum);

---

1️⃣1️⃣ do...while: Print 1 to 5

let i = 1;do {
  console.log(i);
  i++;
} while (i <= 5);

---

1️⃣2️⃣ do...while: Run at least once

let i = 10;do {
  console.log(i);
} while (i < 5);

---

1️⃣3️⃣ forEach: Print array elements

let arr = [10, 20, 30];arr.forEach(num => console.log(num));

---

1️⃣4️⃣ forEach: Sum of array

let arr = [1, 2, 3, 4];
let sum = 0;arr.forEach(num => {
  sum += num;
});console.log(sum);

---

1️⃣5️⃣ Loop through string (characters)

let str = "Hello";for (let char of str) {
  console.log(char);
}

---

1️⃣6️⃣ Count vowels in a string

let str = "javascript";
let count = 0;for (let char of str) {
  if ("aeiou".includes(char)) {
    count++;
  }
}console.log(count);

---

1️⃣7️⃣ Loop through array using for

let arr = [5, 10, 15];for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

---

1️⃣8️⃣ Find largest number in array

let arr = [10, 5, 20, 8];
let max = arr[0];for (let i = 1; i < arr.length; i++) {
  if (arr[i] > max) {
    max = arr[i];
  }
}console.log(max);

---

1️⃣9️⃣ Loop through object properties (for...in)

let person = {
  name: "John",
  age: 25,
  city: "Delhi"
};for (let key in person) {
  console.log(key + ": " + person[key]);
}

---

2️⃣0️⃣ Count properties in an object

let obj = {
  a: 1,
  b: 2,
  c: 3
};let count = 0;for (let key in obj) {
  count++;
}console.log(count);

Loops allow you to execute code repeatedly based on a condition.

---

1️⃣ Basic for Loop

👉 Example:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

💡 Output:

1 2 3 4 5

---

2️⃣ Loop with if Condition

👉 Example: Print even numbers

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    console.log(i);
  }
}

💡 Output:

2 4 6 8 10

---

3️⃣ Nested for Loop

👉 Example: Pattern (matrix)

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`Row ${i}, Column ${j}`);
  }
}

💡 Concept:

• Outer loop → rows
• Inner loop → columns

---

4️⃣ while Loop

👉 Example:

let i = 1;while (i <= 5) {
  console.log(i);
  i++;
}

💡 Use case:

• When iteration count is unknown

---

5️⃣ do...while Loop

👉 Example:

let i = 1;do {
  console.log(i);
  i++;
} while (i <= 5);

💡 Key Point:

• Executes at least once

---

6️⃣ forEach Loop (Array Only)

👉 Example:

let arr = [10, 20, 30];arr.forEach((value, index) => {
  console.log(index, value);
});

---

7️⃣ Loop with String Datatype

A string is iterable, so you can loop through characters.

👉 Example using for

let str = "Hello";for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

👉 Example using for...of

for (let char of "Hello") {
  console.log(char);
}

💡 Output:

H e l l o

---

8️⃣ Loop with Array Datatype

👉 Example using for

let numbers = [1, 2, 3, 4];for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

👉 Example using for...of

for (let num of numbers) {
  console.log(num);
}

👉 Example using forEach

numbers.forEach(num => console.log(num));

---

9️⃣ Loop with Object Datatype

Objects are not directly iterable like arrays, but we use for...in.

👉 Example:

let person = {
  name: "John",
  age: 25,
  city: "Delhi"
};for (let key in person) {
  console.log(key, person[key]);
}

💡 Output:

name John
age 25
city Delhi

---

🔥 Summary Table

Loop Type	Best Use Case
for	Fixed iterations
while	Unknown iterations
do...while	Runs at least once
forEach	Arrays
for...of	Arrays & strings
for...in	Objects

Common Mistakes

❌ Infinite Loop

for (let i = 1; i <= 5; ) {
  // missing increment
}

❌ Wrong Object Loop

for (let item of person) // ❌ Error

✔ Correct:

for (let key in person)

---

✅ Practice Ideas

1. Reverse a string using loop
2. Find largest number in array
3. Count vowels in string
4. Print object keys and values
5. Create star pattern using nested loop

1. What is GitHub?

• GitHub is a platform to store, manage, and collaborate on code.
• It uses Git (a version control system).

👉 Think of GitHub as:

“Google Drive for code + collaboration tools for developers”

---

2. What is Git?

• Git tracks changes in your code.
• Helps you:
  • Save versions
  • Undo mistakes
  • Work with teams

---

3. Repository (Repo)

A repository is a project folder stored on GitHub.

Example:

my-project/
 ├── index.html
 ├── style.css
 └── script.js

👉 This entire folder = 1 repository

---

4. Clone a Repository

Copy a GitHub repo to your local machine.

Command:

git clone https://github.com/user/project.git

Example:

git clone https://github.com/deepesh/my-app.git

---

5. Basic Git Workflow

The most important concept 👇

Working Directory → Staging Area → Repository

Steps:

git add file.js      # Add file to staging
git commit -m "Added feature"   # Save changes
git push            # Upload to GitHub

---

6. Commit

A commit is a snapshot of your code.

Example:

git commit -m "Fixed login bug"

👉 Good commit message = clear + meaningful

---

7. Branch

A branch lets you work on features without affecting main code.

Example:

git branch feature-login
git checkout feature-login

Or shortcut:

git checkout -b feature-login

---

8. Merge

Combine changes from one branch into another.

Example:

git checkout main
git merge feature-login

---

9. Pull Request (PR)

• A Pull Request is used to merge code on GitHub.
• You request others to review your code.

👉 Workflow:

1. Create branch
2. Push code
3. Open PR
4. Review → Merge

---

10. Push & Pull

Push (upload changes):

git push origin main

Pull (get latest changes):

git pull origin main

---

11. Fork

A fork is a copy of someone else’s repository.

👉 Used in open-source contributions.

---

12. .gitignore

Tells Git which files to ignore.

Example:

node_modules/
.env
*.log

---

13. Real Example Workflow

Let’s say you’re building a JavaScript project:

Step 1: Initialize repo

git init

Step 2: Add files

git add .

Step 3: Commit

git commit -m "Initial project setup"

Step 4: Connect GitHub

git remote add origin https://github.com/user/project.git

Step 5: Push

git push -u origin main

---

14. Common Commands Cheat Sheet

Command	Purpose
git init	Start repo
git clone	Copy repo
git add	Stage changes
git commit	Save changes
git push	Upload
git pull	Download updates
git branch	List branches
git checkout	Switch branch

---

15. Best Practices

• ✅ Commit often
• ✅ Use clear commit messages
• ✅ Use branches for features
• ✅ Pull before push
• ❌ Don’t push sensitive data

---

🎯 Mini Practice Exercise

Try this:

1. Create a folder
2. Add a file app.js
3. Run:
4. Push it to GitHub

git init
git add .
git commit -m "First commit"
git push

Pro Tip

Start with:

• Personal projects
• Practice branching + PRs

That’s how real developers learn GitHub fast.

16. GitHub Issues (Task Tracking)

• Issues are used to track bugs, tasks, or feature requests.

Example:

You create an issue:

Title: Fix login error
Description: Login fails when password is incorrect

👉 You can:

• Assign team members
• Add labels (bug, feature, urgent)
• Track progress

---

📌 17. Labels (Organizing Work)

Labels help categorize issues.

Example labels:

• bug 🐛
• enhancement 🚀
• documentation 📄

👉 Helps teams quickly understand task types.

---

📊 18. GitHub Projects (Kanban Board)

GitHub provides project boards similar to Trello.

Example workflow:

To Do → In Progress → Done

👉 You can drag issues between columns.

---

🔐 19. README.md File

This is the first file people see in your repo.

Example:

# My AppThis is a simple JavaScript project.## Features
- Login system
- Dashboard

👉 A good README increases project visibility.

---

⚙️ 20. GitHub Actions (Automation)

• GitHub Actions lets you automate workflows.

Example:

Run tests automatically when code is pushed.

name: Test App
on: [push]jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - run: echo "Running tests..."

👉 Used for:

• CI/CD (Continuous Integration / Deployment)
• Auto testing
• Deployment

---

🔁 21. Pull vs Fetch

Git Pull:

git pull origin main

👉 Fetch + merge

Git Fetch:

git fetch

👉 Only downloads changes (no merge)

---

🔄 22. Merge Conflict (Important!)

Occurs when Git can’t merge automatically.

Example conflict:

<<<<<<< HEAD
console.log("Hello");
=======
console.log("Hi");
>>>>>>> branch

👉 You must manually fix it:

console.log("Hello Hi");

Then:

git add .
git commit -m "Resolved conflict"

---

🧪 23. Stash (Temporary Save)

Save changes without committing.

git stash

Restore:

git stash pop

👉 Useful when switching branches quickly.

---

📜 24. Git Log (History)

View commit history:

git log

Short version:

git log --oneline

---

⏪ 25. Undo Changes

Undo staged file:

git reset file.js

Undo last commit:

git reset --soft HEAD~1

Discard changes:

git checkout -- file.js

---

🌐 26. Remote Repository

Link your local repo to GitHub.

git remote add origin https://github.com/user/repo.git

Check:

git remote -v

---

🔒 27. SSH vs HTTPS

Two ways to connect GitHub:

HTTPS:

https://github.com/user/repo.git

SSH:

git@github.com:user/repo.git

👉 SSH is more secure (no need to enter password repeatedly)

---

📦 28. Fork + Clone + PR (Real Open Source Flow)

Step-by-step:

1. Fork repository on GitHub
2. Clone it:

git clone https://github.com/your-username/repo.git

3. Create branch:

git checkout -b fix-bug

4. Make changes + commit
5. Push:

git push origin fix-bug

6. Create Pull Request

👉 This is how open-source contributions work.

---

🧱 29. Rebase (Advanced Concept)

Instead of merge, you can use rebase for cleaner history.

git checkout feature
git rebase main

👉 Keeps history linear (no extra merge commits)

---

🏷️ 30. Tags (Versioning)

Used for releases.

git tag v1.0
git push origin v1.0

👉 Example:

• v1.0 → first release
• v2.0 → major update

Real-World Scenario (Important)

Scenario: Team Development

1. Developer A creates feature branch
2. Developer B works on another branch
3. Both create Pull Requests
4. Code review happens
5. Merge into main

👉 This prevents breaking the main codebase.

---

🧠 Pro Learning Tips

• Practice daily with small repos
• Break code → fix using Git
• Try merge conflicts intentionally
• Explore open-source repos

---

💻 Practice Tasks (Next Level)

Try these:

1. Create 2 branches and merge them
2. Create a merge conflict and resolve it
3. Use git stash while switching branches
4. Create a Pull Request on your own repo
5. Add a README with project details

Here are 20 JavaScript programs with solutions covering:
✔ if
✔ if-else
✔ if-else if
✔ nested if
✔ one-line (ternary) conditions

---

🔹 1. Positive number (if)

let num = 5;if (num > 0) {
  console.log("Positive");
}

---

🔹 2. Even or odd (if-else)

let num = 4;if (num % 2 === 0) {
  console.log("Even");
} else {
  console.log("Odd");
}

---

🔹 3. Voting eligibility (if-else)

let age = 16;if (age >= 18) {
  console.log("Eligible");
} else {
  console.log("Not eligible");
}

---

🔹 4. Largest of two numbers (if-else)

let a = 10, b = 20;if (a > b) {
  console.log("a is greater");
} else {
  console.log("b is greater");
}

---

🔹 5. Divisible by 3 (if)

let num = 9;if (num % 3 === 0) {
  console.log("Divisible by 3");
}

---

🔹 6. Grade system (if-else if)

let marks = 85;if (marks >= 90) {
  console.log("A");
} else if (marks >= 70) {
  console.log("B");
} else if (marks >= 50) {
  console.log("C");
} else {
  console.log("Fail");
}

---

🔹 7. Largest of three numbers (if-else if)

let a = 5, b = 8, c = 3;if (a > b && a > c) {
  console.log("a is largest");
} else if (b > c) {
  console.log("b is largest");
} else {
  console.log("c is largest");
}

---

🔹 8. Leap year (if-else)

let year = 2024;if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
  console.log("Leap year");
} else {
  console.log("Not leap year");
}

---

🔹 9. Check number range (if)

let num = 25;if (num >= 10 && num <= 50) {
  console.log("Within range");
}

---

🔹 10. Character type (if-else if)

let ch = 'A';if (ch >= 'A' && ch <= 'Z') {
  console.log("Uppercase");
} else if (ch >= 'a' && ch <= 'z') {
  console.log("Lowercase");
} else {
  console.log("Other");
}

---

🔹 11. Nested if (positive & even)

let num = 8;if (num > 0) {
  if (num % 2 === 0) {
    console.log("Positive and Even");
  }
}

---

🔹 12. Nested if (login system)

let username = "admin";
let password = "1234";if (username === "admin") {
  if (password === "1234") {
    console.log("Login successful");
  } else {
    console.log("Wrong password");
  }
} else {
  console.log("User not found");
}

---

🔹 13. Nested if (marks & distinction)

let marks = 75;if (marks >= 40) {
  if (marks >= 75) {
    console.log("Distinction");
  } else {
    console.log("Pass");
  }
} else {
  console.log("Fail");
}

---

🔹 14. One-line if (ternary)

let num = 10;console.log(num > 0 ? "Positive" : "Not positive");

---

🔹 15. One-line even/odd

let num = 7;console.log(num % 2 === 0 ? "Even" : "Odd");

---

🔹 16. One-line pass/fail

let marks = 35;console.log(marks >= 40 ? "Pass" : "Fail");

---

🔹 17. Multiple conditions (if)

let num = 15;if (num % 3 === 0 && num % 5 === 0) {
  console.log("Divisible by 3 and 5");
}

---

🔹 18. Temperature check (if-else if)

let temp = 30;if (temp > 40) {
  console.log("Hot");
} else if (temp > 20) {
  console.log("Warm");
} else {
  console.log("Cold");
}

---

🔹 19. Triangle validity (if)

let a = 3, b = 4, c = 5;if (a + b > c && a + c > b && b + c > a) {
  console.log("Valid triangle");
}

---

🔹 20. Simple calculator (if-else if)

let a = 10, b = 5;
let op = "+";if (op === "+") {
  console.log(a + b);
} else if (op === "-") {
  console.log(a - b);
} else if (op === "*") {
  console.log(a * b);
} else if (op === "/") {
  console.log(a / b);
} else {
  console.log("Invalid operator");
}

✅ 1. What is an if condition?

An if statement is used to execute code only when a condition is true.

📌 Syntax:

if (condition) {
    // code runs if condition is true
}

✅ Example:

let age = 18;if (age >= 18) {
    console.log("You are eligible to vote");
}

---

✅ 2. if...else Statement

Used when you want to handle both true and false cases.

📌 Syntax:

if (condition) {
    // true block
} else {
    // false block
}

✅ Example:

let number = 5;if (number % 2 === 0) {
    console.log("Even number");
} else {
    console.log("Odd number");
}

---

✅ 3. if...else if...else

Used when you have multiple conditions.

📌 Syntax:

if (condition1) {
    // block 1
} else if (condition2) {
    // block 2
} else {
    // default block
}

✅ Example:

let marks = 75;if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 70) {
    console.log("Grade B");
} else {
    console.log("Grade C");
}

---

✅ 4. Nested if

An if inside another if.

✅ Example:

let age = 20;
let hasLicense = true;if (age >= 18) {
    if (hasLicense) {
        console.log("You can drive");
    } else {
        console.log("Get a license first");
    }
}

---

✅ 5. Ternary Operator (Short if-else)

A short form of if...else.

📌 Syntax:

condition ? value1 : value2;

✅ Example:

let age = 16;let result = (age >= 18) ? "Adult" : "Minor";
console.log(result);

---

🔷 Important Concepts

🔹 Comparison Operators

Operator	Meaning
==	Equal (loose)
===	Equal (strict)
!=	Not equal
!==	Strict not equal
> < >= <=	Comparison

👉 Always prefer === (strict equality)

---

🔹 Logical Operators

Operator	Meaning
&&	AND
!	NOT

✅ Example:

let age = 20;
let hasID = true;if (age >= 18 && hasID) {
    console.log("Allowed entry");
}

---

🔷 Practice Programs (Very Important 🚀)

🟢 Beginner Level

1. Check Positive or Negative

let num = -5;if (num >= 0) {
    console.log("Positive");
} else {
    console.log("Negative");
}

---

2. Find Largest of Two Numbers

let a = 10, b = 20;if (a > b) {
    console.log("A is larger");
} else {
    console.log("B is larger");
}

---

3. Check Divisible by 5

let num = 25;if (num % 5 === 0) {
    console.log("Divisible by 5");
} else {
    console.log("Not divisible");
}

---

🟡 Intermediate Level

4. Find Largest of Three Numbers

let a = 10, b = 25, c = 15;if (a > b && a > c) {
    console.log("A is largest");
} else if (b > c) {
    console.log("B is largest");
} else {
    console.log("C is largest");
}

---

5. Check Leap Year

let year = 2024;if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
    console.log("Leap Year");
} else {
    console.log("Not a Leap Year");
}

---

6. Grade Calculator

let marks = 85;if (marks >= 90) {
    console.log("A");
} else if (marks >= 75) {
    console.log("B");
} else if (marks >= 50) {
    console.log("C");
} else {
    console.log("Fail");
}

---

🔴 Advanced Level

7. Check Login Access

let username = "admin";
let password = "1234";if (username === "admin" && password === "1234") {
    console.log("Login successful");
} else {
    console.log("Invalid credentials");
}

---

8. Check Even/Odd using Ternary

let num = 7;let result = (num % 2 === 0) ? "Even" : "Odd";
console.log(result);

---

9. Traffic Light System

let color = "red";if (color === "red") {
    console.log("Stop");
} else if (color === "yellow") {
    console.log("Get Ready");
} else if (color === "green") {
    console.log("Go");
} else {
    console.log("Invalid color");
}

---

🔷 Pro Tips 💡

• Use === instead of ==
• Keep conditions simple and readable
• Avoid deeply nested if → use else if instead
• Use ternary only for short conditions

---

🔷 Practice Questions (Try Yourself )

1. Check if a number is divisible by both 3 and 7
2. Check whether a character is vowel or consonant
3. Find smallest of three numbers
4. Check if a number is palindrome
5. Create simple ATM withdrawal condition

Steps to Create a GitHub Account

1. Go to https://github.com/
2. Click on the signup button.
3. Enter email ID
4. Enter password
5. Provide a unique Username,
6. click on the checkbox -> click on the create account button.
7. It will show some puzzles to verify -> we have to solve.
8. User will receive a verification code via email -> provide the code on the GitHub screen.
9. Account creation is Successful.

---

Steps to Create a GitHub Repository

1. Go to the GitHub account
2. Click on the create repository button.
3. Provide repository name: AutomationPractice
4. Provide a description. e.g. Automation practice for the user.
5. Select the Repo visibility option Public/Private.
6. Select the readme file option.
7. Click on the Create repository button.
8. Repository created successfully.

---

Steps to install the GitHub client

1. Download the Git client from the given link
   https://github.com/git-for-windows/git/releases/download/v2.53.0.windows.2/Git-2.53.0.2-64-bit.exe
2. Double-click on the exe file and initiate installation with exe
   , select all default options, and complete the installation.
3. Create a folder in C Drive with the name GithubCode, folder path should be C:\GithubCode
4. Open folder and right-click -> show more options -> click on open git bash here.
5. It will open the Git terminal in the C:\GithubCode folder.
6. Run a command to check the git option
   git –help
7. It will show available git commands

---

Steps to Add User Credentials in Git Config File

1. Open the Git terminal in the C:\GitHubCode folder
2. Run the command below to open the config file
   -> git config –global –edit
   -> It will open the config file in the vi editor
3. Press i to enable insert mode, it should show –insert– in the bottom.
4. Now use keyboard arrows and update the name and email with your git username and git email.
   [user]
   name = Divya4255
   email = divya.smsrinivas1995@gmail.com
5. Make sure to remove # from the name and email line in the config file.
6. Press the ESCAPE key to disabled insert mode.
7. start type :wq and press enter
   -> It will save the configuration details.

---

Steps to Clone the Repository on the User’s Machine

1. Go to the GitHub server, log in with your credentials
2. Navigate to the repository that we have already created.
3. Click on the Code (green color) button, and copy the repository from there.
4. Open the Git terminal in the C:\GitHubCode folder.
5. Run the command below to clone the repo
   -> git clone https://github.com/Divya4255/AutomationPractice.git
6. Hit Enter -> It will clone repository from server to your local machine.
7. The repository folder will be created on the local machine.

---

Steps to Create a New File and Push to the GitHub Server

1. Create a text file in the git repository folder (AutomationPractice) and rename as demo_file.txt
2. Open the text file and add some content to the file -> save the file.
3. Open the Git terminal in C:\GitHubCode\AutomationPractice folder.
4. Run the git status command
   -> git status: it will show the new demo file in red color.
5. Run the git add command
   -> git add file_path/filename # It will add the file to GitHub tracking
6. Check the status again.
   -> git status # It will show the demo file in green color.
7. Initiate commit operation
   -> git commit -m “adding new file to repo.”
   -> It will complete the commit operation.
8. Initiate the git push operation.
   -> git push
   -> It will launch a pop-up
   -> Click and open in browser option.
   -> It will open in browser and click on the Authorize git ecosystem button.
   -> Now push will be successful and file will be push to the server.
   -> Check on GitHub server, the file is available on GitHub server.

---

Home Work For Practice:

1. Create three different file and push them to the server.
2. Update file1 and push(git status, git add, git commit, git push) it.
3. Rename file2 and push it from the terminal.
4. Delete file3 and push it from terminal.

---

Create a Common Repo and Provide Access

1. Create a repository with the name: e.g., GTM_PlaywrightTS_BATCH11
2. Get students’ email and provide Access to collaborate.
   Go to Repository -> Settings -> Collaborators -> Add People -> Enter Your email -> Select User -> Add to Repository
3. People will receive an invitation via email.
4. Open the email, click View Invitation, then accept the invitation.
5. Everyone has to accept the invitation.
6. Make sure to accept the invitation from the laptop, and your GitHub account is already open in the same browser
   where you open the mail account.
7. Once the invitation is accepted, the user will be able to see the common repository.

---

Clone the Common Repo, Add folder your name

1. Go to the common repository -> click on code (green button)
   -> click on copy clipboard to copy URL.
2. Open the Git terminal in the C:\GitHubCode folder on the local system
3. Run this command to clone the common repository
   -> git clone https://github.com/sqatools/GTM_PlaywrightTS_BATCH11.git
4. It will clone the command repository into a C:\GitHubCode to the local directory.
   -> repository folder name: GTM_PlaywrightTS_BATCH11
5. Create folder with your name in repo e.g. Deepesh and Add file inside the your folder e.g. first_file.txt
6. Navigate back to git terminal.
7. ON git terminal run below command to go inside repository folder.
   cd GTM_PlaywrightTS_BATCH11 -> It will open GTM_PlaywrightTS_BATCH11 folder.
8. Check status using below command
   -> git status : New Folder name will show in red color.
9. Run git add command
   -> git add /FolderName
10. Initiate commit operation.
    -> git commit -m “added”
11. Perform git push operation
    -> git push
12. If push is rejected repeat this steps until push it not successful.
    -> git pull
    -> it will open merge editor
    -> we have to close the edit with command using :wq (save file)
    -> Once the edit is closed, re-initiate the push operation
    -> git push
    -> if push is still rejected (Repeat again from “git pull” command)

################ Multi branching in git

1. Go to Git Repository on server : GTM_PlaywrightTS_BATCH11
2. Click on repository dropdown. default is main
3. click on view all branches.
4. Create branch with your name e.g. deepesh_branch.
   -> New Branch
   -> Provide Branch Name e.g. firstname_branch
   -> click on create branch button
   -> Verify branch is created successfully.
5. Open git terminal in repository folder
6. run command to update the repo
   -> git pull (all newly created branches will show in the console output)
7. Check current active branch
   -> git branch : It will show main as active branch in green color.
8. Switch to new branch.
   -> git checkout deepesh_branch
9. check again active branch
   -> git branch : your branch will show as active branch in green color e.g. deepesh_branch
10. Go to your dedicated folder and add file inside the folder
    Folder Name : Deepesh
    Filename : deepesh_feature_file.txt (don’t add space in filename)

11 Go back to terminal and check status
-> git status : newly added file will show in red color

12. Run git add command
    -> git add
13. Initiate commit operation
    -> git commit -m “added new file to feature branch”
14. Initiate push operation
    -> git push : file will push to the server on dedicated branch.
15. Go to GitHub server and verify file is available in dedicated folder in your branch.

################### Create pull from server

1. Go to server and navigate to repository.
2. Click on “Compare & pull request” button (green button)
3. Provide pull request description.
4. Add reviwers to review the code.
5. Click on create pull button.

################### Create workflow file in branch

1. Go to repository on GitHub server
2. Navigate to Actions Tab.
3. Click on New Workflow (green color) button
4. Select any workflow from given list. e.g. simple workflow
5. click on configure button
6. Select your branch from left side dropdown e.g. deepesh_branch.
7. Provide workflow name default name is blank.yml
   default path: GTM_Playwright_Batch11/.gitHub/workflow/blank.yml keep this path alive
   pull_request:
   branches: [ “main” ] remove this part: this will execute workflow for every single push
   push:
   branches: [ “main” ]
8. click on commit changes button.
9. It will open pop to provide commit message -> we can click on commit changes
   and push to the current branch.
10. It will create workflow on your dedicated branch and execute along with each
    PR.

########## Resolve Merge conflict

conflict scenario

1. Create file1 in main branch add some code from line 1 to 10.
2. Create new branch from main branch and then modify same file1 and same line numbers from 1 to 10.
3. In main branch, modify same on same number of lines and push it.
4. Create pull request from feature to main branch
5. It will create conflict.
6. We have to resolve conflict and merge the change

Steps to reproduce conflict scenario

1. Open git terminal in repository folder.
   -> make sure your current active branch should be main
   -> if not then you can switch to main branch.
   -> ‘git checkout main’ # it will switch to main branch.
   -> ‘git pull’ : Update your main branch with all change from server.
   -> ‘git branch’ : current active branch should be main branch in green color
2. Create a file with name e.g. dy_conflict_file.txt, and code snipet in the file, and save the file.
   var num1 = 10
   if (num1%2 == 0) {
   console.log(“This is even number”)
   } else {
   console.log(“This is odd number”)
   }
3. Push file to main branch.
   -> git status: show file in read color
   -> git add
   -> git status : show file in green color
   -> git commit -m “added file”
   -> git push : It push is rejected, then pull the code and perform push operation.
   -> git pull : it will open editor, we have close it with :wq! command.
   -> then try to push again, repeat (pull, push), until it is not successful.
4. Create a branch from local git bash terminal.
   -> git checkout -b “dy_conflict_branch”
5. Update dy_conflict_file.txt file as given below. if (num1%2 == 0) {
   console.log(“This is even number, divisible by 2”)
   } else {
   console.log(“This is odd number, not divisible by 2”)
   }
6. go back to terminal and run below command
   -> git status : shows in red color
   -> git add
   -> git status : shows file in green color
   -> git commit -m “initiate commit operation”
7. run below command to push local branch to server
   -> git push –set-upstream origin dy_conflict_branch
   -> push will be successful in feature.
8. change branch from conflict branch to main branch in terminal
   -> git checkout main
   -> git pull : it will update all changes from server to local machine.
9. Open conflict file in your folder and update few change in file content.
   var num1 = 10
   if (num1%2 == 0) {
   console.log(“condition is True”)
   console.log(“This is even number, can divide by 2”)
   } else {
   console.log(“condition is False”)
   console.log(“This is odd number, can not divide by 2”)
   }
10. push the file change in main branch.
    -> git status
    -> git add
    -> git commit -m “updated file”
    -> git push (repeat pull and push commands)
11. Go to GitHub server and create pull request from conflict branch to main branch
    -> go to repository
    -> search your branch name and select the branch.
    -> if the branch is old, then it will show contribute button
    -> click on contribute button and click on ‘Open pull request’ button.
    -> Provide request details (reviewer, description assignee)
    -> click on create pull request button.
12. It will show merge conflict between main branch and feature branch.
    -> ‘merge pull request’ button will be in disable state. This branch has conflicts that must be resolved
    Use the web editor or the command line to resolve conflicts before continuing. Deepesh/dy_conflict_file.txt

—— Resolve merge conflict locally ——

13. Go back to git terminal
14. switch to feature branch.
    -> git checkout dy_conflict_branch
15. run a command on terminal to update feature branch with main branch
    -> git pull origin main
    -> it will show conflict message on terminal Auto-merging Deepesh/dy_conflict_file.txt CONFLICT (content): Merge conflict in Deepesh/dy_conflict_file.txt Automatic merge failed; fix conflicts and then commit the result.
16. Open dy_conflict_file.txt on local machine, will show below content

var num1 = 10
if (num1%2 == 0) {

HEAD : change from feature BRANCH (dy_conflict_branch)

<<<<<<< HEAD
console.log(“This is even number, divisible by 2”)
} else {

console.log(“This is odd number, not divisible by 2”)

Changes from MAIN branch

console.log(“condition is True”)
console.log(“This is even number, can divide by 2”)
} else {
console.log(“condition is False”)
console.log(“This is odd number, can not divide by 2”)

9f9d33c6d4f9d945d512c3b40e36783b758295fd
}

17. Update the file content as per your requirements. var num1 = 10
    if (num1%2 == 0) {
    console.log(“condition is True”)
    console.log(“This is even number, divisible by 2”)
    } else {
    console.log(“condition is False”)
    console.log(“This is odd number, not divisible by 2”)
    }
18. go to git terminal and run below commands
    -> git status : It will show in red color
    -> git add
    -> git commit -m “resolved merge”
    -> git push
19. Once the push is successful, merge will conflict will be resolved in pull request
    -> Now go back to git server and check pull request, there is no conflict anymore.
20. We can merge changes from feature to main branch.

Data type conversion means changing a value from one type to another.

👉 There are two types of conversion:

1. Implicit Conversion (Type Coercion)
2. Explicit Conversion (Type Casting)

---

🔹 1. Implicit Conversion (Automatic)

JavaScript automatically converts types when needed.

✅ Example 1: String + Number

let result = "5" + 2;
console.log(result); // "52"

👉 Number 2 is converted to string.

---

✅ Example 2: Number – String

let result = "5" - 2;
console.log(result); // 3

👉 String "5" is converted to number.

---

✅ Example 3: Boolean Conversion

let result = true + 1;
console.log(result); // 2

👉 true → 1, false → 0

---

✅ Example 4: Null Conversion

let result = null + 5;
console.log(result); // 5

👉 null behaves like 0

---

⚠️ Strange Cases

console.log("5" * "2"); // 10
console.log("hello" * 2); // NaN

👉 "hello" cannot be converted → NaN (Not a Number)

---

🔹 2. Explicit Conversion (Manual)

You manually convert using JavaScript functions.

---

✅ Convert to Number

Using Number()

Number("123");    // 123
Number("abc");    // NaN
Number(true);     // 1
Number(false);    // 0

---

Using parseInt() and parseFloat()

parseInt("10.5");   // 10
parseFloat("10.5"); // 10.5

---

✅ Convert to String

Using String()

String(123);      // "123"
String(true);     // "true"

---

Using .toString()

let num = 100;
num.toString();   // "100"

---

✅ Convert to Boolean

Using Boolean()

Boolean(1);        // true
Boolean(0);        // false
Boolean("");       // false
Boolean("Hello");  // true
Boolean(null);     // false
Boolean(undefined);// false

---

🔹 Truthy vs Falsy Values

❌ Falsy Values:

• 0
• "" (empty string)
• null
• undefined
• NaN
• false

✅ Truthy Values:

Everything else is true

Boolean("Hi"); // true
Boolean(100);  // true

---

🔹 Comparison with Type Coercion

== (Loose Equality)

console.log("5" == 5); // true

👉 Converts types before comparison

---

=== (Strict Equality)

console.log("5" === 5); // false

👉 No conversion → safer

---

🧠 Quick Summary

Conversion Type	Example	Result
Implicit	"5" + 2	"52"
Implicit	"5" - 2	3
Explicit	Number("10")	10
Explicit	String(10)	"10"
Explicit	Boolean(0)	false

JavaScript Data Types (Basics)

JavaScript data types define the kind of value a variable can hold.

👉 There are two main categories:

1. Primitive Data Types
2. Non-Primitive (Reference) Data Types

---

🔹 1. Primitive Data Types

Primitive types store single values and are immutable.

✅ 1. Number

Represents both integers and floating-point numbers.

let age = 25;
let price = 99.99;

---

✅ 2. String

Represents text (inside quotes).

let name = "Deepesh";
let message = 'Hello World';

---

✅ 3. Boolean

Represents true or false.

let isLoggedIn = true;
let isAdmin = false;

---

✅ 4. Undefined

A variable declared but not assigned a value.

let x;
console.log(x); // undefined

---

✅ 5. Null

Represents intentional absence of value.

let data = null;

---

✅ 6. BigInt

Used for very large integers.

let bigNumber = 123456789012345678901234567890n;

---

✅ 7. Symbol

Used for unique identifiers.

let id = Symbol("userId");

---

🔹 2. Non-Primitive (Reference) Data Types

These store collections or complex data.

---

✅ 1. Object

Key-value pairs.

let user = {
  name: "Deepesh",
  age: 25,
  isActive: true
};

---

✅ 2. Array

Ordered list of values.

let fruits = ["apple", "banana", "mango"];

---

✅ 3. Function

A block of reusable code.

function greet() {
  return "Hello!";
}

---

🔹 typeof Operator

Used to check the data type.

console.log(typeof 10);          // number
console.log(typeof "Hello");     // string
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof null);        // object (known JS bug)
console.log(typeof {});          // object
console.log(typeof []);          // object

---

⚠️ Important Notes

• null returns "object" → historical bug in JavaScript
• Arrays are technically objects
• Functions are also treated as objects

---

🧠 Quick Summary Table

Type	Example
Number	10, 3.14
String	"Hello"
Boolean	true, false
Undefined	let x;
Null	null
BigInt	123n
Symbol	Symbol("id")
Object	{name: "John"}
Array	[1,2,3]
Function	function(){}

---

🚀 Simple Example Combining All

let user = {
  name: "Deepesh",     // string
  age: 25,             // number
  isLoggedIn: true,    // boolean
  balance: 1000000000000000000n, // BigInt
  id: Symbol("id"),    // symbol
  hobbies: ["coding", "music"], // array
  address: null        // null
};console.log(typeof user);

Operators in JavaScript are symbols used to perform operations on variables and values. They are essential for writing logic, calculations, and conditions

1. Arithmetic Operators

Used for mathematical calculations.

Operator	Description	Example
+	Addition	5 + 2 = 7
-	Subtraction	5 - 2 = 3
*	Multiplication	5 * 2 = 10
/	Division	10 / 2 = 5
%	Modulus (remainder)	5 % 2 = 1
**	Exponentiation	2 ** 3 = 8

Example:

let a = 10;
let b = 3;console.log(a + b); // 13
console.log(a % b); // 1

---

2. Assignment Operators

Used to assign values to variables.

Operator	Example	Meaning
=	x = 5	Assign 5
+=	x += 3	x = x + 3
-=	x -= 2	x = x – 2
*=	x *= 2	x = x * 2
/=	x /= 2	x = x / 2

Example:

let x = 5;
x += 3; // 8

---

3. Comparison Operators

Used to compare two values (returns true/false).

Operator	Description
==	Equal (value only)
===	Strict equal (value + type)
!=	Not equal
!==	Strict not equal
>	Greater than
<	Less than
>=	Greater than or equal
<=	Less than or equal

Example:

console.log(5 == "5");   // true
console.log(5 === "5");  // false

---

4. Logical Operators

Used to combine conditions.

Operator	Description
&&	AND
`
!	NOT

Example:

let age = 20;if (age > 18 && age < 30) {
  console.log("Young adult");
}

---

5. Unary Operators

Operate on a single operand.

Operator	Description
++	Increment
--	Decrement
typeof	Returns type
!	Logical NOT

Example:

let num = 5;
num++; // 6console.log(typeof num); // number

---

6. Ternary Operator

Short form of if-else.

Syntax:

condition ? value1 : value2;

Example:

let age = 18;
let result = age >= 18 ? "Adult" : "Minor";

---

7. Special Operators

Some useful additional operators:

Operator	Description
?.	Optional chaining
??	Nullish coalescing
in	Check the property in the object
instanceof	Check object type

Example:

let user = {};
console.log(user?.name); // undefined (no error)let value = null ?? "default";
console.log(value); // "default"

---

✅ Summary

• Arithmetic → calculations
• Assignment → assign values
• Comparison → compare values
• Logical → combine conditions
• Ternary → short if-else
• Special → modern JS features

---

What Are Variables in JavaScript?

In JavaScript, variables are declared using var, let, and const. These keywords define how variables behave in terms of scope and mutability. Modern JavaScript development strongly favors let and const because they provide better control and reduce unexpected bugs. If you’re building dynamic websites or applications, understanding variables is absolutely essential because they drive logic, interactivity, and data handling.

Why Variables Matter in Programming

Variables allow your program to process user input, perform calculations, and manage application state. Think of them as the memory of your application. Without variables, even simple tasks like storing a username or calculating a total price would be impossible.

Real-Life Analogy for Variables

Consider a backpack you carry every day. You can put books, gadgets, or food inside it. Some items you replace frequently, while others stay the same. That’s exactly how variables behave depending on how you declare them.

---

Types of Variable Declarations

Understanding var

The var The keyword is the oldest method for declaring variables in JavaScript. It is function-scoped, meaning it is accessible throughout the function in which it is defined. One unique characteristic of var is that it allows both redeclaration and reassignment, which can sometimes introduce bugs if not handled carefully.

var name = "John";
var name = "Doe"; // Allowed
console.log(name); // Output: Doe

Because of these limitations, developers rarely use var in modern applications unless maintaining legacy code.

---

Understanding let

The let keyword was introduced in ES6 and is now widely used. It provides block-level scope, meaning the variable is only accessible within the block {} where it is defined. This makes code more predictable and easier to debug.

let age = 25;
age = 30; // Allowed
// let age = 35; ❌ Not allowed

Using let ensures that variables don’t accidentally leak outside their intended scope.

---

Understanding const

The const keyword is used to declare variables whose values should not change. Once assigned, a const variable cannot be reassigned. However, if the variable holds an object or array, its internal properties can still be modified.

const country = "India";
// country = "USA"; ❌ Error

This makes const ideal for values that should remain constant throughout the program.

---

Key Differences Between var, let, and const

Scope Explained

Keyword	Scope Type
var	Function/Global
let	Block
const	Block

---

Reassignment vs Redeclaration

Keyword	Reassign	Redeclare
var	Yes	Yes
let	Yes	No
const	No	No

---

Hoisting Behavior

JavaScript uses a mechanism called hoisting, where variable declarations are moved to the top of their scope during execution. However, var is initialized with undefined, while let and const remain uninitialized until execution reaches their declaration.

---

Rules for Naming Variables

Valid Naming Conventions

• Start with a letter, _, or $
• Can include numbers (not at the beginning)
• Case-sensitive

Common Mistakes to Avoid

• Using reserved keywords
• Starting names with numbers
• Using unclear variable names

---

Rules to define a variable name

✅ 1. Allowed Characters

• Variable names can contain:
  • Letters (a–z, A–Z)
  • Digits (0–9)
  • Underscore (_)
  • Dollar sign ($)

✔ Example:

let name;
let user1;
let _count;
let $price;

---

❌ 2. Cannot Start with a Number

• A variable name must NOT start with a digit

❌ Wrong:

let 1name;

✔ Correct:

let name1;

---

❌ 3. No Spaces Allowed

• Variable names cannot contain spaces

❌ Wrong:

let user name;

✔ Correct:

let userName;

---

❌ 4. Cannot Use Reserved Keywords

• You cannot use JavaScript reserved words like:
  • let, var, const, if, else, function, etc.

❌ Wrong:

let var = 10;

---

✅ 5. Case Sensitive

• JavaScript is case-sensitive

let name = "John";
let Name = "Doe"; // different variable

---

✅ 6. Use Meaningful Names (Best Practice)

• Always use descriptive names

✔ Good:

let userAge = 25;
let totalPrice = 100;

❌ Bad:

let x = 25;

---

✅ 7. Use camelCase (Convention)

• JavaScript commonly uses camelCase

✔ Example:

let firstName;
let totalAmount;

---

✅ 8. Avoid Special Characters

• Do NOT use symbols like @, #, %, etc.

❌ Wrong:

let user@name;

---

✅ 9. Use let, const, or var

• Modern JavaScript prefers:
  • let → for changeable values
  • const → for constants

let age = 20;
const PI = 3.14;

---