Options
Save All Changes
Revert changes
Delete All Changes
Contents
Create UI
1
A simple clock
2
Semantic-UI example
Click to show TOC
Create UI
 
// React exanple <h1><b>Hello World</b> {(new Date()).toLocaleDateString()}</h1>
Run
A simple clock
Using React to render a simple clock
 
// React JSX function Clock() { const clock = () => ReactDOM.render(<div style={{fontSize: "2rem"}}><b>Time:</b> {(new Date()).toLocaleTimeString()} </div>, 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
 
// JSX <div className="ui stackable padded grid"> <div className="ten wide column"> <p style={{background: "grey"}}>.ten.wide.column</p> <div className="ui stackable grid"> <div className="eight wide column"><p style={{background: "grey"}}>.eight.wide.column</p></div> <div className="eight wide column"><p style={{background: "grey"}}>.eight.wide.column</p></div> </div> </div> <div className="six wide column"><p style={{background: "grey"}}>.six.wide.column</p></div> </div>
Run
Page - 1
Executing previous dependent scripts
Waiting to execute