JS Output w/Objects Project • 2 min read

%%js
console.log("Dogs");

class Dog {
  constructor(species, weight, height, color) {
    this.species = species;
    this.weight = weight;
    this.height = height;
    this.color = color;
  }

  getJSON() {
    const obj = {
      type: typeof this,
      species: this.species,
      weight: this.weight,
      height: this.height,
      color: this.color
    };
    return obj;
  }

  logIt() {
    console.log(this);
  }
}

function constructDog() {
  const dogs = [
    new Dog("Golden Retriever", 55, 202, "Blonde"),
    new Dog("German Shepherd", 49, 22, "Black and Tan"),
    new Dog("Border Collie", 27, 18, "Black"),
    new Dog("Husky", 35, 20, "Gray and White"),
    new Dog("Labrador Retriever", 25, 22, "Blonde"),
    new Dog("Corgi", 26, 9.8, "Brown")
  ];

  return dogs;
}

function generateDogTable(dogs) {
  const table = document.createElement("table");
  table.innerHTML = `
    <tr>
      <th>Species</th>
      <th>Weight</th>
      <th>Height</th>
      <th>Color</th> <!-- Corrected "color" header -->
    </tr>
  `;
  
  dogs.forEach(dog => {
    const row = table.insertRow();
    row.insertCell().textContent = dog.species;
    row.insertCell().textContent = dog.weight;
    row.insertCell().textContent = dog.height;
    row.insertCell().textContent = dog.color;
  });

  return table;
}

const dogs = constructDog();
dogs.forEach(dog => {
  dog.logIt();
});

const table = generateDogTable(dogs);

<IPython.core.display.Javascript object>