Courses at Among The Trees
We offer a wide range of woodworking courses, as well as a range of other craft skills. For private course or corporate bookings, click here.
Pug CSS TypeScript
Result
Skip Results Iframe
- var shapes = [];
- shapes.push({ shape: 'circle', color: 'blue' });
- shapes.push({ shape: 'diamond', color: 'red' });
- shapes.push({ shape: 'triangle', color: 'green' });
- shapes.push({ shape: 'triangle', color: 'orange' });
- shapes.push({ shape: 'square', color: 'red' });
- shapes.push({ shape: 'diamond', color: 'green' });
- shapes.push({ shape: 'circle', color: 'red' });
- shapes.push({ shape: 'square', color: 'green' });
- shapes.push({ shape: 'circle', color: 'orange' });
- shapes.push({ shape: 'diamond', color: 'blue' });
- shapes.push({ shape: 'square', color: 'orange' });
- shapes.push({ shape: 'square', color: 'blue' });
mixin shape(obj)
.js-item.shape-item.grow-0.shrink-0.mt-4.p-2.w-full.overflow-hidden(
class="basis-1/2 max-w-[50%] sm:basis-1/3 sm:max-w-[33%] md:basis-1/4 md:max-w-[25%]",
data-shape=obj.shape,
data-color=obj.color,
title=`a ${obj.color} ${obj.shape}`
)
.shape.bg-clip-content(class=`shape--${obj.shape} bg-${obj.color}-600`)
mixin colorIconButtonInput(groupName, label, value)
- var id = `${label}-${value}`;
- var tailwindColor = value;
- var colorClasses = `bg-${tailwindColor}-600 border-${tailwindColor}-900 hover:bg-${tailwindColor}-700`;
.group.relative.grid.grid-cols-1.grid-rows-1.place-items-center
input.sr-only.peer(id=id, type="checkbox", name=groupName, value=value)
label.relative.z-0.col-start-1.row-end-1.flex.cursor-pointer.w-10.h-10.border.transition-color(
class=[colorClasses, 'peer-checked:shadow-inner peer-focus-visible:ring rounded'],
for=id,
title=label
)
svg.relative.z-10.col-start-1.row-end-1.pointer-events-none.h-5.w-5.z-2.opacity-0.text-white.transition-opacity(
class="peer-checked:opacity-100",
width="20",
height="20",
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 20 20",
fill="currentColor",
aria-hidden="true"
)
path(
fill-rule="evenodd",
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
clip-rule="evenodd"
)
mixin shapeIconButtonInput(groupName, label, value)
- var id = `${label}-${value}`;
.group.relative.grid.grid-cols-1.grid-rows-1.place-items-center
input.sr-only.peer(id=id, type="checkbox", name=groupName, value=value)
label.relative.z-0.col-start-1.row-end-1.flex.cursor-pointer.w-10.h-10.transition-color.bg-gray-800.shape(
class="hover:bg-gray-600 peer-checked:shadow-inner peer-focus-visible:ring peer-focus-visible:bg-gray-500 shape--" + value,
for=id,
title=label
)
svg.relative.z-10.col-start-1.row-end-1.pointer-events-none.h-5.w-5.z-2.opacity-0.text-white.transition-opacity(
class="peer-checked:opacity-100",
width="20",
height="20",
xmlns="http://www.w3.org/2000/svg",
viewBox="0 0 20 20",
fill="currentColor",
aria-hidden="true"
)
path(
fill-rule="evenodd",
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
clip-rule="evenodd"
)
mixin inputButton(groupName, label, value, defaultChecked, type)
- var id = `${label}-${value}`;
.group.relative.flex
input.sr-only.peer(
id=id,
type=type || 'checkbox',
name=groupName,
value=value,
checked=defaultChecked
)
label.relative.cursor-pointer.py-2.px-4.bg-gray-100.border.border-gray-800(
class="peer-checked:bg-gray-800 hover:bg-gray-700 peer-checked:text-white peer-focus-visible:ring hover:text-white hover:z-1 peer-checked:z-1 group-first:rounded-l group-last:rounded-r group-first:-mr-px group-last:-ml-px",
for=id
)= label
main.max-w-screen-xl.mx-auto.px-4.py-6(class="sm:px-6 md:px-8")
h1.text-2xl.font-bold.mb-4 TypeScript and Compound filters
.grid.grid-cols-1.items-end.mb-4.gap-4(class="md:grid-cols-2")
.grid.grid-cols-1.items-start.gap-4
fieldset.flex.p-0.m-0.border-none
legend.block.p-0.mt-0.mb-2.text-gray-700 Color
#color-options.flex.items-center.gap-1(role="group")
+colorIconButtonInput('color-option', 'Green', 'green')
+colorIconButtonInput('color-option', 'Blue', 'blue')
+colorIconButtonInput('color-option', 'Red', 'red')
+colorIconButtonInput('color-option', 'Orange', 'orange')
fieldset.flex.p-0.m-0.border-none
legend.block.p-0.mt-0.mb-2.text-gray-700 Shapes
#shape-options.flex.items-center.gap-1(role="group")
+shapeIconButtonInput('shape-option', 'Circle', 'circle')
+shapeIconButtonInput('shape-option', 'Diamond', 'diamond')
+shapeIconButtonInput('shape-option', 'Square', 'square')
+shapeIconButtonInput('shape-option', 'Triangle', 'triangle')
.grid.grid-cols-1.items-start.gap-4(class="md:justify-self-end md:text-right")
fieldset.flex.p-0.m-0.border-none(class="md:justify-end")
legend.block.p-0.mt-0.mb-2.text-gray-700 Filter mode
#filter-mode.flex.items-center(role="group")
+inputButton('filter-mode', 'All', 'all', true, 'radio')
+inputButton('filter-mode', 'Any', 'any', false, 'radio')
fieldset.flex.p-0.m-0.border-none(class="md:justify-end")
legend.block.p-0.mt-0.mb-2.text-gray-700 Checkbox behavior
#checkbox-behavior.flex.items-center(role="group")
+inputButton('checkbox-behavior', 'Multiple', 'multiple', true, 'radio')
+inputButton('checkbox-behavior', 'Single', 'single', false, 'radio')
.js-shuffle.flex.flex-wrap
each obj in shapes
+shape(obj)
.js-sizer.w-full.opacity-0.absolute.invisible(
class="basis-1/2 max-w-[50%] sm:basis-1/3 sm:max-w-[33%] md:basis-1/4 md:max-w-[25%]"
)
View Compiled
Among the Trees is committed to child safety and has zero tolerance for child abuse.
We care deeply about the children’s well-being and are committed to acting in their best interest at all times. Our Statement of our Commitment to child Safety and our complete Child Safe Policy is available here. Any questions or suggestions regarding our Child Safe policy and practices are welcome at talk@amongthetrees.com
