Paste in text here. There ought to be a colon after the speaker's name and each new line assumes there will be a name followed by ":" followed by a quote.
Code
JavaScript
function update() {
document.querySelector('#output').value = '';
var finalValue = '';
var bodies = [];
var input = document.querySelector('#input').value;
input.split('\n').map(function (item) {
var tmp = item.split(':');
var dt = tmp.shift().trim();
var dd = tmp.join(':').trim();
var strongSpeaker = document.querySelector('#strongSpeaker').checked;
var emQuote = document.querySelector('#emQuote').checked;
var speakerTag = strongSpeaker ? ['<dt><strong>', '</strong></dt>'] : ['<dt>', '</dt>'];
var quoteTag = emQuote ? ['<dd><em>', '</em></dd>'] : ['<dd>', '</dd>'];
if (dt === '--') {
bodies.push(finalValue);
finalValue = '';
} else if (dt && dd) {
finalValue += speakerTag[0] + dt + speakerTag[1] + "\n";
finalValue += quoteTag[0] + dd + quoteTag[1] + "\n";
}
});
if (finalValue.length > 0) {
bodies.push(finalValue);
}
bodies.map(function(body) {
document.querySelector('#output').value += '<dl>\n' + body + '</dl>\n\n';
});
}
var elems = document.querySelectorAll('.update');
elems.forEach(function(item) {
item.addEventListener('change', update);
item.addEventListener('keyup', update);
item.addEventListener('click', update);
});
update();
SCSS
html {
height: 100%;
}
* {
box-sizing: border-box;
}
section.quote-to-dl {
display: grid;
grid-template-rows: 40px 45vh 30px 45vh;
margin: -0.5em -2em;
height: 100%;
gap: 0;
}
section.quote-to-dl textarea {
padding: 1vw;
background: #eee;
}
section.quote-to-dl div {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
gap: 3em;
background: #efefef;
padding: 0.75em;
}
/*# sourceMappingURL=quote-to-dl.css.map */