CheezItMan · November 16, 2018 22:31
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel = "stylesheet"
     type = "text/css"
     href = "style.css"
    />
  </head>
  <body>
    <main id="content"></main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/index.js b/index.js

 const capitalize = text => text.replace(/^\w/, c => c.toUpperCase());

 const pets = [
  {
    name: 'kylo', species: 'dog', human: 'kari', mammal: true
  },
  {
    name: 'gecky', species: 'lizard', human: 'dan', mammal: false
  },
  {
    name: 'hedwig', species: 'owl', human: 'harry', mammal: false
  },
  {
    name: 'crookshanks', species: 'cat', human: 'hermione', mammal: true
  },
  {
    name: 'scabbers', species: 'rat', human: 'ron', mammal: true
  },
 ];
 $(document).ready( () => {
  pets.sort((petA, petB) => {
    if (petA.name > petB.name) return 1;
    return -1;
  });

  // Create a table element (not in the DOM)
  const table = $('<table></table>');

  // Create a thead element and stick in the cells
  const tableHead = $('<thead></thead>')
  Object.keys(pets[0]).forEach((key) => {
    tableHead.append(`<th>${capitalize(key)}</th>`);
  });

  // append the thead to the table
  table.append(tableHead);

  // Loop through the pets and append a row
  //  for each pet.
  pets.forEach((pet) => {
    const row = $(`<tr>
    <td>${capitalize(pet.name)}</td>
    <td>${pet.species}</td>
    <td>${capitalize(pet.human)}</td>
    <td>${pet.mammal}</td>
    </tr>`);
    if (pet.mammal) {
      row.addClass('mammal');
    } else {
      row.addClass('orange');
    }
    table.append(row)
  });

  // Select where to put the content
  const main = $('#content');
  // Append a title
  main.append('<h1>Ada Pets</h1>');
  // Append the table
  main.append(table);
 });
diff --git a/style.css b/style.css

 table {
  border: 1px solid black;
  font-size: 3em;
 }
 thead {
  background-color: lightblue;
 }
 td, th {
  border: 1px solid black;
  padding: 5px;
  text-align: center;
 }
 .mammal {
  background-color: navy;
  color: white;
 }

 .orange {
  background-color: orange;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel = "stylesheet"
	type = "text/css"
	href = "style.css"
	/>
	</head>
	<body>
	<main id="content"></main>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="index.js" type="text/javascript"></script>
	</body>
	</html>

	const capitalize = text => text.replace(/^\w/, c => c.toUpperCase());

	const pets = [
	{
	name: 'kylo', species: 'dog', human: 'kari', mammal: true
	},
	{
	name: 'gecky', species: 'lizard', human: 'dan', mammal: false
	},
	{
	name: 'hedwig', species: 'owl', human: 'harry', mammal: false
	},
	{
	name: 'crookshanks', species: 'cat', human: 'hermione', mammal: true
	},
	{
	name: 'scabbers', species: 'rat', human: 'ron', mammal: true
	},
	];
	$(document).ready( () => {
	pets.sort((petA, petB) => {
	if (petA.name > petB.name) return 1;
	return -1;
	});

	// Create a table element (not in the DOM)
	const table = $('<table></table>');

	// Create a thead element and stick in the cells
	const tableHead = $('<thead></thead>')
	Object.keys(pets[0]).forEach((key) => {
	tableHead.append(`<th>${capitalize(key)}</th>`);
	});

	// append the thead to the table
	table.append(tableHead);

	// Loop through the pets and append a row
	// for each pet.
	pets.forEach((pet) => {
	const row = $(`<tr>
	<td>${capitalize(pet.name)}</td>
	<td>${pet.species}</td>
	<td>${capitalize(pet.human)}</td>
	<td>${pet.mammal}</td>
	</tr>`);
	if (pet.mammal) {
	row.addClass('mammal');
	} else {
	row.addClass('orange');
	}
	table.append(row)
	});

	// Select where to put the content
	const main = $('#content');
	// Append a title
	main.append('<h1>Ada Pets</h1>');
	// Append the table
	main.append(table);
	});

	table {
	border: 1px solid black;
	font-size: 3em;
	}
	thead {
	background-color: lightblue;
	}
	td, th {
	border: 1px solid black;
	padding: 5px;
	text-align: center;
	}
	.mammal {
	background-color: navy;
	color: white;
	}

	.orange {
	background-color: orange;
	}