109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
const {DOM, Tag, H} = Gale({
|
|
Form:{
|
|
padding: "20px"
|
|
},
|
|
Input:{
|
|
display:"inlnine-block",
|
|
padding:"0.5rem 1rem",
|
|
borderRadius:"0.5rem",
|
|
outline:"1px solid #ddd",
|
|
":focus":{
|
|
outline: "2px solid green"
|
|
}
|
|
},
|
|
Button:{
|
|
display:"inline-block",
|
|
padding:"1rem",
|
|
background:"green",
|
|
color:"white",
|
|
borderRadius:"0.5rem",
|
|
cursor:"pointer",
|
|
textTransform:"uppercase",
|
|
fontWeight:"bolder",
|
|
":hover":{background:"black"}
|
|
},
|
|
Complete:{
|
|
fontSize:"0.6rem",
|
|
padding:"0.5rem",
|
|
background:"limegreen"
|
|
},
|
|
Incomplete:{
|
|
fontSize:"0.6rem",
|
|
padding:"0.5rem",
|
|
background:"yellow",
|
|
color:"black",
|
|
},
|
|
Delete:{
|
|
fontSize:"0.6rem",
|
|
padding:"0.5rem",
|
|
background:"tomato"
|
|
},
|
|
|
|
Title:{
|
|
fontSize: "2rem"
|
|
},
|
|
List:{
|
|
padding:"1rem",
|
|
background:"#ddd"
|
|
},
|
|
Item:{
|
|
display:"flex",
|
|
gap:"1rem",
|
|
alignItems:"center"
|
|
},
|
|
Done:{
|
|
textDecoration:"line-through"
|
|
}
|
|
});
|
|
|
|
/** @typedef {{name:string, done:boolean}} Todo */
|
|
|
|
/** @type {{pending:string, list:Todo[]}} */
|
|
const InitialState = {pending:"todo name", list:[]};
|
|
const Store = vanX.Store(InitialState, "todos_v1");
|
|
|
|
const PendingCreate=()=>{
|
|
const newTodo = /** @type {Todo} */({name:Store.pending, done:false});
|
|
Store.list.unshift(newTodo);
|
|
Store.pending = "";
|
|
console.log(Store);
|
|
}
|
|
const PendingChange =(/** @type {InputEvent}*/e)=>{
|
|
console.log(e);
|
|
Store.pending = /** @type {HTMLInputElement}*/(e.target).value;
|
|
}
|
|
|
|
|
|
function Form()
|
|
{
|
|
const input = DOM.input.Input({value:Store.pending, oninput:PendingChange})
|
|
return DOM.form.Form(
|
|
{onsubmit(e){e.preventDefault(); PendingCreate();}},
|
|
()=>
|
|
{
|
|
input.value = Store.pending;
|
|
input.setAttribute("data-value", Store.pending);
|
|
return input;
|
|
},
|
|
()=>DOM.button.Button({disabled:Store.pending == ""}, "Create")
|
|
)
|
|
}
|
|
|
|
function List()
|
|
{
|
|
return ()=>Store.list.length && vanX.list(DOM.ul.List, Store.list, (v, d)=>DOM.li.Item(
|
|
v.val.done ? DOM.button.Button.Complete({onclick(){v.val.done = false}}, "Complete") : DOM.button.Button.Incomplete({onclick(){v.val.done = true}}, "Incomplete"),
|
|
DOM.span({class: v.val.done ? Tag("Done") : ""}, v.val.name),
|
|
DOM.button.Button.Delete({onclick:d}, "Delete")
|
|
));
|
|
}
|
|
|
|
van.add(
|
|
document.body, H.Form
|
|
(
|
|
H.Title("todos"),
|
|
Form(),
|
|
List(),
|
|
()=>H.Item(Store.pending)
|
|
)
|
|
); |