<main>
	<div id="results">
		No results
	</div>
</main>

main {
	margin: 2em;
}

#results {
	font-weight: bold;
}

#results.happy {
	color: green;
}

#results.error {
	color: red;
}

function setResult( txt, cls ) {
	const r = document.getElementById( 'results' );
	r.innerText = txt;
	r.className = cls || '';
}

function showError( e ) {
	setResult( `error: ${ e }`, 'error' );
}

function showHappy( txt ) {
	setResultt( `happy: ${ txt }`, 'happy' );
}

function showCatastrophe() {
	setResult( 'FAIL', 'error' )
}

Promise.resolve( 'hi' )
	.then( showHappy, showError )
	.catch( showCatastrophe );