How it works?

Let's say you have an element, like a <ul> element and you want to add multiple bullets points. This the classic example of a Todo list (our one will be extremely basic). To do this, will need a loop that on each iteration and an item. Hopefully, you don't have to code this yourself because the $.repeat() function is here.

How to use it?

Here are the arguments of the $.repeat() function:

$.repeat(el, array, join, start="", end="")

el represents the element, in this case, the <ul> element. array is the array of lines, and in this case this is the array where we have every we have to do on our list. join is or an array, or a single element. in this case, it will be <li>. But it could have been $.range(array.length + 1) to have the line number. The start and end are the html before and after the repeated lines. Imagine you want to create a list in paragraph, the start will be <ul> and the end </ul>.

Here is the code for our Todo list:

HTML:

<!-- Title -->
<h1>Todo-list:</h1>
<!-- The actual list -->
<ul></ul>
<!-- The preview -->
<div class="preview">
  Preview:
<!--   The rendered preview -->
  <span class="prev" var="exported"></span>
</div>
<!-- The input -->
<input type="text" target="exported"/>
<!-- The button -->
<button>Add</button>

JS:

// Create the variable for DisplayJS
var $ = new DisplayJS(window);
// The preview
var exported = "Start typing!"
// The todo array
var todolist = []
// On click on button
$.on($.select("button"), "click", function() {
//   On clicked, add the content of  the preview to todo list
  todolist.push(exported)
//   Empty the input
  $.valEmpty($.select("input"))
//   The repeat function
  $.repeat($.select("ul"), todolist, "<li>" + $.range(todolist.length + 1))

});
// Rendering targets
$.target();
// rendering the vars once
$.var()

⚠️ Questions?

Don't hesitate to ask your questions ⁉️ in the issue part 😁