Click to show TOC

# 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'];

words // display words (just like python notebooks the last expression result is displayed)

### Using some lodash functions 1 _

- _.first
- _.last

//This is some javascript code - press run to execute it var firstWord = _.first(words); var lastWord = _.last(words); // Note the last expression is displayed $$.D2(`({ firstWord, lastWord })`);

## 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

$$.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 - 2

# Array

so

var y = [2, "hello", 123.45]; y

## Customize your display

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

$$.json(y); // force JSON output // the line below will do the same thing y // display the last value

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
Executing previous dependent scripts
Waiting to execute