Coding Hints. Part V: Other hints
Tags: javascript, codeguppy, codenewbie, beginners
Published: 2020-10-23 03:16:52


[codeguppy.com](https://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.

- [Printing data](#printing-data)
- [Building data input UIs](#building-data-input-uis)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59i6cznqy8zeaip8jjkn.png)

# 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

```javascript
for(let i = 0; i < 10; i++)
{
    println(i);
}
```

### Print the first 10 prime numbers

```javascript
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;
}
```

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

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

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.

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

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:

```javascript
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;
}
```

### Creating buttons

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

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

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:

```javascript
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";
}
```

---

This article is part of a series of mini-articles containing JavaScript coding hints applicable to [codeguppy.com](https://codeguppy.com) environment.

- [Coding Hints. Part I: JavaScript syntax](https://dev.to/codeguppy/coding-hints-part-i-javascript-syntax-264m)

- [Coding Hints. Part II: Drawing]
(https://dev.to/codeguppy/coding-hints-part-ii-drawing-2ok9)

- [Coding Hints. Part III: User Input]
(https://dev.to/codeguppy/coding-hints-part-ii-user-input-13ec)

- [Coding Hints. Part IV: Game Development]
(https://dev.to/codeguppy/coding-hints-part-iv-game-development-42l2)

- [Coding Hints. Part V: Other hints]
(https://dev.to/codeguppy/coding-hints-part-v-other-hints-3amb)