# 🧮 JavaScript's Math Object & If Statements! 🚀

---

### 🧮 **Math Object in JavaScript is Useful**

1. **💡 Introduction to the Math Object**
    

🚀 **Description**: The `Math` object in JavaScript is a built-in tool providing handy properties and methods for mathematical operations.

```javascript
// Common properties of Math object
console.log(Math.PI); // 3.141592653589793
console.log(Math.E);  // 2.718281828459045
```

📘 **Explanation**: Constants like `Math.PI` (π) and `Math.E` (Euler’s number) make math tasks a breeze.

---

2. **🔢 Rounding Numbers**
    

```javascript
let x = 3.21;
console.log(Math.round(x));  // 3
console.log(Math.floor(x));  // 3
console.log(Math.ceil(x));   // 4
console.log(Math.trunc(x));  // 3
```

📊 **Explanation**:

* `Math.round()`: Nearest integer.
    
* `Math.floor()`: Always rounds down.
    
* `Math.ceil()`: Always rounds up.
    
* `Math.trunc()`: Removes decimal part.
    

---

3. **🚀 Power & Roots**
    

```javascript
let x = 3;
let y = 2;
console.log(Math.pow(x, y));   // 9
console.log(Math.sqrt(81));    // 9
```

🧠 **Explanation**:

* `Math.pow(base, exponent)`: Raises a number to a power.
    
* `Math.sqrt()`: Computes the square root.
    

---

4. **📈 Logarithms**
    

```javascript
let x = 10;
console.log(Math.log(x)); // ≈ 2.302585
```

💡 **Explanation**:

* `Math.log()`: Returns the natural logarithm (base e) of a number.
    

---

5. **📐 Trigonometric Functions**
    

```javascript
let x = Math.PI / 4; // 45 degrees in radians
console.log(Math.sin(x));  // ≈ 0.707
console.log(Math.cos(x));  // ≈ 0.707
console.log(Math.tan(x));  // ≈ 1.0
```

📏 **Explanation**:

* `Math.sin()`: Sine of an angle.
    
* `Math.cos()`: Cosine of an angle.
    
* `Math.tan()`: Tangent of an angle.
    

---

6. **🔀 Absolute Value & Sign**
    

```javascript
let x = -3.21;
console.log(Math.abs(x));  // 3.21
console.log(Math.sign(x)); // -1
```

📍 **Explanation**:

* `Math.abs()`: Absolute value, removing the negative sign.
    
* `Math.sign()`: Indicates if a number is positive, negative, or zero.
    

---

7. **🏆 Finding Max & Min Values**
    

```javascript
let x = 3, y = 2, z = 1;
console.log(Math.max(x, y, z)); // 3
console.log(Math.min(x, y, z)); // 1
```

📊 **Explanation**:

* `Math.max()`: Returns the largest value.
    
* `Math.min()`: Returns the smallest value.
    

---

### 🤔 **If Statements in JavaScript**

1. **💡 Basic if Statement**
    

🚀 **Description**: An `if` statement checks a condition. If true, it runs the code; if false, it skips.

```javascript
let age = 25;

if (age >= 18) {
    console.log("You are old enough to enter this site");
}
```

📘 **Explanation**:

* **Condition**: If `age >= 18`, the message is printed.
    
* If false, nothing happens.
    

---

2. **↔️ if-else Statement**
    

🚀 **Description**: The `else` block runs if the `if` condition is false.

```javascript
let age = 13;

if (age >= 18) {
    console.log("You are old enough to enter this site");
} else {
    console.log("You must be 18+ to enter this site");
}
```

📘 **Explanation**:

* **Condition**: If `age >= 18`, print the first message.
    
* **Else**: If not, print the second message.
    

---

3. **➕ else if Statement**
    

🚀 **Description**: Check multiple conditions with `else if`.

```javascript
let age = 0;

if (age >= 100) {
    console.log("You are TOO OLD to enter this site");
} else if (age == 0) {
    console.log("You can't enter. You were just born.");
} else if (age >= 18) {
    console.log("You are old enough to enter this site");
} else if (age < 0) {
    console.log("Your age can't be below 0");
} else {
    console.log("You must be 18+ to enter this site");
}
```

📘 **Explanation**:

* **Conditions**: Each `else if` checks more conditions.
    
* **Execution**: First true condition’s block runs.
    

---

4. **✅ Using if with Booleans**
    

🚀 **Description**: Boolean variables (`true` or `false`) can be directly used in `if` conditions.

```javascript
let isStudent = false;

if (isStudent) {
    console.log("You are a student");
} else {
    console.log("You are not a student");
}
```

📘 **Explanation**:

* `isStudent` directly controls which block runs.
    

---

5. **🔄 Nested if Statements**
    

🚀 **Description**: Nest `if` statements inside each other for more complex logic.

```javascript
let age = 18;
let hasLicense = true;

if (age >= 16) {
    console.log("You are old enough to drive");
    if (hasLicense) {
        console.log("You have your license");
    } else {
        console.log("You do not have your license yet");
    }
} else {
    console.log("You must be 16+ to have a license");
}
```

📘 **Explanation**:

* **Nested Conditions**: First, checks `age`, then checks `hasLicense`.
    

---

6. **🔄 Comparison Operators**
    

🚀 **Description**: Use operators like `==` to compare values.

```javascript
let age = 0;

if (age == 0) {
    console.log("You can't enter. You were just born.");
}
```

📘 **Explanation**:

* **Comparison**: `age == 0` checks if the value is exactly equal to 0.
    

---

7. **📋 Handling HTML Form Data**
    

🚀 **Description**: Use if statements with user input from HTML forms.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>
</head>
<body>
    <label>Enter your age:</label><br>
    <input type="text" id="myText"><br>
    <button type="submit" id="mySubmit">Submit</button>
    <p id="resultElement"></p>

    <script>
    const myText = document.getElementById("myText");
    const mySubmit = document.getElementById("mySubmit");
    const resultElement = document.getElementById("resultElement");

    mySubmit.onclick = function() {
        let age = Number(myText.value);

        if (age >= 100) {
            resultElement.textContent = "You are TOO OLD to enter this site";
        } else if (age == 0) {
            resultElement.textContent = "You can't enter. You were just born.";
        } else if (age >= 18) {
            resultElement.textContent = "You are old enough to enter this site";
        } else if (age < 0) {
            resultElement.textContent = "Your age can't be below 0";
        } else {
            resultElement.textContent = "You must be 18+ to enter this site";
        }
    }
    </script>
</body>
</html>
```

📘 **Explanation**:

* **Form Interaction**: Takes user input, processes it, and displays a message based on conditions.
    

---

### ✅ **Checked Property in JavaScript**

1. **💡 Basic Usage of** `checked`
    

🚀 **Description**: The `checked` property helps you find whether a checkbox or radio button is selected (`true`) or not (`false`).

```html
<input type="checkbox" id="myCheckbox">
<button onclick="checkStatus()">Check Status</button>

<script>
function checkStatus() {
    let isChecked = document.getElementById("myCheckbox").checked;
    if (isChecked) {
        console.log("Checkbox is checked");
    } else {
        console.log("Checkbox is NOT checked");
    }
}
</script>
```

📘 **Explanation**:

* `checked` property: Returns `true` if the checkbox is selected, `false` otherwise.
    

---

2. **🔄 Dynamically Changing Checked State**
    

🚀 **Description**: You can change the `checked` property dynamically with JavaScript.

```html
<input type="checkbox" id="myCheckbox">
<button onclick="toggleCheckbox()">Toggle Checkbox</button>

<script>
function toggleCheckbox() {
    let checkbox = document.getElementById("myCheckbox");
    checkbox.checked = !checkbox.checked;
}
</script>
```

📘 **Explanation**:

* **Toggle Logic**: The code flips the `checked` state each time the button is clicked.
    

---

3. **📝 Handling Form Data with Checked Property**
    

🚀 **Description**: Use the `checked` property to handle form submission data based on whether checkboxes or radio buttons are selected.

```html
<form id="myForm">
    <input type="checkbox" id="subscribe"> Subscribe to Newsletter <br>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
    let subscribe = document.getElementById("subscribe").checked;
    if (subscribe) {
        console.log("Form submitted with subscription");
    } else {
        console.log("Form submitted without subscription");
    }
}
</script>
```

📘 **Explanation**:

* **Form Interaction**: The form processes the subscription status based on whether the checkbox is selected or not.
    

---

4. **🔄 Using** `checked` with Radio Buttons
    

🚀 **Description**: Radio buttons also utilize the `checked` property for selecting options.

```html
<form>
    <input type="radio" name="gender" value="male" id="male"> Male <br>
    <input type="radio" name="gender" value="female" id="female"> Female <br>
    <button type="button" onclick="checkRadio()">Submit</button>
</form>

<script>
function checkRadio() {
    let isMale = document.getElementById("male").checked;
    let isFemale = document.getElementById("female").checked;
    
    if (isMale) {
        console.log("Selected gender: Male");
    } else if (isFemale) {
        console.log("Selected gender: Female");
    } else {
        console.log("No gender selected");
    }
}
</script>
```

📘 **Explanation**:

* **Radio Buttons**: Only one button can be selected, and `checked` will return `true` for that button.
    

---

5. **👁️ Visual Feedback for User Selections**
    

🚀 **Description**: Provide immediate visual feedback based on the `checked` property.

```html
<input type="checkbox" id="showMessage"> Show Message <br>
<p id="message" style="display: none;">Hello! You checked the box.</p>
<button onclick="toggleMessage()">Toggle Message</button>

<script>
function toggleMessage() {
    let checkbox = document.getElementById("showMessage");
    let message = document.getElementById("message");
    
    if (checkbox.checked) {
        message.style.display = "block";
    } else {
        message.style.display = "none";
    }
}
</script>
```

📘 **Explanation**:

* **Dynamic Visibility**: The paragraph is shown or hidden based on whether the checkbox is checked.
    

---

6. **📋 Managing Multiple Checkboxes**
    

🚀 **Description**: Work with multiple checkboxes, like a "Select All" feature.

```html
<input type="checkbox" id="selectAll" onclick="selectAllCheckboxes(this)"> Select All <br>
<input type="checkbox" class="option"> Option 1 <br>
<input type="checkbox" class="option"> Option 2 <br>
<input type="checkbox" class="option"> Option 3 <br>

<script>
function selectAllCheckboxes(selectAll) {
    let checkboxes = document.getElementsByClassName("option");
    for (let checkbox of checkboxes) {
        checkbox.checked = selectAll.checked;
    }
}
</script>
```

📘 **Explanation**:

* **Select All Logic**: When "Select All" is clicked, it checks/unchecks all other options.
    

---