An even more educational version of the Bandolier for Learn JS the Hard Way.
https://learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.2 KiB
53 lines
1.2 KiB
{% include "../header.html" %}
|
|
<h1>Your TODOs</h1>
|
|
|
|
<script src="/alpine.js"></script>
|
|
|
|
<script>
|
|
const new_task = async (todos, task) => {
|
|
const result = await axios({
|
|
method: "post",
|
|
url: "/todo_alpine",
|
|
data: {task},
|
|
headers: {
|
|
Accept: "application/json"
|
|
}
|
|
});
|
|
|
|
// zero error handling but fine for now
|
|
return result.data;
|
|
}
|
|
|
|
const list_todo = async () => {
|
|
const result = await axios({
|
|
method: "get",
|
|
url: "/todo_alpine",
|
|
headers: {
|
|
Accept: "application/json"
|
|
}
|
|
});
|
|
|
|
return result.data;
|
|
}
|
|
</script>
|
|
|
|
<p>Welcome {{ name }}, here's your TODOs</p>
|
|
|
|
<div
|
|
x-data="{todos: []}"
|
|
x-init="todos = await list_todo()">
|
|
<ol>
|
|
<template x-for="todo of todos">
|
|
<li x-text="todo.task"></li>
|
|
</template>
|
|
</ol>
|
|
|
|
<h4>Add a New TODO</h4>
|
|
<form action="/todo_alpine" @submit.prevent="todos = await new_task(todos, task), task = ''" method="POST" x-data="{task: ''}">
|
|
<label for="task">Task</label>
|
|
<input name="task" x-model="task"></input>
|
|
<button type="button" @click="todos = await new_task(todos, task), task = ''">Submit</button>
|
|
</form>
|
|
|
|
</div>
|
|
{% include "../footer.html" %}
|
|
|