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.
32 lines
867 B
32 lines
867 B
{% include "./header.html" %}
|
|
<h1>Your TODOs</h1>
|
|
|
|
<script src="/alpine.js"></script>
|
|
|
|
<script>
|
|
const new_task = async (todos, task) => {
|
|
// zero error handling but fine for now
|
|
return (await axios.post("/todo_alpine", {task})).data;
|
|
}
|
|
</script>
|
|
|
|
<p>Welcome {{ name }}, here's your TODOs</p>
|
|
|
|
<div
|
|
x-data="{todos: []}"
|
|
x-init="todos = (await axios.get('/todo_alpine')).data">
|
|
<ol>
|
|
<template x-for="todo of todos">
|
|
<li x-text="todo.task"></li>
|
|
</template>
|
|
</ol>
|
|
|
|
<h4>Add a New TODO</h4>
|
|
<form action="/todo_index" @submit.prevent="todos = 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 = new_task(todos, task), task = ''">Submit</button>
|
|
</form>
|
|
|
|
</div>
|
|
{% include "./footer.html" %}
|
|
|