Tryit demo

We are going to demo some lodash functions

We are per created an array words press Run button to execute

 let words = ['sky', 'wood', 'forest', 'falcon', 
    'pear', 'ocean', 'universe'];

Using some lodash functions 1 _

_.first
_.last

Let's add some HTML

We use the $$.HTML function to do this. The other $$ functions are:

$$.display(value)
$$.clear()
$$.D2('eval-string') eval-string is a javascript expression in string from, the eval string and its value is displayed. This is useful for displaying variables name and value.
$$.HTML(some_html_string) - render html in the display area
$$.lastly( some-function ) - this will be executed after all the display rendering is completed

$$.lastly( // code is activated after all data/html display has been performed 
  () => {
  $('.ui .card')
    .popup({
      hoverable  : true,
      position   : 'bottom left'
      });

}
  ); // activate popup after we have displayed the HTML below

// Display some HTML using $$.HTML(...)
$$.HTML(
`<div class="ui card" data-html="<div class='header'>User Rating</div>
  <div class='content'>
    <div class='ui star rating'><i class='active icon'>
      </i><i class='active icon'></i>
      <i class='active icon'></i><i class='active icon'>
      </i><i class='active icon'></i>
    </div>
  </div>">
  <div class="image">
    <img src="https://semantic-ui.com/images/movies/totoro-horizontal.jpg">
  </div>
  <div class="content">
    <div class="header">My Neighbor Totoro</div>
    <div class="description">
      Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
    </div>
  </div>
  <div class="ui two bottom attached buttons">
    <div class="ui button">
      <i class="add icon"></i>
      Queue
    </div>
    <div class="ui primary button">
      <i class="play icon"></i>
      Watch
    </div>
  </div>
</div>`
)

Page - 1

Create UI Element

Page - 2

Array

so

Customize your display

For this test me are just going to convert to JSON string

Page - 3

Section 1

label 1a

label 1b

label 1c

label 1d

label 1e

label 1f

label 1g

Page - 4

Section 2

label 2a

label 2b

label 2c

label 2d

label 2e

label 2f

label 2g

Page - 5

Section 3

label 3a

label 3b

label 3c

label 3d

label 3e

label 3f

label 3g

Page - 6

Section 4

label 4a

label 4b

label 4c

label 4d

label 4e

label 4f

label 4g

Page - 7

Section 5

label 5a

label 5b

label 5c

label 5d

label 5e

label 5f

label 5g

Page - 8

Section 6

label 6a

label 6b

label 6c

label 6d

label 6e

label 6f

label 6g

TryitJS Source

!html

<style>
.item.yellow {
  background-color: yellow;
}
</style>

!md

# Cereate UI Element

!tryit

var x = 1;

// hello
$$.HTML(`
<div class="ui menu">
  <div class="header item yellow exec" id="tryit1-run">
    Run <i class="caret square right icon"></i>
  </div>
  <button id="jump_tryit2" class="item circular ui icon yellow button jump_next"><i class="icon angle double down"></i></button>
  <button id="jump_tryit2" class="item circular ui icon yellow button jump_back"><i class="icon angle double up"></i></button>
  <div class="right menu">
     <button id="ra_1" title="Execute all scripts above" class="ui right floated button circular icon green run_all"> <i class="fast backward icon"></i> </button>
  </div>
</div>`)

Page - 9