Examples

Examples

Check out the examples folder for a variety of examples on how to use Cardboard. But here are a couple of examples that highlight what Cardboard can do:

Counter Example

Click for a breakdown of a simple Counter example

const Counter = () => {
  let counter = state({ count: 0 });

  return button()
    .text(`Clicked $count times`, counter)
    .addStyle('color', 'gray')
    .stylesIf(counter.count, { color: 'black' }) // If count > 0, it will make the color black
    .clicked((_) => counter.count++);
};

// Counter will be added to the body
tag('(body)').append(Counter());

1. We create a Reusable Component Counter
2. The Counter first declares a counter state.
3. We return a button tag - this will create a button element in the page.
4. We set some initial styles by using .addStyle
5. We conditionally set some styles by using .stylesIf and passing in the count, and some styles. 5.1. stylesIf can receive any Consumable. When the consumable changes, the styles will update accordingly. 5.2. If you want to do more concrete checks, like if the count is 2, take a look at how to Intersect consumers.
6. Listen to click event on the button by calling the .clicked function. 6.1. When the button is clicked, increase the state count directly, like you do any variable.
7. Finally, we append a Counter instance to the body element. 2.1 By padding in (body) we're saying that we want to select the tag from the page instead of creating one.

Todo Example

Click for a detailed explanation of a TODO app example

const todos = listState<string>([]);

const Todo = (todo) => li(todo)
  .clicked(
    (self) => todos.remove(todo)
  ); 

const list = ul(
  p('There are no to-dos').hideIf(todos.length),
  each(todos, Todo)
);

const addItem = (input) => {
  if(input.value) todos.add(input.consumeValue);
};

const itemInput = Input({ 
  placeholder: 'Enter item content', 
  submit: (self) => addItem(self),
});

init().append(
  itemInput, 
  button('Add item').clicked(_ => addItem(itemInput)),
  list,
);

Let me explain what going on.

1. Creating state

First we create a listState to hold our list of items. listState is a utility to simplify the handling of lists. It returns an object with a set of values and methods to manipulate the items, like adding, removing, etc...

const todos = listState<string>([]);

### 2. The Todo Component The next thing we do is to create a Todo component. It receives a todo item (a string in this example) and returns a li, that when clicked, it removed the item from the list of todos.

const Todo = (todo) => li(todo)
  .clicked(
    (self) => todos.remove(todo)
  ); 

3. Creating the Todo List

Now we need to create a list that will hold our todos. It will also show a text if there are no todos.

const list = ul(
  p('There are no to-dos').hideIf(todos.length),
  each(todos.list, Todo),
);

• hideIf will hide the p if the todo list has any items. And will show it if there are.
  • It does not hide and show it, it removes/adds it to the DOM.
• each will create a new Todo for each todo in our list. We pass in the todos.list which is a Consumable.

4. Adding items

Adding items is very simple, as we've used listState. We can just call the todos.add(item) function.

const addItem = (input) => {
  if(input.value) todos.add(input.consumeValue);
};

• input.consumeValue gets the value of the input, and clears it.

5. New item input

To be able to add new TODOs, we need an input field for that. Cardboard has some built-in components to simplify things (i.e. Input).

const itemInput = Input({ 
  placeholder: 'Enter item content', 
  submit: (self) => addItem(self),
});

submit is called, when the enter key is pressed.

6. Adding everything to the page

The only thing left is to add everything to the page. This is done by first calling init, this returns a Tag representing the body element in the page. Then we append the input, a button and the list.

init().append(
  itemInput, 
  button('Add item').clicked(_ => addItem(itemInput)),
  list,
);