Published
Edited
Nov 14, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
class Dog {
constructor (name, breed, sex = "unknown"){
this.name = name;
this.breed = breed;
this.animal = "dog"
this.sex = sex;
this.id = NID.nanoid()
}

get mood() {
return this.genMood()
}

genMood() {
return "Happy"
}
}
Insert cell
Insert cell
myPet = new Dog("Fluffy", "poodle")
Insert cell
Insert cell
Insert cell
{
const {name,breed,animal,id} = myPet; // pluck out the values
const out = html`
<p> My ${animal}'s name is ${name}, it is a <span style="color: blue;">${breed}</span>.</p>
<p> The number on it's tag is <b>${id}</b></p>
`; // put them in an HTML string
yield out; // return the HTML
}
Insert cell
Insert cell
Insert cell
makeDogs= (numDogs)=> {
let retVal = [];
for (let i =0; i< numDogs; i++){
let gender = chance.gender();
retVal[i] = new Dog(chance.name({gender: gender}), "Dalmation", gender)
}
return retVal;
}
Insert cell
Insert cell
dogArray = makeDogs(101)
Insert cell
Insert cell
{
const [dog1, dog2, ...dogs] = dogArray;
const out = html `<p>The first two dogs are ${dog1.name} and ${dog2.name}</p>`;
yield out;
}
Insert cell
Insert cell
{
const [, , {name:name3, id:id3}, {name:name4, id:id4}, ...dogs] = dogArray;
const out = html `
<p>The third dog's name is ${name3} who's tag is <b>${id3}</b></p>
<p>The fourth dog's name is ${name4} who's tag is <b>${id4}</b></p>

`;
yield out;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more