Show a toast for five seconds, for debugging etc

toast.js

/**
 *Send in any js object, with strings as field values, and the keys and values will be shown
 * on screen as a "toast" for five seconds. I.e:
 *
 * showToast({
 *   action: 'This is a text',
 *   name: 'This is another text',
 * })
 *
 * will be shown as a toast on screen, with *action* and *name* with bold text, followed by
 * their respective texts in regular font.
 */

export function showToast(texts) {
  const toast = document.createElement('div');

  Object.keys(texts).forEach((key) => {
    const tekst = document.createElement('div');
    const bold = document.createElement('strong');
    const rest = document.createElement('span');

    const s = tekst.style;
    s.display = 'flex';
    s.gap = '10px';
    bold.innerText = key;
    rest.innerText = texts[key];
    tekst.append(bold);
    tekst.append(rest);
    toast.append(tekst);
  });

  const s = toast.style;
  s.position = 'fixed';
  s.top = '20px';
  s.right = 0;
  s['z-index'] = 100000;
  s.background = '#027dc9';
  s.color = 'white';
  s.padding = '20px';
  s.display = 'flex';
  s['flex-direction'] = 'column';
  s.gap = '20px';

  document.body.append(toast);

  window.setTimeout(function () {
    toast.remove();
  }, 5000);
}