<div>
<button id='bintro'>Intro: b</button>
</div>
<p id='content'>Click the button to change this text</p>
button {
font-size: 36px;
}
#content {
font-size: 36px;
}
function b(strings, ...values) {
const result = [];
strings.forEach(s => {
result.push(s);
result.push('<b>' + (values.shift() || '') + '</b>');
});
return result.join('');
}
function intro() {
const user = 'Jones';
const text = 'hello world';
const result = b`1. ${user} said: "${text}"`
$('#content').html(result);
}
$('#bintro').on('click', intro);
This Pen doesn't use any external CSS resources.