Now, let’s say we want to put a line through each task that has been done. So we’ll need some value which holds this information, and then we can use it to set the style of the task. We’ll start with Task 1.
So where does @done come from? To hold state like this, we use a ‘curly’ block, written using braces, which only returns its (first) unkeyed value, allowing us to create ‘hidden’ keyed values.
Now, we want this value to toggle when we click on the task.
First, we use :~ again to create values that can change over time, both for the state, and for the mouse property, which will update when the mouse is clicked on the element. The value of @mouse will be a block with a value for each mouse button, so we use a . to access the part we want.
Then, we use the the ‘equals’ (=) and ‘not’ (!) operators, along with a new construct A | B -> C" style="font-family: Source Code Pro; font-weight: bold">A | B -> C, which means ‘when A push B into C’, to watch for the left mouse to be clicked down, and when it is to set the state to its opposite value.
Try clicking on Task 1 to see it in action.