<template>
<div id="app">
<div>
<svg :viewBox="`0 0 30 ${tasks.length * 50}`"
xmlns="http://www.w3.org/2000/svg"
width="30"
stroke="currentColor"
fill="white"
aria-labelledby="timeline"
role="presentation">
<title id="timeline">timeline element</title>
<line x1="10" x2="10" :y1="num2" :y2="tasks.length * num1 - num2" />
<circle
@click="selectThis(i)"
v-for="(task, i) in tasks"
:key="task.name"
cx="10"
:cy="i * num1 + num2" r="4"
:fill="task.done ? 'currentColor' : 'white'"
class="select"/>
</svg>
</div>
<div>
<div
@click="selectThis(i)"
v-for="(task, i) in tasks"
:key="task.name"
class="select">
{{ task.name }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num1: 32,
num2: 15,
tasks: [
{
name: 'thing',
done: false
},
{
name: 'other thing',
done: false
},
{
name: 'tacos',
done: false
},
{
name: 'yaya',
done: false
},
{
name: 'more things',
done: false
},
{
name: 'tada',
done: false
},
]
};
},
methods: {
selectThis(index) {
this.tasks[index].done = !this.tasks[index].done
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
color: #2c3e50;
margin: 60px 120px;
display: grid;
grid-template-columns: 30px 1fr;
grid-template-rows: 1fr;
height: 400px;
width: 400px;
line-height: 2;
}
svg {
margin-top: 3px;
}
.select {
cursor: pointer;
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.