For shortcuts:

• _(s, p = document) is equivalent to p.querySelector(s).
• __(s, p = document) is equivalent to p.querySelectorAll(s).

For example:

• _('p') - Look for the first <p> element in this document (this document is default source).
• __('a') - Look for the all <a> elements in this document.
• __('a', _('span')) - Look for the all <a> elements in the first <span> from this document.
• __('div>a', xxx) - Look for the all <a> that is direct child of a <div> elements in a DOM object called xxx.

dom(j) function is a shortcut of the vanilla element = document.createElement(), element.attrX = value and element.appendChild() functions. It accepts a DOM tree in JSON format, for example:

dom({_: 'ul', children:[
	{_: 'li', textContent: 'Point 1'},
	{_: 'li', textContent: 'Point 2, with attributes', style: 'color:red'},
	{_: 'li', textContent: 'Point 3, with children ', children: [
		{_: 'code', textContent: 'child'}
	]}
]})
	

In this JSON, there are 2 special keys:

• _ - The element name, passed to document.createElement(). Default: div.
• children - Append other DOMs as children for this DOM.

The above example will generate:

<ul>
	<li>Point 1</li>
	<li style="color: red;">Point 2, with attributes</li>
	<li>Point 3, with children <code>child</code></li>
</ul>
	

You may pass a HTML string to create a DOM. For example, the following two are equivalent:

dom({_: 'p', textContent: 'ABC'});
dom('<p>ABC</p>').children[0];
	

Dialog is used to provide passive information to the user.

The dialog will be displayed at the bottom of the viewport. You may stack multiple dialogs, the older dialog will be stacked at the bottom, newer at the top.

You may optionally provide a timeout. The dialog will be destroyed once timeout is reached. If the timeout is 0, the user needs to manually close the dialog by clicking the dialog.

Dialog is passive. The user can continue to read and interact with the webpage.

To display a dialog, use dialog(d, delay = 5000, color = 'lightgrey'), where:

• d - HTML element returned from document.createElement() or dom(). If you pass a string, Bearweb uses the current time and the supplied string to create a text element.
• delay - Time timeout (unit: ms). Default: 5000ms.
• color - Background color, default: lightgrey.

For example:

dialog('Some string');
dialog('Need manual close', 0, 'blue');
dialog(dom(
	{_: 'p', children: [
		{_: 'span', textContent: 'Complex ', style: 'color:red'},
		{_: 'span', textContent: 'element ', style: 'color:blue'},
		{_: 'span', textContent: 'dialog', style: 'color:orange'}
	]}
), 0, 'blue');
	

Click the following buttons to fire the dialogs:

Bearweb provides 3 shortcuts specially optimized for client-server API use:

dialog_success(200, 'Success message');
dialog_warning(300, 'Warning message', 2000);
dialog_error(500, 'Error message', 0);
	

Where:

• dialog_success - Use green color.
• dialog_warning - Use orange color.
• dialog_error - Use red color.
• code - HTML code such as 400 for bad requests. You may pass custom code or any printable value (either int or string).
• message - Message to print. You may any printable value.
• delay - Time timeout.

Click the following buttons to fire the dialogs:

On the other hand, modal is used to provide non-passive information to the user.

The modal will be displayed at the center of the viewport. You can only place one modal.

Modal is non-passive. The user cannot interact with the page while the modal is displayed.

To display the modal, usemodal(dom), where:

• dom - HTML element returned from document.createElement() or dom().

To close the modal, use modal() without parameters.

For example:

modal(dom({_: 'div', children: [
	{_: 'p', textContent: '🍪 This website uses cookies for essential functionalities. By continuing accessing the site, you accept the cookies.'},
	{_: 'button', textContent: 'I consent', onclick: () => modal(), style: 'width:100%;margin:0;'}
]}));
	

Click the following buttons to fire the modal: