Example 2 - Modifying CSS

There are many times you want to alter the appearance of some part of the page when an event occurs, such as a click on a button or link. Or maybe when the user hovers over an item, though we don't recommend this as it doesn't work on mobile devices, which is where most of your users are these days.

This example displays a button which when clicked changes the color of its text and of its background. As in Example 1, it reverts after 5 seconds. As a bonus we also change the text of the button so you can see how that's done too. Here's the button:

In the box below is the entire page source comprising the HTML and the script. At the top is the HTML and below it in the <pre> ... </pre> block is the script.

The most significant instruction in this script is set style. This is a very versatile instruction that lets you set any style attribute to any value you like, giving you full control over the CSS that applies to the page. This can deal with most if not all of the more common actions that will commonly be needed and make your page as dynamic as you need it to be.

 <div><button id="easycoder-button">Click me</button></div>
 <pre id="easycoder-script" style="display: none;">
  ! Example 2
  button Button
  attach Button to `easycoder-button`
  on click Button
    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 again`
    set style `color` of Button to ``
    set style `background-color` of Button to ``

Example 3 - Slideshows