Input
Enter calcium.js.org, then you can see a large blank space in the right top corner of the whole page. And this is the input box.
We can click the buttons below the input box to enter numbers, operators or symbols. Each button has two symbols: One is for displaying, another is for inputting. For example, when we click on log_2 a button, though it has an a on the button, we won't really input the a exactly. Instead, we input log_2(...) as a function.
Take a look into the file src/views/general/Input.tsx, we can see the button components has symbol and inputValue props. symbol is for displaying, inputValue is for inputting.
<InputButton symbol="\log_2{a}" inputValue="\log_2(" grow={1}/>Every time we click on a button, the system will input the specified symbol into the large input box. And then, the input box will generate a new <span> container to contain each symbols. Open the devtools, we can see:
If you input a function, like sin(...), what will happen to the input box?
As you can see, the sin( became a whole instead of some separate symbols. This is because the compiler is not able to read the function name by some separate words. It can only read the name with the words together.
When we type something like a=5, it creates a new variable a whose value is 5. The list of variable values can be queried in the variable dialog.