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>
Top comments (0)