Skip to content

Instantly share code, notes, and snippets.

@lebbe
Created May 22, 2023 12:56
Show Gist options
  • Save lebbe/04b02903a91df91d4f7aac5c9412af82 to your computer and use it in GitHub Desktop.
Save lebbe/04b02903a91df91d4f7aac5c9412af82 to your computer and use it in GitHub Desktop.
Show a toast for five seconds, for debugging etc
/**
*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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment