Skip to content

Instantly share code, notes, and snippets.

@r3dm1ke

r3dm1ke/index.html

Created March 4, 2020 17:35
Show Gist options
  • Save r3dm1ke/57774dd0e9f8b5bf1a4e0830d5a5d5a3 to your computer and use it in GitHub Desktop.
Save r3dm1ke/57774dd0e9f8b5bf1a4e0830d5a5d5a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html class="no-js" lang="" xmlns:x-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>AlpineJS Todo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.js" defer></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container" x-data="todo()">
<div class="row justify-content-md-center">
<div class="col-md-auto">
<h1 class="title">AlpineJS TODO App</h1>
<form class="form-inline">
<input
type="text"
class="form-control mb-2 mr-sm-2"
id="newTaskInput"
placeholder="New task"
x-model="newTaskName"
>
<a
class="btn btn-primary mb-2"
@click="tasks.push({name: newTaskName, completed: false, index: tasks.length})"
>
Add
</a>
</form>
<div class="list-group" id="list">
<template x-for="task in [...tasks].sort((e1, e2) => e1.completed > e2.completed ? 1 : 0)" :key="task.index">
<a
href="#"
@click="tasks[task.index].completed = true"
x-bind:class="{'list-group-item list-group-item-action': true, 'disabled': task.completed}"
x-text="task.name"></a>
</template>
</div>
</div>
</div>
</div>
<script>
const todo = () => {
let tasks = [];
let newTaskName = '';
return {tasks, newTaskName};
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment