Practical assignment questions for the topics "Data Types" and "Displaying the Data using

Console":

### Data Types

1. Variable Declaration and Initialization:

- Write a program that declares variables of different data types (integer, float, character,
string, boolean). Initialize them with appropriate values and display these values using console
output.

2. Type Conversion:
- Create a program that demonstrates implicit and explicit type conversion. Include examples
where you convert an integer to a float, a float to an integer, a string to an integer, and an
integer to a string. Print the results to the console.

3. Data Type Operations:

- Develop a program that performs various operations on different data types. For example,
add two integers, concatenate two strings, and perform logical operations on boolean
variables. Display the results of each operation.

4. Array and List Manipulation:

- Write a program that initializes an array or list with a set of integers. Perform operations like
finding the maximum, minimum, sum, and average of the elements. Print the results to the
console.

5. User Input and Data Type Conversion:

- Create a program that prompts the user to enter their age (integer), height (float), and
name (string). Convert these inputs to the appropriate data types if necessary and display
them in a formatted string.

### Displaying the Data using Console

1. Basic Output:
 - Write a program that displays a welcome message and your favorite quote using console
output.

2. Formatted Output:
- Develop a program that accepts a user's first name, last name, and year of birth as inputs.
Display a formatted message that includes their full name and age (assuming the current year
is 2024).

3. Tabular Data Display:

- Create a program that displays a table of squares and cubes for numbers from 1 to 10. Use
formatted strings to align the numbers in columns.

4. Conditional Display:
- Write a program that takes an integer input from the user and displays whether it is even or
odd using a conditional statement.

5. Loop-Based Display:
- Develop a program that uses a loop to display the multiplication table for a number
provided by the user (up to 10 times the number). Ensure the output is neatly formatted.

6. Customized Greeting:
- Write a program that asks the user for their name and the current time (in hours). Based on
the time, display a customized greeting: "Good Morning", "Good Afternoon", or "Good
Evening".

### Combined Assignment

1. Mini Application: Basic Calculator:

- Create a program that acts as a basic calculator. It should accept two numbers and an
operator (+, -, *, /) as inputs. Perform the appropriate operation based on the operator
provided and display the result. Ensure to handle cases where division by zero might occur.

2. Survey Data Display:

 - Write a program that collects survey data from the user, including their name, age, and
favorite programming language. Store the data in appropriate variables and display a summary
of the information collected in a formatted manner.

3. Statistical Data Summary:

- Develop a program that reads a list of floating-point numbers (e.g., test scores). Calculate
the highest score, lowest score, average score, and standard deviation. Display these statistics
with appropriate labels.

### Data Types

1. Practical Question:
- Declare a variable and assign each of the following data types to it: number, string, boolean,
undefined, null, object, and array. Log the type of each variable using `console.log`.

### Commenting

2. Practical Question:
- Write a JavaScript function that calculates the factorial of a number. Use both single-line
and multi-line comments to explain each step of your code.

### Identifiers

3. Practical Question:
- Create variables with valid identifiers to store the following information: a user's first name,
last name, age, and email address. Ensure that each variable follows JavaScript naming
conventions.

### Keywords

4. Practical Question:
 - Write a small script that uses at least five different JavaScript keywords appropriately.
Explain what each keyword does in a comment next to it.

### Declaring the Variables

5. Practical Question:
- Declare three variables using `let`, `const`, and `var`, and demonstrate the difference in
their scope within a function and a block.

### typeof Keyword

6. Practical Question:
- Write a function that takes a single argument and returns the type of the argument. Test
this function with different data types and log the results.

### Math Operators

7. Practical Question:
- Create a script that performs the following mathematical operations: addition, subtraction,
multiplication, division, and modulus. Log the results of each operation.

### Assignment Operators

8. Practical Question:
- Write a script that demonstrates the use of different assignment operators (`=`, `+=`, `-=`,
`*=`, `/=`, `%=`). Explain what each operator does in a comment.

### Operators Precedence

9. Practical Question:
 - Create a complex expression using multiple operators. Log the result and explain the order
of operations that led to that result.

### Logical Operators

10. Practical Question:

- Write a script that uses logical operators (`&&`, `||`, `!`) to determine if a user is eligible for
a discount based on age and membership status. Log the eligibility status.

### Decision Making Statements

11. Practical Question:

- Write a function that takes a number as input and returns whether it is positive, negative,
or zero using if-else statements.

### Type Conversion & Coercion

12. Practical Question:

- Create a script that demonstrates type conversion and coercion by performing operations
between different data types (e.g., number + string, boolean + number). Log the results and
explain the behavior.

### Truthy & Falsy Values

13. Practical Question:

- Write a function that takes any value as input and logs whether it is truthy or falsy.

### Equality Operators == & ===

14. Practical Question:

 - Write a script that compares two variables using both `==` and `===`. Log the results and
explain the difference between the two operators.

### Switch Case

15. Practical Question:

- Write a function that takes a day of the week as input (e.g., "Monday") and logs the
corresponding number of the day (e.g., 1 for Monday) using a switch case statement.

### Statements & Expressions

16. Practical Question:

- Write a script containing at least two statements and two expressions. Log the results and
identify which parts are statements and which are expressions.

### Conditional (Ternary) Operator

17. Practical Question:

- Write a script that uses the conditional (ternary) operator to check if a number is even or
odd. Log the result.

### "use strict"

18. Practical Question:

- Write a script that demonstrates the effect of using `"use strict"`. Show what happens
when you try to use an undeclared variable with and without `"use strict"`.

### Functions

1. Basic Function Definition and Call:

 - Define a function named `greet` that takes a string parameter `name` and prints a greeting
message "Hello, `name`!". Call this function with the argument "Alice".

2. Function with Return Value:

- Create a function called `add` that takes two parameters and returns their sum.
Demonstrate this function by calling it with the arguments 5 and 7, and print the result.

### Function Call & Definition

3. Calling Functions within Functions:

- Define a function `square` that takes a number and returns its square. Then, define another
function `sum_of_squares` that takes two numbers, uses the `square` function to calculate the
squares of both numbers, and returns their sum. Call `sum_of_squares` with arguments 3 and
4 and print the result.

4. Function with Default Parameters:

- Write a function `multiply` that takes two parameters, `a` and `b`, and returns their product.
Set a default value of 1 for `b`. Call this function with a single argument 5, and with two
arguments 5 and 6. Print both results.

### Function Declaration vs Expressions

5. Function Declaration:
- Write a function declaration for a function named `subtract` that takes two arguments and
returns their difference. Call this function with the arguments 10 and 4, and print the result.

6. Function Expression:
- Create a function expression for a function named `divide` that takes two parameters and
returns their quotient. Assign this function to a variable named `divideFunction`. Call
`divideFunction` with the arguments 20 and 4, and print the result.

### Arrow Functions

7. Basic Arrow Function:
- Convert the following function declaration into an arrow function:
```javascript
function double(x) {
return x * 2;
}
```
Call the arrow function with the argument 5 and print the result.

8. Arrow Function with Implicit Return:

- Write an arrow function `isEven` that takes a number and returns `true` if the number is
even, and `false` otherwise. Use implicit return for this function. Test the function with the
argument 8 and print the result.

### Assignments Discussions

9. Discuss Function Assignments:

- Define a function `greetUser` that takes a user object with `firstName` and `lastName`
properties and returns a greeting string "Hello, `firstName` `lastName`!". Assign this function
to a variable `greetFunction`. Call `greetFunction` with an object `{ firstName: "John",
lastName: "Doe" }` and print the result.

10. Higher-Order Functions:

- Write a function `applyOperation` that takes two arguments: a number and a function. The
`applyOperation` function should call the passed function with the number and return the
result. Then, define a function `triple` that takes a number and returns it tripled. Call
`applyOperation` with the arguments 4 and the `triple` function, and print the result.

### Topic 1: Functions Calling Other Functions

1. Calculator Functions:
 - Write a function `add(a, b)` that returns the sum of two numbers.
- Write a function `subtract(a, b)` that returns the difference between two numbers.
- Write a function `multiply(a, b)` that returns the product of two numbers.
- Write a function `divide(a, b)` that returns the division of two numbers.
- Write a main function `calculator()` that takes two numbers and an operator (as a string) as
inputs and calls the appropriate function from the ones defined above to perform the
calculation. Print the result.

2. Temperature Conversion:
- Write a function `celsius_to_fahrenheit(celsius)` that converts Celsius to Fahrenheit.
- Write a function `fahrenheit_to_celsius(fahrenheit)` that converts Fahrenheit to Celsius.
- Write a main function `convert_temperature(temp, scale)` that takes a temperature value
and a scale ('C' for Celsius, 'F' for Fahrenheit) and calls the appropriate conversion function.
Print the result.

### Topic 2: Reviewing Functions

1. Factorial Calculation:
- Write a recursive function `factorial(n)` that returns the factorial of a given number.
- Write a main function `print_factorials()` that prints the factorials of numbers from 1 to 10
using the `factorial` function.

2. Palindrome Check:
- Write a function `is_palindrome(s)` that checks if a given string `s` is a palindrome (reads
the same forward and backward).
- Write a main function `check_palindromes(words)` that takes a list of words and uses the
`is_palindrome` function to check each word. Print whether each word is a palindrome or not.

### Topic 3: Introduction to Arrays

1. Array Initialization and Access:

- Write a program that initializes an array with the first 10 positive integers.
 - Write a function `print_array(arr)` that prints all elements of the array.
- Write a main function that calls `print_array` to display the elements of the initialized array.

2. Sum and Average of Array Elements:

- Write a function `sum_array(arr)` that returns the sum of all elements in an array.
- Write a function `average_array(arr)` that returns the average of the elements in the array.
Use `sum_array` within this function.
- Write a main function that creates an array of 10 numbers, and uses `sum_array` and
`average_array` to print the sum and average of the elements.

### Topic 4: Basic Array Operations

1. Array Reversal:
- Write a function `reverse_array(arr)` that takes an array and returns a new array with the
elements in reverse order.
- Write a main function that initializes an array and prints both the original and reversed
arrays using `reverse_array`.

2. Element Search in Array:

- Write a function `find_element(arr, element)` that searches for an element in an array and
returns its index. If the element is not found, return -1.
- Write a main function that initializes an array and uses `find_element` to search for a
specific element. Print whether the element is found and its index if it is found.

3. Array Sorting:
- Write a function `sort_array(arr)` that sorts an array in ascending order without using
built-in sorting functions.
- Write a main function that initializes an array, prints the unsorted array, calls `sort_array`,
and then prints the sorted array.

#### Topic 1: Introduction to Objects

1. Creating an Object:
- Create an object named `student` with the properties: `name` (string), `age` (number),
`grade` (string), and `subjects` (array of strings). Initialize these properties with appropriate
values.

2. Object Manipulation:
- Add a new property `address` to the `student` object with a nested object containing
`street`, `city`, and `zipCode`.

#### Topic 2: Object Properties

3. Accessing Object Properties:
- Write a function that takes an object and a property name as arguments and returns the
value of the property.

4. Modifying Object Properties:

- Change the `age` property of the `student` object to a new value. Print the updated object.

#### Topic 3: Object Methods

5. Creating Object Methods:
- Add a method `getSummary` to the `student` object that returns a string summarizing the
student's details (e.g., "John is 20 years old and in grade A.").

6. Using Object Methods:

- Call the `getSummary` method and print the returned value.

#### Topic 4: Creating Properties Outside Objects

7. Adding Properties:
- Add a new property `GPA` to the `student` object outside its initial declaration. Set its value
and print the object.

#### Topic 5: Accessing Properties Outside & Inside

8. Internal Access:
- Inside the `student` object, add a method `updateGrade(newGrade)` that updates the
`grade` property.

9. External Access:
- Write a function that takes an object and a new value, then updates the `name` property of
the object to the new value. Test this function on the `student` object.

#### Topic 6: Loops: For Loop

10. Basic For Loop:
- Write a for loop that iterates over the `subjects` array in the `student` object and prints
each subject.

#### Topic 7: While Loop

11. Basic While Loop:
- Write a while loop that prints numbers from 1 to 10.

12. Condition-Based While Loop:

- Using a while loop, print the subjects in the `student` object until you find a specific subject
(e.g., "Math"). Stop the loop when you find this subject.

#### Topic 8: Nested Loops

13. Nested Loop for Multiplication Table:
- Write a nested for loop to print the multiplication table (1 to 10).

14. Nested Loop for Array of Objects:

- Create an array of `student` objects. Use nested loops to print the name of each student
and their subjects.

#### Topic 9: Backward Loops

15. Backward For Loop:
 - Write a for loop that iterates over the `subjects` array in reverse order and prints each
subject.

#### Topic 10: Break & Continue Statements

16. Using Break:
- Write a for loop that prints numbers from 1 to 10, but stops the loop when it reaches 5
using the `break` statement.

17. Using Continue:

- Write a for loop that prints numbers from 1 to 10, but skips the number 5 using the
`continue` statement.

#### Topic 11: Some Misc Examples

18. Random Property Assignment:
- Create a function that randomly assigns a value between 0 and 100 to the `GPA` property
of the `student` object.

19. Combining Concepts:

- Create a new object `teacher` with properties `name`, `subject`, and `students` (an array of
`student` objects). Write a method in the `teacher` object to print each student's name and
grade.

20. Using All Loop Types:

- Create a program that uses a `for` loop to iterate from 1 to 20, a `while` loop inside it to
print numbers until 10, and a `nested loop` to create a pattern like:
```
1
22
333
4444
...
```
### Topic: Modal Dialog Boxes with Event Listeners

1. Creating a Modal Dialog Box: Write a JavaScript function to create a modal dialog box that
displays a message when a button is clicked. The modal should include a "Close" button that
hides the modal when clicked.

2. Event Listener for Modal: Modify your modal dialog box to include an event listener that
triggers a console log message when the modal is opened and another message when it is
closed.

3. Form Submission in Modal: Create a modal dialog box containing a simple form (e.g., name
and email fields). Use event listeners to handle the form submission, validate the inputs, and
display a success message within the modal.

### Topic: Scoping, Local & Global Variables

4. Variable Scope: Write a script that demonstrates the difference between local and global
variables. Define a global variable and a local variable with the same name inside a function.
Log their values inside and outside the function to show the difference.

5. Nested Functions and Scope: Create a function that contains another function inside it.
Demonstrate how variables are scoped within the inner and outer functions by logging their
values at different points.

### Topic: Hoisting

6. Variable Hoisting: Write a script that demonstrates variable hoisting by declaring and
initializing variables before and after they are used. Log the results to show how JavaScript
handles variable hoisting.
7. Function Hoisting: Create a script with two functions: one function declaration and one
function expression. Show how hoisting affects the ability to call these functions before their
definitions in the code.

### Topic: `this` Keyword

8. Understanding `this` in Functions: Write a function within an object and use the `this`
keyword to access a property of the object. Log the value of the property to demonstrate how
`this` works in the context of an object method.

9. Arrow Functions and `this`: Create a script that includes both a regular function and an
arrow function as methods of an object. Use `this` inside both functions and log the results to
show the difference in how `this` is bound in regular functions versus arrow functions.

10. `this` in Event Listeners: Write a script that attaches an event listener to a button. Within
the event listener function, use `this` to reference the button element that was clicked. Log the
`this` keyword to the console to demonstrate its context within the event listener.

### Combined Practical Assignment

11. Comprehensive Assignment: Build a small web application that includes:

- A modal dialog box that opens when a button is clicked.
- A form inside the modal that logs the input values to the console upon submission.
- Demonstration of variable scoping by including both local and global variables.
- Examples of hoisting by using both variable and function hoisting within your script.
- Use of the `this` keyword in various contexts, including object methods and event listeners.

### Regular vs Arrow Functions

1. Convert Regular to Arrow Function:
- Given the following regular function, convert it to an arrow function:
```javascript
 function sum(a, b) {
return a + b;
}
```
- Now, test your arrow function by summing two numbers.

2. Lexical `this` in Arrow Functions:

- Create an object with a method using a regular function and another method using an
arrow function. Demonstrate the difference in how `this` behaves in both methods.

### `arguments` Keyword

3. Function with `arguments`:
- Write a function using the `arguments` keyword to calculate the sum of all parameters
passed to it. Test this function with different numbers of arguments.

4. `arguments` in Arrow Functions:

- Explain why the `arguments` keyword does not work with arrow functions by providing an
example and demonstrating the error.

### Objects vs Primitives

5. Mutability:
- Create a primitive value and an object. Write functions that attempt to modify these values.
Explain the results and demonstrate how primitives and objects handle mutability differently.

6. Comparison:
- Write a comparison function to demonstrate the difference between comparing primitives
and objects. Use `===` and `==` for comparisons and explain the outcomes.

### Primitive Types

7. Primitive Operations:
 - Write a script that performs and logs the results of various operations (addition,
subtraction, multiplication, etc.) on different primitive types (string, number, boolean). Explain
any unexpected results.

8. Type Conversion:
- Create a function that takes a single argument and logs its type. Test this function with
various primitive types and document any implicit type conversions that occur.

### Reference Types

9. Array vs Object References:
- Create an array and an object. Write functions that modify these structures by reference
and by value. Demonstrate the effects of each modification type.

10. Cloning Objects:

- Write a function that clones an object using both shallow and deep copy methods. Explain
the differences and use cases for each approach.

### Restaurant Example (Arrays, Objects, Methods)

11. Restaurant Menu:
- Create an object representing a restaurant. This object should include arrays for the menu
items and methods to add and remove items from the menu. Demonstrate how to use these
methods.

12. Order Calculation:

- Extend the restaurant object to include an array of current orders. Write a method to
calculate the total cost of the orders and another method to clear all orders. Demonstrate
these methods.

### Textarea & Button Actionable (DOM)

13. Dynamic Textarea:
- Write a script to create a `textarea` and a `button` dynamically using JavaScript. When the
button is clicked, the content of the textarea should be logged to the console.
14. Character Count:
- Enhance the previous script by adding a character count display below the textarea. This
count should update in real-time as the user types.

15. Style Toggle:

- Create a button that toggles the style of a textarea between two different styles (e.g.,
background color and font size). Demonstrate the toggling functionality.

#### Topic 1: Regular vs Arrow Functions

1. Function Comparison:
- Write a regular function `greetRegular` that takes a name as an argument and returns a
greeting string.
- Write an arrow function `greetArrow` that performs the same operation.
- Call both functions with the name "Alice" and log the results to the console.

2. Lexical `this`:
- Create an object `person` with a name property and two methods: `sayHelloRegular` (using
a regular function) and `sayHelloArrow` (using an arrow function). Both methods should log a
greeting message using the `name` property.
- Compare the output of both methods when called from the `person` object.

3. Context Binding:
- Write a function `Counter` using a regular function that increments a `count` property every
second. Use `setInterval` for this purpose.
- Convert the `Counter` function to use an arrow function instead and observe any
differences in behavior.

#### Topic 2: `arguments` Keyword

1. Summation Function:
 - Write a function `sumArguments` using the `arguments` keyword that sums all the
arguments passed to it.
- Convert the function to use rest parameters (`...args`) instead of the `arguments` keyword.

2. Dynamic Arguments:
- Create a function `logArguments` that logs each argument passed to it using the
`arguments` keyword.
- Test the function by passing different numbers and types of arguments (e.g., numbers,
strings, objects).

#### Topic 3: Objects vs Primitives

1. Primitive Assignment:
- Create two variables `a` and `b`, where `a` is a primitive type (e.g., a number or string) and
`b` is assigned the value of `a`.
- Modify `a` and log both `a` and `b` to the console to observe the behavior.

2. Object Assignment:
- Create two variables `obj1` and `obj2`, where `obj1` is an object and `obj2` is assigned the
value of `obj1`.
- Modify a property of `obj1` and log both `obj1` and `obj2` to the console to observe the
behavior.

#### Topic 4: Primitive Types

1. Type Identification:
- Write a function `identifyType` that takes a value and logs its type using `typeof`.
- Test the function with different primitive types (number, string, boolean, null, undefined,
symbol, bigint).

2. Default Values:
- Create a variable for each primitive type and log their default values to the console.
#### Topic 5: Reference Types

1. Array Manipulation:
- Create an array `arr` and add some elements to it.
- Create another variable `arrCopy` and assign `arr` to it.
- Modify `arr` and log both `arr` and `arrCopy` to observe the behavior.

2. Object Manipulation:
- Create an object `obj` with some properties.
- Create another variable `objCopy` and assign `obj` to it.
- Modify `obj` and log both `obj` and `objCopy` to observe the behavior.

#### Topic 6: Restaurant (Arrays, Objects, Methods)

1. Restaurant Object:
- Create an object `restaurant` with properties: `name`, `location`, `categories` (array), and
`menu` (array of objects with properties `dish` and `price`).
- Add methods to add a new dish to the menu, remove a dish, and print the entire menu.

2. Order Handling:
- Add a method `placeOrder` to the `restaurant` object that takes a list of dish names,
calculates the total price, and returns an order summary.
- Create some sample orders and test the method.

#### Topic 7: Textarea & Button Actionable (DOM)

1. Interactive Form:
- Create an HTML file with a `textarea` and a `button`.
- Write JavaScript code to alert the content of the `textarea` when the button is clicked.
2. Character Counter:
- Enhance the HTML file by adding a character counter that updates as the user types in the
`textarea`.
- Write JavaScript code to update the counter dynamically.

3. Input Validation:
- Add validation to the `textarea` to ensure it is not empty when the button is clicked.
- Display an error message if the validation fails.

### Event Listeners (Handlers)

#### 1. Add / Remove Elements
1. Task: Create a web page with a button that, when clicked, adds a new paragraph with some
text to a designated section.
- Requirements:
- Use `addEventListener` to handle the button click event.
- Use `document.createElement` to create the new paragraph element.
- Use `parentNode.appendChild` to add the paragraph to the section.
- Bonus: Add a second button that removes the last added paragraph.

2. Task: Create a dynamic list where users can add items using an input field and a button. Each
item should have a 'remove' button to delete that specific item.
- Requirements:
- Use `querySelector` to select the input field and button.
- Use `parentNode.removeChild` to remove the list item when the 'remove' button is
clicked.

#### 2. Change Text

3. Task: Create a web page with a heading that changes its text content to "Hello, World!"
when a button is clicked.
- Requirements:
- Use `querySelector` to select the heading and button.
- Use `textContent` or `innerHTML` to change the heading text.

#### 3. Modify Styles

4. Task: Create a web page with a paragraph and a button that changes the paragraph's text
color and background color when clicked.
- Requirements:
- Use `querySelector` to select the paragraph and button.
- Use `style` property to modify the paragraph's `color` and `backgroundColor`.

### Forms & Its Inputs Events

#### 1. onclick
5. Task: Create a form with a text input and a submit button. When the button is clicked,
display an alert with the current text input value.
- Requirements:
- Use `onclick` event handler on the submit button.
- Use `querySelector` to select the text input and button.
- Use `alert` to display the text input value.

#### 2. onfocus & onblur

6. Task: Create a form with a text input. When the input gains focus, change its border color to
blue. When it loses focus, change the border color back to its original state.
- Requirements:
- Use `onfocus` and `onblur` event handlers.
- Use `style` property to change the border color.

#### 3. onselect
7. Task: Create a text area. When the user selects text within the text area, display the selected
text in an alert box.
- Requirements:
- Use `onselect` event handler.
- Use `window.getSelection` or `textarea.value.substring(textarea.selectionStart,
textarea.selectionEnd)` to get the selected text.

#### 4. onchange
8. Task: Create a dropdown (select) element. When the user selects an option, display the
selected value in a paragraph below the dropdown.
- Requirements:
- Use `onchange` event handler.
- Use `querySelector` to select the dropdown and paragraph.
- Use `textContent` or `innerHTML` to display the selected value.

### Form Validation

#### 1. Form Creation & Styling
9. Task: Create a form with the following fields: username, email, and password. Style the form
using CSS to have a nice layout and appearance.
- Requirements:
- Use HTML to create the form and input fields.
- Use CSS to style the form and input fields (e.g., margins, padding, borders).

#### 2. Writing Functions for Checking or Validating Input Elements

10. Task: Write JavaScript functions to validate the username, email, and password fields when
the form is submitted.
- Requirements:
- Username must be at least 3 characters long.
- Email must be in a valid email format.
- Password must be at least 6 characters long.
- Use `addEventListener` to handle the form submission.
 - Display error messages next to the respective fields if validation fails.

#### 3. Explaining & Implementing Regular Expressions

11. Task: Implement regular expressions for validating the username, email, and password
fields.
- Requirements:
- Use the following regular expressions:
- Username: `^[a-zA-Z0-9_]{3,}$` (alphanumeric and underscores, at least 3 characters)
- Email: `^[^\s@]+@[^\s@]+\.[^\s@]+$`
- Password: `^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$` (minimum 6 characters, at least one
letter and one number)
- Validate the input fields using these regular expressions when the form is submitted.
- Display appropriate error messages if the input does not match the regular expression.

### 1. Form Validation and Its Related Functions (UserDefined & Builtin)
- Assignment: Create a registration form with fields for username, email, and password.
Implement form validation to:
- Ensure the username is at least 5 characters long.
- Validate the email using a regular expression.
- Ensure the password is at least 8 characters long and contains at least one number and one
special character.
- Use both user-defined and built-in validation methods.

### 2. Functions: Default Parameters

- Assignment: Write a function `calculateTotal(price, tax = 0.08, discount = 0)` that calculates
the total cost of an item, including tax and applying a discount. Test the function by calling it
with different numbers of arguments.

### 3. Passing Arguments: Values vs References

- Assignment: Create a function that takes an array and a number as arguments. The function
should add the number to each element of the array. Demonstrate how passing an array
(reference) and a number (value) works by printing the array before and after the function call.

### 4. Callback Functions

- Assignment: Write a function `processArray(arr, callback)` that processes each element of an
array using the callback function provided. Test the function by passing different callback
functions (e.g., a function to square each element, a function to increment each element by 1).

### 5. Function as a Parameter to Another Function

- Assignment: Create a function `applyOperation(num1, num2, operation)` that takes two
numbers and an operation function as parameters. The operation function can be any
mathematical operation (addition, subtraction, multiplication, division). Demonstrate this by
passing different operation functions.

### 6. Higher Order Functions

- Assignment: Write a higher-order function `filterArray(arr, test)` that takes an array and a test
function as parameters and returns a new array containing only the elements that pass the
test. For example, use a test function that filters out even numbers.

### 7. Function Returns Functions

- Assignment: Implement a function `createMultiplier(factor)` that returns a new function
which multiplies its argument by the given factor. Use this to create multipliers for 2, 5, and 10,
and test them.

### 8. Call(), Apply() and Bind() Methods

- Assignment: Create an object with a method that logs its properties. Write functions outside
the object and use `call()`, `apply()`, and `bind()` to invoke the method with different contexts
and arguments.

### 9. Creating an Object, Methods, Accessing Properties

- Assignment: Create an object representing a car with properties (make, model, year) and
methods (start, stop). Implement methods to access and modify these properties.
Demonstrate accessing and changing properties using dot and bracket notation.
### 10. Event Handling
- Assignment: Create a simple webpage with a button and a text input field. Write JavaScript to
handle the button click event to change the text of a paragraph element to the value entered
in the input field.

### 11. IIFE (Immediately Invoking Function Expressions)

- Assignment: Write an IIFE that calculates and logs the square of a number immediately after
defining the function.

### 12. Self Executing Functions

- Assignment: Create a self-executing anonymous function that initializes a counter variable
and logs the counter value each time it is incremented, demonstrating closure.

### 13. Accessing Global & Private Variables

- Assignment: Create a function that has a private variable and methods to get and set its
value. Demonstrate how the variable remains private by trying to access it directly from
outside the function and through the provided methods.

### Closure Functions & Its Different Ways

1. Basic Closure:
- Create a function that returns another function. The returned function should have access
to the variables of the outer function, demonstrating a basic closure.

2. Closure for Data Privacy:

- Implement a counter using a closure that can increment, decrement, and reset the count.
Ensure that the count variable is not directly accessible from outside the function.

3. Module Pattern using Closure:

- Create a simple module that provides an interface to add and retrieve items from an
internal list. The internal list should not be directly accessible from outside the module.
### OOP: Creating Objects with Properties, Methods, Accessing the Data through Objects
4. Object Creation using Object Literals:
- Create an object literal representing a book with properties like title, author, and pages.
Add a method to display the book information.

5. Object Creation using Constructor Functions:

- Write a constructor function to create `Car` objects. Each car should have properties like
`make`, `model`, and `year`, and a method to display the car details.

### Implementing Prototype Property in Creating New Properties outside the Object Literals
6. Prototype Property:
- Create a constructor function for `Person` objects with properties `name` and `age`. Add a
method to the prototype to display the person's details. Then, create a new method outside
the constructor to update the person's age.

### Understanding about the `__proto__`

7. Inspecting `__proto__`:
- Create an object using a constructor function. Inspect its `__proto__` property and
demonstrate how it links to the constructor's prototype.

8. Prototype Chain:
- Create a chain of prototype inheritance. Create a base object with a method, then extend
this base object to a derived object, and demonstrate accessing methods up the prototype
chain.

### Built-in Methods like `hasOwnProperty()`

9. Using `hasOwnProperty()`:
- Create an object with a few properties and demonstrate the use of `hasOwnProperty()` to
check if the properties exist directly on the object.

10. Enumerating Properties:

 - Create an object with a mix of own properties and inherited properties. Write a function to
list only the object's own properties using `hasOwnProperty()`.

### Creating Array Objects

11. Array Methods:
- Create an array of numbers and demonstrate the use of array methods like `push()`,
`pop()`, `shift()`, `unshift()`, `map()`, `filter()`, and `reduce()`.

12. Custom Array Method:

- Extend the Array prototype to include a method `sum` that returns the sum of all elements
in the array.

### ES Concepts: Creating Class, Class Declaration with Properties and Methods
13. Class Declaration:
- Create a class `Rectangle` with properties `width` and `height`. Add a method to calculate
the area of the rectangle. Create an instance and demonstrate the use of the class.

14. Inheritance with Classes:

- Create a base class `Animal` with properties `name` and `age`, and a method to display the
animal's details. Extend this class to create a `Dog` class with an additional property `breed`
and a method to display the dog's details.

15. Static Methods:

- Add a static method to the `Rectangle` class created in question 13 that compares two
rectangles and returns the one with the larger area.

16. Private Properties and Methods (ES2022+):

- Create a class `BankAccount` with private properties `balance` and private methods to
deposit and withdraw money. Implement public methods to interact with these private
members.
Date: 13-06-2024

### Assignment 1: Advanced Registration Form

Objective:
Create a responsive registration form with advanced features and validation using HTML5 and
CSS3.

Requirements:
1. Form Structure:
- First Name, Last Name (text inputs)
- Username (text input)
- Email (email input)
- Password (password input)
- Confirm Password (password input)
- Date of Birth (date input)
- Gender (radio buttons: Male, Female, Other)
- Country (dropdown)
- Interests (checkboxes: multiple options)
- Profile Picture (file upload)
- Short Bio (textarea)
- Terms and Conditions (checkbox)
- Submit and Reset buttons

2. HTML5 Features:
- Use the `required` attribute to make fields mandatory.
- Use the `pattern` attribute for custom validation on Username (e.g., only alphanumeric
characters).
- Use `maxlength` and `minlength` for Username and Password.
 - Use `type="email"` for the email input.
- Use `type="date"` for the date of birth.
- Use `input` elements with the `type="radio"` for gender selection.
- Use `input` elements with the `type="checkbox"` for interests.

3. CSS3 Features:
- Use flexbox or grid for form layout.
- Style the form with a visually appealing design, including hover effects on buttons.
- Use media queries to ensure the form is responsive.
- Implement custom styles for input focus states.
- Style validation messages using `:invalid` and `:valid` pseudo-classes.
- Add custom styles for the file upload input.

### Assignment 2: Multi-Step Form with Progress Bar

Objective:
Create a multi-step form that includes a progress bar to indicate the user's progress through
the form.

Requirements:
1. Form Steps:
- Step 1: Personal Information (Name, Email, Phone)
- Step 2: Address Information (Address Line 1, Address Line 2, City, State, ZIP Code)
- Step 3: Account Information (Username, Password, Confirm Password)
- Step 4: Confirmation

2. HTML5 Features:
- Use `fieldset` and `legend` to group related elements.
- Use `type="email"` for email input.
- Use `type="tel"` for phone input with a pattern for validation.
 - Use the `required` attribute for all mandatory fields.
- Use `input` elements with the `type="text"` for address fields.

3. CSS3 Features:
- Implement a horizontal progress bar that updates as the user moves through the steps.
- Use transitions to animate the progress bar.
- Style the form steps using flexbox or grid for alignment.
- Create a visually appealing design with hover and focus effects.
- Implement media queries to ensure the form is responsive.

4. JavaScript (Optional):
- Add JavaScript to handle form navigation (Next/Previous buttons).
- Update the progress bar dynamically as the user moves through the steps.

### Assignment 3: Survey Form with Conditional Logic

Objective:
Create a survey form that shows or hides sections based on the user's previous answers.

Requirements:
1. Form Structure:
- User Information (Name, Age, Email)
- Survey Question 1: Do you own a car? (Yes/No radio buttons)
- If "Yes", show:
- Car Make (dropdown)
- Car Model (text input)
- Survey Question 2: How often do you drive? (dropdown: Daily, Weekly, Monthly, Rarely)
- Survey Question 3: What is your primary purpose of driving? (checkboxes: Work, Leisure,
Other)
- Submit button
2. HTML5 Features:
- Use `input` elements with `type="radio"` for Yes/No questions.
- Use `input` elements with `type="checkbox"` for multiple-choice questions.
- Use the `required` attribute for mandatory fields.
- Use `type="email"` for the email input.

3. CSS3 Features:
- Use flexbox or grid to layout the form.
- Style the form to be visually appealing with hover and focus effects.
- Use media queries to ensure the form is responsive.
- Add transitions to smoothly show/hide sections.

4. JavaScript (Optional):
- Add JavaScript to show/hide sections based on user input.
- Validate the form before submission.

### Assignment 4: Contact Form with Custom Styles and Validation

Objective:
Create a contact form with custom styles and HTML5 validation features.

Requirements:
1. Form Structure:
- Name (text input)
- Email (email input)
- Subject (text input)
- Message (textarea)
- Submit button
2. HTML5 Features:
- Use the `required` attribute for mandatory fields.
- Use `type="email"` for the email input.
- Use `maxlength` and `minlength` attributes for the subject and message.
- Use the `pattern` attribute for the name field to allow only alphabets.

3. CSS3 Features:
- Style the form with custom colors, borders, and shadows.
- Implement hover and focus effects for inputs.
- Use CSS transitions to animate input focus states.
- Add media queries to ensure the form is responsive.
- Style validation messages using `:invalid` and `:valid` pseudo-classes.
- Create a custom submit button with hover effects.