function generateHTML() {
  console.log(teamArray);

  function generateManagerCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">Office Number: ${data.officeNumber}</li>
    </ul>
  </div>
  </div>
  </div>`;
  }

  function generateEngineerCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">Github: ${data.getGithub()}</li>
     
    </ul>
  </div>
  </div>
    </div>
  `;
  }

  function generateInternCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">School: ${data.school}</li>
    </ul>
  </div>
  </div>
  </div>
  `;
  }
  const template = `
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
   

      ${teamArray.map((employee) => {
        if (employee.getRole() == "Manager") {
          return generateManagerCard(employee);
        } else if (employee.getRole() == "Engineer") {
          return generateEngineerCard(employee);
        } else {
          return generateInternCard(employee);
        }
      })}
  </body>
</html>
`;
  console.log(template);

  // write the HTML file

  fs.writeFile("./dist/index.html", template, () => {
    console.log("html file successfully generated");
  });
}
// write the output to an HTML file
write the output to an HTML file
write the output to an HTML file
function generateHTML() {
  console.log(teamArray);
  function generateManagerCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">Office Number: ${data.officeNumber}</li>
    </ul>
  </div>
  </div>
  </div>`;
  }
  function generateEngineerCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">Github: ${data.getGithub()}</li>
    </ul>
  </div>
  </div>
    </div>
  `;
  }
  function generateInternCard(data) {
    return ` <div class="row">
    <div class="col-sm-6">
    <div class="card" style="width: 18rem;">
    <div class="card-header">
      ${data.name}
    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">ID: ${data.id}</li>
      <li class="list-group-item">Email: ${data.email}</li>
      <li class="list-group-item">School: ${data.school}</li>
    </ul>
  </div>
  </div>
  </div>
  `;
  }
  const template = `
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <title>Document</title>
  </head>
  <body>
      ${teamArray.map((employee) => {
        if (employee.getRole() == "Manager") {
          return generateManagerCard(employee);
        } else if (employee.getRole() == "Engineer") {
          return generateEngineerCard(employee);
        } else {
          return generateInternCard(employee);
        }
      })}
  </body>
</html>
`;
  console.log(template);
  fs.writeFile("./dist/index.html", template, () => {
    console.log("html file successfully generated");
  });
}
function generateHTML ( ) { console . log ( teamArray ) ; function generateManagerCard ( data ) { return ` ${ data . name } ${ data . id } ${ data . email } ${ data . officeNumber } ` ; } function generateEngineerCard ( data ) { return ` ${ data . name } ${ data . id } ${ data . email } ${ data . getGithub ( ) } ` ; } function generateInternCard ( data ) { return ` ${ data . name } ${ data . id } ${ data . email } ${ data . school } ` ; } const template = ` ${ teamArray . map ( ( employee ) => { if ( employee . getRole ( ) == "Manager" ) { return generateManagerCard ( employee ) ; } else if ( employee . getRole ( ) == "Engineer" ) { return generateEngineerCard ( employee ) ; } else { return generateInternCard ( employee ) ; } } ) } ` ; console . log ( template ) ; fs . writeFile ( "./dist/index.html" , template , ( ) => { console . log ( "html file successfully generated" ) ; } ) ; }
write the output to an HTML file
write the output to an HTML file
// write the HTML file