Options
Save All Changes
Revert changes
Delete All Changes
Contents
Create UI
1
A simple clock
2
Semantic-UI example
2.1
Creating a target
2.2
Click to show TOC
Create UI
 
//HTML in display area // add some style $$.HTML(` <style> .center { display: block; margin-left: auto; margin-right: auto; } </style> `) // Now render some html $$.HTML(` <div style="height: 30rem"> <h1>Hello World ${(new Date()).toLocaleDateString()}</h1> <img class="center" src="https://www.w3schools.com/html/pic_trulli.jpg" /> </div> `)
Run
 
// JSX example var aClock= () => ( <div style={{height: "30rem"}}> <h1 class="center"><b>Hello World</b> {(new Date()).toLocaleDateString()}</h1> <img class="center" src="https://www.w3schools.com/html/pic_trulli.jpg" /> </div> ); aClock()
Run
A simple clock
Using React to render a simple clock
 
// React JSX function Clock() { const clock = () => ReactDOM.render(aClock(), document.getElementById('clock-id')); $$.lastly( () => setInterval(clock, 1000)); // execute after all rendering of output $$.HTML('<div id="clock-id" /><br /><br /><br /><br />---------------'); // render some HTML } Clock();
Run
Semantic-UI example
Creating a target
!html
 
var strHtml = ` <div style="width: 70%; margin-left: 10rem"> <div class="ui three buttons"> <button class="ui active button red">One</button> <button class="ui button green">Two</button> <button class="ui button">Three</button> </div> </div> `; ducument.getElementById('ui-target').innerHTML = strHtml;
Run
#
 
// Javascript - $$.HTML = builtin HTML $$.HTML( );
Run
 
// JSX - ( <div style={{width: "70%", marginLeft: '10rem'}}> <div class="ui three buttons"> <button class="ui active button red">One</button> <button class="ui button green">Two</button> <button class="ui button">Three</button> </div> </div> )
Run
Page - 1
Executing previous dependent scripts
Waiting to execute