Skip to content

Instantly share code, notes, and snippets.

@borisdayma

borisdayma/demo.html

Last active October 18, 2020 15:40
Show Gist options
  • Save borisdayma/1311a6743fb08ed6beee37ebfbc4e8e0 to your computer and use it in GitHub Desktop.
Save borisdayma/1311a6743fb08ed6beee37ebfbc4e8e0 to your computer and use it in GitHub Desktop.
Download ZIP
Claire's Number Line
Raw
demo.html
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<head>
<title>Claire's Number Line</title>
</head>
<html>
<div id="app"></div>
</html>
<script>
new Vue({
data: () => ({
colors: [
'blue-400',
'green-400',
'orange-400',
'indigo-400',
'pink-400',
'yellow-400',
'teal-400',
'red-400',
'purple-400',
'teal-200',
],
}),
template: `
<div class="p-12">
<h1 class="text-xl font-semibold">Claire's Number Line</h1>
<table class="mt-8">
<tr class="h-12">
<th class="w-16">&nbsp;&nbsp; ones<br />tens</th>
<th v-for="col in 10" :key="col" :class="'bg-' + colors[col - 1]" class="w-16">
{{ col - 1 }}
</th>
</tr>
<tr v-for="row in 10" :key="row" class="h-12">
<th :class="'bg-' + colors[row - 1]">{{ row - 1 }}</th>
<th v-for="col in 10" :key="col" class="bg-gradient-to-r"
:class="'from-' + colors[row - 1] + ' to-' + colors[col - 1]">
{{ 10 * (row - 1) + col - 1 }}
</th>
</tr>
</table>
</div>
`
}).$mount('#app');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment