DEV Community

Adrian
Adrian

Posted on

Coding Hints. Part V: Other hints

codeguppy.com can also be used to practice algorithms or implement programs with basic data input UI. This page describes the support for this kind of programs.

Alt Text

Printing data

Use the print and println instructions to quickly print numbers, strings and other information on top of the canvas. These instructions operates on a separate scrollable text layer.

These instructions are perfect for debugging programs, for practicing language elements or algorithms:

Print the numbers from 0 to 9

for(let i = 0; i < 10; i++)
{
    println(i);
}
Enter fullscreen mode Exit fullscreen mode

Print the first 10 prime numbers

background('Shapes');

let found = 0;
let n = 0;

while(found < 10)
{
    if (isPrime(n))
    {
        println(n);
        found++;
    }

    n++;
}

// Returns true if specified number is prime
function isPrime(n)
{
    if (n < 2)
        return false;

    let max = sqrt(n);

    for(let i = 2; i <= max; i++)
    {
        if (n % i === 0)
            return false;
    }

    return true;
}
Enter fullscreen mode Exit fullscreen mode

Note: println is adding a new line character after each print, while print is not.

Building data input UIs

codeguppy.com offers simple instructions for creating data input user interfaces.

Creating input boxes

To create a single-line input box, use the createEdit instruction, specifying the control position and width.

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);
Enter fullscreen mode Exit fullscreen mode

To create a multi-line input box, you also need to specify the height. If you omit the height parameter, then the system will automatically build a single-line input box.

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);
Enter fullscreen mode Exit fullscreen mode

Note that the createEdit instruction is returning a reference to the edit box object. You can use the following properties to manipulate edit box content.

  • .text
  • .readonly
  • .visible
  • .width
  • .height
  • .onchange

Example:

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

nameBox.onchange = handleNameChange;

function handleNameChange()
{
    commentsBox.text = "Thank you " + nameBox.text;
}
Enter fullscreen mode Exit fullscreen mode

Creating buttons

Another UI element that you can create in the UI layer is a regular push button.

let btn = createButton(505, 100, 60, 20);
btn.text = "Enter";
Enter fullscreen mode Exit fullscreen mode

The createButton instruction is returning a reference to the created button object. You can use this reference to access properties such as:

  • .text
  • .visible
  • .disabled
  • .width
  • .height
  • .onclick

Example:

text("Your name", 300, 90);
let nameBox = createEdit(300, 100, 200);

text("Comments", 300, 190);
let commentsBox = createEdit(300, 200, 300, 100);

let btn = createButton(505, 100, 60, 20);
btn.text = "Enter";
btn.onclick = handleButtonClick;

function handleButtonClick(sender)
{
    commentsBox.text += "Thank you " + nameBox.text + "\n";
}
Enter fullscreen mode Exit fullscreen mode

This article is part of a series of mini-articles containing JavaScript coding hints applicable to codeguppy.com environment.

Top comments (0)