mathigon_boost_dom_selection_events_and_animation_quickstart.ts

1import {$, $N, ElementView} from '@mathigon/boost';
2
3// Select an existing element from the DOM
4const $body = $('body') as ElementView;
5
6// Create a new element with classes and attributes
7const $button = $N('button', {text: 'Click Me', class: 'btn-primary'}, $body);
8
9// Add an event listener using Boost's event handling
10$button.on('click', (event: MouseEvent) => {
11  console.log('Button clicked!', event);
12  
13  // Update styles or content easily
14  $button.css('background', 'red');
15  $button.text = 'Clicked!';
16});
17
18// Perform animations or transitions
19$button.animate({transform: ['none', 'scale(1.2)']}, 300);