JS Basics: One-way data binding

var title = document.createElement('h1');
title.textContent = 'Click and edit me!';

var hero = document.createElement('div');
hero.style.backgroundColor = 'green';
hero.style.padding = '1em'
hero.style.minWidth = '1em';
hero.style.minHeight = '1em';
hero.textContent = title.textContent;

var lblInput = document.createElement('h4');
lblInput.textContent = 'Source data';

var lblOutput = document.createElement('h4');
lblOutput.textContent = 'Output';

title.setAttribute('contenteditable', true); 

title.addEventListener('input', () => {
     hero.textContent = title.textContent;
});
document.body.appendChild(lblInput);
document.body.appendChild(title);
document.body.appendChild(lblOutput);
document.body.appendChild(hero);