Skip to content

Instantly share code, notes, and snippets.

@Mikepicker
Created September 26, 2022 17:07
Show Gist options
  • Select an option

  • Save Mikepicker/11c5b9a8e62c068970dc918a3aa2ff4a to your computer and use it in GitHub Desktop.

Select an option

Save Mikepicker/11c5b9a8e62c068970dc918a3aa2ff4a to your computer and use it in GitHub Desktop.
<html>
<head>
...
</head>
<body>
<div x-data="lists" class="container">
<!-- NAVBAR BLOCK -->
<!-- LOGIN / SIGNUP BLOCK -->
<!-- TODO LISTS BLOCK -->
<!-- show selectedList items -->
<article x-show="!showLogin && selectedList" x-transition style="margin-top: 10%;">
<h2>Test</h2>
<template x-for="item in items">
<div style="display:flex; justify-content: space-between; margin-top: 1rem">
<label for="check">
<input x-model="item.done" @change="e => toggleDone(item, e.target.checked)" type="checkbox" id="check">
<strong x-text="item.text"></strong>
</label>
<i @click="deleteItem(item)" class="bx bx-trash bx-sm" style="text-align: end; cursor: pointer"></i>
</div>
</template>
<hr style="margin: 2rem"></hr>
<label for="newItem">Create New Item</label>
<input x-model="newItem" id="newItem" type="newItem" placeholder="What do you want to DooDoo?">
<button @click="createItem" class="contrast outline">Create</button>
<hr style="margin: 1rem;"></hr>
<button @click="selectedList = null" class="primary outline">Back</button>
</article>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment