<main>
<p>Enter text to see it reversed below...</p>
<input />
<div data-reverse></div>
</main>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:700&display=swap');
html,
body {
height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
place-items: center;
}
main {
display: flex;
flex-direction: column;
height: 200px;
width: 400px;
}
main p {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
main input {
border: 2px solid rebeccapurple;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
padding: 8px 16px;
}
main div[data-reverse] {
color: rebeccapurple;
font-family: 'Open Sans', sans-serif;
font-size: 24px;
min-height: 32px;
padding: 8px 16px;
}
const reverse = new Proxy(
{
value: ''
},
{
set: function (target, prop, value) {
target[prop] = value;
document.querySelectorAll('[data-reverse]').forEach(item => {
let el = document.createElement('div');
el.innerHTML = '‮' + value;
item.innerText = el.innerHTML;
});
return true;
}
}
)
document.querySelector('input').addEventListener('input', e => {
reverse.value = e.target.value;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.