DEV Community

Cover image for TodoList in Javascript  part 3/n
artydev
artydev

Posted on • Edited on

1

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;
Enter fullscreen mode Exit fullscreen mode

Here is how to use it :

import TodoApp from './todoapp.js';

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

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>
Enter fullscreen mode Exit fullscreen mode

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay