# web-d09

**Repository Path**: professor_baptiste/web-d09

## Basic Information

- **Project Name**: web-d09
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-30
- **Last Updated**: 2025-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- **Invite Link:** [Click here to gain the right to push](https://gitee.com/professor_baptiste/web-d09/invite_link?invite=6955991ca0cc86b6b524b9da4d402fd98d34c3ce3bcadd44e511b1509403e86ec2d0c6247d67be724741ea06917047f0)
## **Exercise 1: Basic Function with Return**

### **Objective**:
The goal of this exercise is to practice writing a simple function that takes input parameters, performs a calculation, and returns the result.

### **File Structure**:
```
ex_01/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `calculateArea` that calculates the area of a rectangle.
2. The function should take two parameters: `width` and `height`.
3. Use the `return` keyword to return the calculated area.
4. Call the function in your JavaScript file and display the result on the webpage (e.g., inside a `<p>` element).

### **Example Output**:
Input:
```javascript
const area = calculateArea(5, 3);
console.log(area); // Expected output: 15
```

Webpage Display:
```
The area of the rectangle is 15.
```

### **Concepts to Use**:
1. **Functions**: Define reusable blocks of code using the `function` keyword.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
2. **Return Statement**: Use `return` to send a value back from the function.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return)

---

## **Exercise 2: Function to Format a Greeting**

### **Objective**:
The goal of this exercise is to create a function that formats a personalized greeting message and returns it as a string.

### **File Structure**:
```
ex_02/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `createGreeting` that takes two parameters: `firstName` and `lastName`.
2. The function should return a greeting message like `"Hello, John Doe!"`.
3. Display the returned message on the webpage when a button is clicked.

### **Example Output**:
Input:
```javascript
const greeting = createGreeting("John", "Doe");
console.log(greeting); // Expected output: "Hello, John Doe!"
```

Webpage Display:
```
Hello, John Doe!
```

### **Concepts to Use**:
1. **Template Literals**: Use `${}` to embed variables into strings.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
2. **Return Statement**: Ensure the function returns the formatted string.

---

## **Exercise 3: Function to Check Even or Odd Numbers**

### **Objective**:
The goal of this exercise is to write a function that checks whether a number is even or odd and returns the result.

### **File Structure**:
```
ex_03/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `checkEvenOrOdd` that takes one parameter: `number`.
2. The function should return `"even"` if the number is divisible by 2, otherwise return `"odd"`.
3. Use an input field in your HTML to allow users to enter a number, and display the result on the webpage.

### **Example Output**:
Input:
```javascript
console.log(checkEvenOrOdd(4)); // Expected output: "even"
console.log(checkEvenOrOdd(7)); // Expected output: "odd"
```

Webpage Display:
```
The number 4 is even.
The number 7 is odd.
```

### **Concepts to Use**:
1. **Modulo Operator (`%`)**: Use `%` to check divisibility.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder)
2. **Return Statement**: Ensure the function returns the correct result.

---

## **Exercise 4: Function to Calculate Discounted Price**

### **Objective**:
The goal of this exercise is to create a function that calculates the discounted price of an item based on a given discount percentage.

### **File Structure**:
```
ex_04/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `calculateDiscountedPrice` that takes two parameters: `originalPrice` and `discountPercentage`.
2. The function should calculate the discounted price and return it.
3. Allow users to input the original price and discount percentage via an HTML form, and display the result on the webpage.

### **Example Output**:
Input:
```javascript
const discountedPrice = calculateDiscountedPrice(100, 20);
console.log(discountedPrice); // Expected output: 80
```

Webpage Display:
```
The discounted price is $80.
```

### **Concepts to Use**:
1. **Arithmetic Operations**: Use multiplication and subtraction to calculate the discounted price.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators)
2. **Return Statement**: Ensure the function returns the final discounted price.

---

## **Exercise 5: Function to Generate a Random Password**

### **Objective**:
The goal of this exercise is to write a function that generates a random password of a specified length and returns it.

### **File Structure**:
```
ex_05/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `generatePassword` that takes one parameter: `length`.
2. The function should generate a random password consisting of uppercase letters, lowercase letters, numbers, and symbols.
3. Return the generated password and display it on the webpage when a button is clicked.

### **Example Output**:
Input:
```javascript
console.log(generatePassword(8)); // Example output: "A1b@C2d%"
```

Webpage Display:
```
Your random password is: A1b@C2d%
```

### **Concepts to Use**:
1. **Random Number Generation**: Use `Math.random()` to generate random characters.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
2. **String Manipulation**: Use string methods to build the password.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)

---

## **Exercise 6: Function to Filter Even Numbers from an Array**

### **Objective**:
The goal of this exercise is to write a function that filters even numbers from an array and returns a new array containing only the even numbers.

### **File Structure**:
```
ex_06/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `filterEvenNumbers` that takes one parameter: `numbersArray`.
2. The function should iterate through the array and return a new array containing only the even numbers.
3. Display the filtered array on the webpage.

### **Example Output**:
Input:
```javascript
const evenNumbers = filterEvenNumbers([1, 2, 3, 4, 5, 6]);
console.log(evenNumbers); // Expected output: [2, 4, 6]
```

Webpage Display:
```
The even numbers are: [2, 4, 6].
```

### **Concepts to Use**:
1. **Array Iteration**: Use loops (e.g., `for` or `forEach`) or array methods (e.g., `filter`) to process the array.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
2. **Return Statement**: Ensure the function returns the filtered array.

---

## **Exercise 7: Function to Convert Temperature**

### **Objective**:
The goal of this exercise is to write a function that converts temperature between Celsius and Fahrenheit and returns the converted value.

### **File Structure**:
```
ex_07/
├── index.html
├── css/
│   └── styles.css
└── js/
    └── script.js
```

### **Instructions**:
1. Write a function named `convertTemperature` that takes two parameters: `temperature` and `unit` (`"C"` for Celsius or `"F"` for Fahrenheit).
2. If the unit is `"C"`, convert the temperature to Fahrenheit using the formula:  
   `F = (C * 9/5) + 32`.  
   If the unit is `"F"`, convert the temperature to Celsius using the formula:  
   `C = (F - 32) * 5/9`.
3. Return the converted temperature and display it on the webpage.

### **Example Output**:
Input:
```javascript
console.log(convertTemperature(0, "C")); // Expected output: 32
console.log(convertTemperature(32, "F")); // Expected output: 0
```

Webpage Display:
```
0°C is equal to 32°F.
32°F is equal to 0°C.
```

### **Concepts to Use**:
1. **Conditional Statements**: Use `if...else` or a ternary operator to handle different units.
   - [Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
2. **Return Statement**: Ensure the function returns the converted temperature.

---