How to Use jsKidz Editor
Let's have a tour on the HTML Box that has the most features, other Box is just a simple version of HTML Box.
Code Samples in Dropdown
jsKidz will instantly save the code you type in the any of the editors, so the codes will stay in the browser and you can run the code anytime you come back. In the top right dropdown, the default selection is Saved as below, which means all code you enter is saved instantly.
You can open the Select dropdown to choose one of sample codes as below, on this sample code, you can modify the codes but the codes won't be saved to the browser at all.
In order to save the code, you should click Save like to save the sample into your browser,
so you can keep them with you, at this moment the Select option should become like below again.
Style & HTML
The Style & HTML editor will have your Style and HTML codes. Thease codes will go into the real index.html.
Modules
We can create Js Module by clicking on the + Module button, and you can edit the module name or you can delete it by clicking Remove (If you don't run the code, ). Most importantly you should adjust the modules order by clicking the Up Arrow or Down Arrow.
If you are using VS Code, your Js code is running from the File System of your computer with the Js Module Loader not like jsKidz platform which only provides a virtual file system.
The real File System with Js Module Loader can load the file as module in a orderly manner for you. For example, if A module is importing B module, B module should stay on top of A module, because jsKidz can only load your module from top to bottom, it will have Not Found Error if importing a module below the module which tries to load this module.
Anyway, if you copy the same code to run in VS Code you don't need to worry the module order anymore, just while working in jsKidz, please be aware of the order and you should move modules up or down to get them to be always above the modues import them.
Main
This is the main.js file module, the staring point of your code project, therfore, this module is not deletable.
Run and Stop
At the bottom of the Box popup page, you'll find the Run and Stop buttons.
The Run button is enabled only when there are no errors in the Editors. Clicking it executes your code, and any Js errors will display in the red section.
You can use console.log to output values for development or debugging, which appear
in the gray section.
If the code continues running and you want to stop it, click the red square Stop button to terminate the program.