task(
"1.1",
`Create a random walker that has a tendency to move down and to the right.`
)
task(
1.1,
`Create a random walker that has a tendency to move down and to the right.`,
"true"
)
function task(number, description, done = false) {
const background = done ? "#fbfbfb" : "hsl(320, 100%, 98%)";
const icon = done ? "✅" : "📍";
return htl.html`
${helpersCss}
<div class="padded">
<div style="background-color: ${background}">
<h3>${icon} Exercise ${number}</h3>
${description}
</div>
</div>`;
}
todoList([
{ name: "add rainbow 🌈 ", status: "pending" },
{ name: "add more items 📝 ", status: "pending" },
{ name: "add magic 🪄 ", status: "done" }
])
todoList = (items) => {
const elems = items
.sort((a, b) => a.status > b.status)
.map((i) => {
const checked = i.status === "done" ? "checked" : false;
return htl.html`<li class=${checked}>
<input type='checkbox' checked=${checked} disabled />
${i.name}
</li>`;
});
const style = html`
${helpersCss}
<style>
ul.todo-list{
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
ul.todo-list input[type="checkbox"] {
margin-right: 0.5em;
}
ul.todo-list li {
font-size: 0.875rem;
}
ul.todo-list li.checked {
opacity: 0.5;
}
</style>`;
const title = elems.length > 1 ? "ToDos" : "ToDo";
return html`${style}
<div class="padded">
<div class="todo" style="background: white; box-shadow: 0 0 5px rgba(0,0,0,.1);">
<p style="font-weight:bold;font-size:1.5em;margin:0;">${title}</p>
<ul class="todo-list">
${elems}
</ul>
</div>
<div>`;
}
intro = html`
${helpersCss}
<div class="padded">
<div style="border: 1px solid">
${md`This notebook is dedicated to the book *Nature of Code* by *Daniel Shiffman*. It is available [online](https://natureofcode.com/book/)`}
</div>
</div>
`
height = 300
helpersCss = html`
<style>
.padded {
padding: 1em 0 0;
}
.padded > div {
padding: 1em;
border-radius: 5px;
max-width: 500px;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
