Building a TodoList in Javascript - Part 2/n

Welcome to 2nd part of this tutorial. We know now from the previous post how tu use make function.

Don't forget to read the doc on the official site :
DML, and read how the vast majority of the most used functions are implemented.

So, until now, our newly created elements were directly appended to the body of the page.

The question is now, how to append to a particular 'div' or base point ?

DML provides a convenient function to accomplish this. This function is called : selectBase

Here is what the doc says about it:

selectBase() is the most important function in DML. It controls the position of the basepoint, where new elements are append to the DOM.

function selectBase(parent);   // Select a position to append the following objects
function unselectBase();       // Release position to the previous context
DMLgetSP()                     // read the current stack position (for code checks)

You can see from the code above that selectBase() works in tandem with unselectBase() (our third function), which permits to return to previous base point.

Nice, we have now our three functions at our disposal : make, selectBase, unselectBase.

Here a demo DemoSelect:

import { make, selectBase, unselectBase } from "./dml";

const createGF = function (type, content, attribs) {
  return (content, attribs) => make(type, attribs, content);
};

// Reminder : DML already provides those functions and many others
const div = createGF("div");
const h1 = createGF("h1");
const input = createGF("input");
const br = createGF("br");

const container = function () {
  return selectBase(div("", {
    style:"border:1px solid black;background:rgba(0, 0, 0, 0.1);padding:10px"
  }));
}

const header = function () {
  selectBase(div(""))
  h1("Header", {
    style:"background:orange;color:black"});
  unselectBase();
}

const content = function () {
  selectBase(div(""));
  h1("Content", {
    style:"background:white;"});
  unselectBase();
}


const footer = function () {
  selectBase(div("", {style:"background:black;color:orange"}));
  h1("Footer");
  unselectBase();
}

const TodoApp =  function () {
  container();
    h1("Container");
    header();
    content();
    footer();
  unselectBase();
}

TodoApp();

If could also be implemented like this :

import { make, selectBase, unselectBase } from "./dml";

const createGF = function (type, content, attribs) {
  return (content, attribs) => make(type, attribs, content);
};

// Reminder : DML already provides those functions and many others
const div = createGF("div");
const h1 = createGF("h1");
const input = createGF("input");
const br = createGF("br");

const container = function () {
  return selectBase(div("", {
    style:"border:1px solid black;background:rgba(0, 0, 0, 0.1);padding:10px"
  }));
}

const header = function () {
  selectBase(div(""))
  h1("Header", {
    style:"background:orange;color:black"});
}

const content = function () {
  selectBase(div(""));
  h1("Content", {
    style:"background:white;"});
}


const footer = function () {
  selectBase(div("", {style:"background:black;color:orange"}));
  h1("Footer");
}

const TodoApp =  function () {
  container();
    h1("Container");
    header();
    content();
    footer();
  unselectBase(4);
}

TodoApp();

I 'poped' all the base points in one instruction unselectBase(4);

We are ready to start coding our TodoApp, armed with our three powerfull functions provided by DML:

import { make, selectBase, unselectBase } from "./dml";

Hope you enjoy.

Stay tuned for the next part.