bendc

const element = document.querySelector("span");
const finalPosition = 600;                                                                                    

const time = {
  start: performance.now(),
  total: 2000
};

const tick = now => {
  time.elapsed = now - time.start;

bendc

const time = {
  start: performance.now(),
  total: 2000
};

const tick = now => {
  time.elapsed = now - time.start;
  if (time.elapsed < time.total) requestAnimationFrame(tick);                                                 
};                

bendc

const time = {
  start: null,
  total: 2000
};

const tick = now => {
  if (!time.start) time.start = now;
  time.elapsed = now - time.start;
  if (time.elapsed < time.total) requestAnimationFrame(tick);
};

bendc

const tick = now => {
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

bendc

// k = progress between 0 and 1

const easing = {
  quadratic: {
    in(k) {
      return k * k;
    },

    out(k) {
      return k * (2 - k);

bendc

const randomInterval = (() => {
  const random = (min, max) => Math.random() * (max - min) + min;
  return (callback, min, max) => {
    const time = {
      start: performance.now(),
      total: random(min, max)
    };
    const tick = now => {
      if (time.total <= now - time.start) {
        time.start = now;                                                                                     

bendc

const store = (() => {
  let state;
  return todos => {
    if (todos) {
      state = todos;
      render("todo-list");
    }   
    return state;
  };  
})();

bendc

const state = ["Buy milk", "Call Sarah", "Pay bills"];

customElements.define("todo-item", class extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({mode: "open"});
    root.innerHTML = ` 
      <label>
        <input type=checkbox>
        <slot></slot>

bendc

customElements.define("hello-message", class extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({mode: "open"});
    root.innerHTML = "Hello <slot></slot>";
  }

  static get observedAttributes() {
    return ["name"];
  }

bendc

customElements.define("hello-message", class extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({mode: "open"});
    root.innerHTML = "Hello <slot></slot>";
  }
});