JavaScript Employee Array Menu Driven Program

JavaScript Employee Array Menu Driven Program

Here is an example of a JavaScript menu-driven application that prompts the user to enter five employees’ details and stores them in an array list. The program will continue to loop until the user enters “quit”. I’ve included comments to explain the source code:

Script.js

// create an empty array to store the employee objects
const employees = [];

// create a loop that will continue until the user enters "quit"
while (true) {
  // prompt the user to enter an employee's name
  const name = prompt("Enter the employee's name (or 'quit' to exit):");

  // if the user enters "quit", exit the loop
  if (name.toLowerCase() === "quit") {
    break;
  }

  // prompt the user to enter the employee's salary
  const salary = prompt("Enter the employee's salary:");

  // create an object to represent the employee
  const employee = {
    name: name,
    salary: salary
  };

  // add the employee object to the array
  employees.push(employee);
}

// display the array of employees
console.log(employees);

Index.html

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Employee Array Menu Driven Program</h2>
<p>JavaScript Employee Array Menu Driven Program</p>

<p id="demo"></p>

<script src="script.js"></script>

</body>
</html>


In this code, we have defined a single class: the Employee class. This class has two properties: name and salary. The name property is a string that holds the employee’s name, and the salary property is a number that holds the employee’s salary.

The program begins by creating an empty array called employees, which will be used to store the employee objects. Then, it enters a loop that will continue until the user enters “quit”. Within the loop, the program prompts the user to enter an employee’s name and salary, creates an object to represent the employee, and adds the object to the employees array.

Finally, the program displays the array of employees by logging it to the console.

How to run the code

To run the code, you can copy and paste it into a text editor and save it as a JavaScript file (for example, “employee-list.js”). Then, you can run the file in a JavaScript runtime environment such as a web browser or a Node.js environment.

To run the code in a web browser, you can open the JavaScript file in a web browser by double-clicking the file or by dragging it into the web browser window. The program will execute, and the prompts will appear in the browser window.

To run the code in a Node.js environment, you will need to have Node.js installed on your computer. Then, you can open a terminal or command prompt and navigate to the directory where you saved the JavaScript file. From there, you can run the file by typing node employee-list.js. The program will execute, and the prompts will appear in the terminal.

Display using html page

To display the employee list in an HTML page, you can use JavaScript to create the HTML elements and append them to the page. Here is an example of how you could do this:




<!DOCTYPE html>
<html>
<head>
  <title>Employee List</title>
</head>
<body>
  <h1>Employee List</h1>
  <ul id="employee-list"></ul>

  <script>
    // create an empty array to store the employee objects
    const employees = [];

    // create a loop that will continue until the user enters "quit"
    while (true) {
      // prompt the user to enter an employee's name
      const name = prompt("Enter the employee's name (or 'quit' to exit):");

      // if the user enters "quit", exit the loop
      if (name.toLowerCase() === "quit") {
        break;
      }

      // prompt the user to enter the employee's salary
      const salary = prompt("Enter the employee's salary:");

      // create an object to represent the employee
      const employee = {
        name: name,
        salary: salary
      };

      // add the employee object to the array
      employees.push(employee);
    }

    // get the employee list element
    const employeeList = document.getElementById("employee-list");

    // loop through the array of employees and create an li element for each one
    for (const employee of employees) {
      const li = document.createElement("li");
      li.innerHTML = `${employee.name} (${employee.salary})`;
      employeeList.appendChild(li);
    }
  </script>
</body>
</html>

In this code, we have added an unordered list element with the id “employee-list” to the body of the HTML page. Then, we have added a script tag that contains the same JavaScript code as before, which prompts the user to enter employee details and stores them in an array.

After the loop has completed, the script gets the employee list element from the DOM (using the getElementById function) and stores it in a variable called employeeList. Then, it loops through the array of employees and creates an li element for each one. The li element’s inner HTML is set to the employee’s name and salary, separated by parentheses. Finally, the li element is appended to the employee list element using the appendChild function.

This will display a list of employee names and salaries on the HTML page.

Leave a Reply

Your email address will not be published. Required fields are marked *