<main>
<div id="results">
No results
</div>
</main>
main {
margin: 2em;
}
#results {
font-weight: bold;
}
#results.happy {
color: green;
}
#results.error {
color: red;
}
View Compiled
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 );
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.