Code explanation

I have to apologize because I know for this group this questions are extremely basic, please bear with me.

I just started learning JS, HTML, and CSS. As soon as I found Scriptable I decided to use it as my mobile learning tool.

When I saw in Twitter the example below written in Scriptable I was really excited on the potential of the app. I would like to understand the code, but I am a little confused on where to start:

  • Is this code 100% standard HTML, CSS, JS? Or is it a combination of standard and iOS specific?
  • Where can I get the information on iOS specific code and references?
  • What is the meaning of .box, .center and .float

Thank you very much.

It starts with a Javascript variable loading HTML which itself contains some CSS.

After that the webview is something Scriptable is surfacing for Javascript to display the HTML/CSS.

Scriptable contains documentation on webview and it’s other constructs & objects.

Box, center and float are class identifiers that match the class properties of the tags to sets of CSS.

1 Like

Thank you very much. If I understand this correctly:

  • The variable is html, and contains everything within ’ ’
  • All the elements (rectangles) in the center use the properties defined .center (50%, cyan, etc.)
  • All the elements (rectangles) floating use the properties defined for .float (20%, powder blue, etc.)
  • All the borders for .center and .float elements will use the .box class properties (10px, red, etc.)
  • body is the main windows properties (background)

This is correct.

You can find the documentation for Scriptable unique things (such as connecting to HealthKit which is not a standard JS option :wink:) inside of Scriptable.

1 Like