Tutorial 2 - Changing styles

In Tutorial 1 we created a button that reacts when clicked. Now let's get it to do something. The simplest is probably to change the text itself, the color of the text or that of the background. Let's do all three.

Here's the page from tutorial 1:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button
  on click Button alert {Click!}
  stop
</div>

We'll start by changing the on click a little:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button`
  on click Button
  begin
    alert `Click!`
  end
  stop
</div>

I've added a begin and an end, which lets us add more commands and still have it behave as a single command. Notice how commands can carry on from one line to the next; I could have written it as

  on click Button begin alert `Click!` end

but that's a lot less readable.

We'll now add all the commands at once for setting the new styles, and remove the alert while we're at it:

<button id="tutorialbutton">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button`
  on click Button
  begin
    set the text of Button to `Thank you`
    set style `color` of Button to `LimeGreen`
    set style `backround-color` of Button to `Ivory`
  end
  stop
</div>

As you can see, the command to change the text is a little different to one that changes the color. This is because the text is content, while colors are style. You should however be able to work out what is happening in each line. The two text constants color and background-color are the names of CSS styles, as anyone familiar with CSS will know, and the colors are taken from the 140 valid CSS color names.

If you copy this code into a blank page then view the page you'll see the button, which when clicked changes its text and its foreground and background colors. However, having done that you'll have to refresh the page to see it happen again. So let's get the script to wait a few seconds then restore things to where they were. Here's how we do it:

<button id="tutorial-button">Click me</button>
<div id="easycoder-script">
  button Button

  attach Button to `tutorial-button`
  on click Button
  begin
    set the text of Button to `Thank you`
    set style `color` of Button to `LimeGreen`
    set style `background-color` of Button to `Ivory`
    wait 5
    set the text of Button to `Click me!`
    set style `color` of Button to ``
    set style `background-color` of Button to ``
  end
  stop
</div>

First there's a wait command that waits 5 somethings. By default, something is a second; if you want to make that completely clear you can type

    wait 5 seconds

The wait command can also count in milliseconds, ticks (hundredths of a second) or minutes. In all cases the final s is optional, so you can wait for 1 second, 1 tick etc.

The button text is then set back to its original value and the modified color styles are removed by giving an empty color name, causing the defaults for a button to be re-applied.

Naturally, you aren't restricted to just changing attributes of the button you clicked. If other elements on your page have ids you can make changes to them, too. The next tutorial will look at doing just that.

Tutorial 3 - Substituting content

!
img DuckThink
if mobile
begin
attach DuckThink to `ec-duckthink`
set style `display` of DuckThink to `none`
end

button Button

attach Button to `tutorial-button`
on click Button
begin
set the text of Button to `Thank you`
set style `color` of Button to `LimeGreen`
set style `background-color` of Button to `Ivory`
wait 5
set the text of Button to `Click me!`
set style `color` of Button to ``
set style `background-color` of Button to ``
end
stop