Lifecycle

This section shows a new Pokemon every time the document loads (onMount).

typescript

onMount(async () => {
	let randomPokeID = Math.floor(Math.random() * 100) + 1;
	const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${randomPokeID}`);
	const pokemon = await response.json();
	pokeImg = pokemon.sprites?.other?.['official-artwork']?.front_default;
	pokeName = pokemon.name;
});

This textarea allows you to toggle the selection between upper and lower case by hitting the tab key.

typescript

let text = 'Select some of this text and hit the tab key to toggle between upper and lowercase.';

async function handleKeydown(this: any, event: { key: string; preventDefault: () => void }) {
	if (event.key !== 'Tab') return;

	event.preventDefault();

	const { selectionStart, selectionEnd, value } = this;
	const selection = value.slice(selectionStart, selectionEnd);

	const replacement = /[a-z]/.test(selection) ? selection.toUpperCase() : selection.toLowerCase();

	text = value.slice(0, selectionStart) + replacement + value.slice(selectionEnd);

	await tick();
	this.selectionStart = selectionStart;
	this.selectionEnd = selectionEnd;
}