class Person {

  constructor(name, email) {

    this.name = name;

  }

  toString() {

    return `name: ${this.name}`;

  }

}

class Teacher extends Person {

  constructor(name, subject) {

    super(name);

    this.subject = subject;

  }

  toString() {

    return super.toString() + ` subject: ${this.subject}`;

  }

}

const teacher = new Teacher('testname', 'testSubject');

console.log(teacher.toString());

const { assign } = Object

const { min, max, floor, round, abs } = Math

// `hslToRgb` and `rgbToHsl` functions from the amazing Raphael library

// by Dmitry Baranovskiy

// https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js

export function hslToRgb({ h, s, l, a }) {

  let H = h

  let S = s

  let L = l

  s /= 100

  l /= 100

  let r, g, b, x, c

  h = (h % 360) / 60

  c = 2 * s * (l < .5 ? l : 1 - l)

  x = c * (1 - abs(h % 2 - 1))

  r = g = b = l - c / 2;

  h = floor(h)

  r += [c, x, 0, 0, x, c][h]

  g += [x, c, c, x, 0, 0][h]

  b += [0, 0, x, c, c, x][h]

  r *= 255; g *= 255; b *= 255

  r = round(r)

  g = round(g)

  b = round(b)

  return { r, g, b, h: H, s: S, l: L, a }

}

export function rgbToHsl({ r, g, b, a }) {

  let R = r

  let G = g

  let B = b

  r /= 255

  g /= 255

  b /= 255

  let h, s, l, w, m, c;

  w = max(r, g, b);

  m = min(r, g, b);

  c = w - m;

  h = (c == 0 ? null :

        w == r ? (g - b) / c :

        w == g ? (b - r) / c + 2 :

                 (r - g) / c + 4)

  h = ((h + 360) % 6) * 60 / 360;

  l = (w + m) / 2;

  s = (c == 0 ? 0 : l < .5 ?

    c / (2 * l) :

    c / (2 - 2 * l));

  h *= 360

  s *= 100

  l *= 100

  h = round(h)

  s = round(s)

  l = round(l);

  return { h, s, l, r: R, g: G, b: B, a }

}

const fromDec = dec => ({

  r: dec >> 16,

  g: dec >> 8 & 255,

  b: dec & 255

})

const fromHex = hex =>

  fromDec(Number('0x' + hex.slice(1)))

const components = def =>

  def.match(/[0-9\.]+/g).map(parseFloat)

const fromRgb = rgb => {

  const [r, g, b, a] = components(rgb)

  return { r, g, b, a: a ?? 1 }

}

const fromHsl = hsl => {

  const [h, s, l, a] = components(hsl)

  return { h, s, l, a: a ?? 1 }

}

const utils = {

  hex: (def, o) => assign(o, rgbToHsl(

    fromHex(def)), { a: o.a ?? 1 }

  ),

  rgb: (def, o) => assign(o, rgbToHsl(fromRgb(def))),

  hsl: (def, o) => assign(o, hslToRgb(fromHsl(def))),

  prop: (def, o) => {

    const name = Object.keys(def)[0]

    o[name] = def[name]

    if (name.match(/[rgb]/)) assign(o, rgbToHsl(o))

    if (name.match(/[hsl]/)) assign(o, hslToRgb(o))

    return o

  }

}

const types = { '#': 'hex', r: 'rgb', h: 'hsl', '[': 'prop' }

const type = str => types[str[0]]

const hx = c => {

  const chan = (+c).toString(16)

  if (chan.length === 0) return '00'

  if (chan.length === 1) return '0' + chan

  return chan

};

export function shade(def) {

  const o = {

    set(def) {

      const method = utils[type(String(def))]

      if (method != null) method(def, o)

    },

    hsl: _ => `hsla(${o.h}, ${o.s}%, ${o.l}%, ${o.a})`,

    rgb: _ => `rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,

    hex: _ => `#${hx(o.r)}${hx(o.g)}${hx(o.b)}`

  }

  o.set(def)

  return o;

}

'0123'.charAt('1') // -> '1'

'0123'.charAt(1.45) // -> '1'

'0123'.charAt(true) // -> '1'

'0123'.charAt() // -> '0'

'0123'.charAt(NaN) // -> '0'

'0123'.charAt(-1) // -> ''

Number.prototype.charAt = String.prototype.charAt

NaN.charAt() // -> 'N'

Boolean.prototype.charAt = Boolean.prototype.charAt

true.charAt() // -> t

// Safari and Firefox only... no Chrome support at time of this post

Object.assign(document.body.style, { 

  margin: 0,

  display: 'grid',

  'grid-template-columns': '1fr 1fr 1fr',

});

const hwbBlock = () => {

  const hue = Math.round(Math.random() * 360)

  const white = Math.round(

    Math.random() * Math.random() * 100)

  const black = Math.round(

    Math.random() * Math.random() * 100)

  const col = `hwb(${hue} ${white}% ${black}%)`

  document.body.innerHTML += `

    <div 

      style="

        width: 100%;

        height: 4em;

        font-family: sans-serif;

        text-align: center;

        line-height: 2.3;

        color: white;

        text-shadow: 1px 1px 5px black;

        background:${col}">${col}</div>

  `

}

Array(102).fill(0).map(hwbBlock);

const stepBetweenA = (min, max, steps) => 

  Array(steps).fill(0).reduce((prev, curr, i) => {

    prev.push(min + ((max - min) / (steps - 1)) * i)

    return prev

  }, [])

const stepBetweenB = (min, max, steps) => {

  steps -= 1

  const diff = (max - min) / steps

  const result = [min]

  for (let i = 0; i < steps; i++) {

    result.push(min += diff)

  }

  return result

}

console.log('a', stepBetweenA(10, 110, 4))

console.log('b', stepBetweenB(10, 110, 4))

const ITER = 10000

console.time('a')

for (let i = 0; i < ITER; i++) {

  stepBetweenA(10, 110, 4)

}

console.timeEnd('a')

  console.time('b')

for (let i = 0; i < ITER; i++) {

  stepBetweenB(10, 110, 4)

}

console.timeEnd('b')