TodoList in Javascript part 3/n

In this post we will begin the creation of the UI.
We don't need anything but our 3 functions to construct it.
We will not bother (for now) with css theming.

Here is the live site : UITodo

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

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

  const div = createGF("div");
  const h1 = createGF("h1");
  const input = createGF("input");

  let reflistTodos = null;

  const cssAppArea = `
    width:75%;
    max-width:480px;
    min-width:360px;
    background:tan;
    padding:10px;
    padding-bottom:5px;
    margin:0 auto;`;

  const cssTodo = `
    background:red;
    padding:5px;
    display:flex;
    justify-content:space-around;
    margin-bottom:5px`;

  const cssNewTodo =  `
    margin-bottom: 10px; 
    width:98%;
    background:grey;
    padding:5px;
  `;

  const cssStatus = `
    margin-top:10px;
    margin-bottom:10px;
    width:98%;
    background:grey;
    padding:5px;`;

  const cssHeader = `
    text-align:center;
    margin-bottom:20px;
    font-size:24px`;

  let todos = [];

  /* implementation */
  function box(style) {
    return selectBase(div("", style))
  }

  function createHeader() {
    div("Todo App", {style:cssHeader});
  }

  function createNewTodo () {
    box({style:cssNewTodo});
    let entry = input("", { 
      style: "width:99%", placeholder: "Enter new todo - press Enter key" });
    entry.onkeypress =  (e) => {(e.which == 13) && createTodo(entry.value)};
    unselectBase()
  }

  function createTodo(todo) {
    selectBase(reflistTodos)
    let divtodo = box(
      {style:cssTodo});
    let checktodo = input("", { type: "checkbox" });
    let inptodo = input("", { style: "flex:0.99", value: todo });
    let deltodo = input("", { type: "checkbox", style: "visibility:hidden" });
    //events
    divtodo.onmouseover = () => (deltodo.style.visibility = "visible");
    divtodo.onmouseout = () => (deltodo.style.visibility = "hidden");
    unselectBase();
   unselectBase();
  }

  function createTodosArea(todos = []) {
    reflistTodos = box({style:"background:blue; padding:5px"})
    todos.map(createTodo);
    unselectBase()
  }

  function addTodo(todo) {
    todos = [...todos, todo];
    todos.map(createTodo);

  }

  function createStatus () {
     box({style:cssStatus});
     div("status bar", {style : "color:white"});
    unselectBase()    
  }

  function createAppArea(todos) {
    selectBase(target) // target <=> base point in main html page
      selectBase(div("", { style: cssAppArea }));
        createHeader();
        createNewTodo();
        createTodosArea(todos);
        createStatus()
      unselectBase();
    unselectBase()
  }

  return {
    init: createAppArea,
    addTodo: addTodo,
  };
};

export default TodoApp;

Here is how to use it :

import TodoApp from './todoapp.js';

const todoapp = TodoApp(app);
todoapp.init(["un", "deux"])

The html part :

<pre style="font-size:1.2rem">
  This is the skeleton of our TodoApp app made with DML
  Our app is contained in the following div. We just pass the 'id' as argument
  to our TodoApp function
</pre>
<div id="app"></div>

<pre style="font-size:1.2rem">
 Stay tuned for the next part...
</pre>