KisJs Examples

Example 1 - Render string with quotes

				Kis.render('Hello', document.getElementById('example1_output'));

Example 2 - Render string with template literals

				var name = 'Hello';
				Kis.render(`<strong>${name} World</strong>`, document.getElementById('example2_output'));

Example 9 - Render HTML element

				var divElem = document.createElement('div');
				divElem.innerHTML = `<strong>Example 9</strong>`;
				
				Kis.render(divElem, document.getElementById('example9_output'));

Example 3 - Append strings

				var name = 'Testing';
				Kis.append(`${name} 1`, document.getElementById('example3_output'));
				Kis.append(`<br>${name} 2`, document.getElementById('example3_output'));
				Kis.append(`<br>${name} 3`, document.getElementById('example3_output'));

Example 8 - Append strings and HTML elements

				var outputElem = document.getElementById('example8_output');
				
				var name = 'Testing';
				Kis.append(`${name} 1`, outputElem);
				
				var divElem = document.createElement('div');
				divElem.innerHTML = `<strong>Bold</strong>`;
				
				Kis.append(divElem, outputElem);

Example 4 - Join array with template literals

				var array = ['apple', 'banana', 'orange'];
				var output = Kis.foreach(array).join((fruit) => `<li>${fruit}</li>`);
				Kis.render(`<ul>${output}</ul>`, document.getElementById('example4_output'));

Example 5 - Iterate array and append

				var array = ['apple', 'banana', 'orange'];
				Kis.foreach(array).append((fruit) => `<input name="fruits" type="radio" id="${fruit}"><label for="${fruit}">${fruit}</label>`, document.getElementById('example5_output'));

Example 6 - Iterate array and apply a function

				var array = [1, 10, 100];
				var value = 0;
				Kis.foreach(array).do((item) => {
					var previousValue = value;
					value += item;
					Kis.append(`${previousValue} + ${item} = ${value}<br>`, document.getElementById('example6_output'));
				});

Example 7 - Fadeout

Fade Out Example

Example 10 - Encode HTML

				var example10Elem = document.getElementById('example10_output');
				var input = '<test>& Example "10"';
				
				Kis.append(Kis.encodeHtml(input), example10Elem);

Example 11 - Movable

				Kis.movable(document.getElementById('movable1'));
				Kis.movable(document.getElementById('movable2'), {moveElemLeft: 50});

Movable element 1

Movable element 2

Example 12 - Custom checkboxes

Code:

Checkbox

Unchecked and disabled checkbox

Checked checkbox

Checked and disabled checkbox