bartlett705/chompskify.html

## chompskify.html
<html>
<style>
    body {
        background-color: lightblue
    }

    li {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .success {
        opacity: 0;
        padding: 3px;
        margin-left: 1rem;
        border-radius: 3px;
        background-color: green;
        color: white;
    }

    .chompy-message {
        width: 65%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;

    }

    label {
        width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chompy-message::before {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        content: "-->";
    }

    .success--done {
        opacity: 1;
    }

    .oblique {
        font-style: italic;
    }
</style>

<body>
    <form id="form">
        <label>Chompify!</label>
        <input id="inp"></input>
        <button>Go</button>
	<span class="oblique">Entries are copied on submit. Click to copy a specific one.</span>
    </form>
    <ol id="output"></ol>
</body>
<script>
    const letterUp = (l) => `:chompyletter${l}:`;

    const specialChars = {
        "'": 'apostrophe',
        ".": 'period',
        ",": 'comma',
        "!": 'exclamation',
        "?": 'question',
        '"': 'quote',
    }

    function main(sentence) {
        return [
            ":chompybubbleleft:",
            ...sentence
                .split("")
                .map((char) =>
                    letterUp(char.match(/[\w\d]/) ? char : specialChars[char] || 'space')
                ),
            ":chompybubbleendright:"
        ].join("");
    }

    function bindOnSubmit() {
        document.querySelector("#form").addEventListener("submit", function (e) {
            const onClick = (output, success, input) => () => {
                const selection = window.getSelection();
                const range = document.createRange();
                range.selectNodeContents(output);
                selection.removeAllRanges();
                selection.addRange(range);

                document.execCommand('copy');
                selection.removeAllRanges();
                success.classList.add('success--done')
                input.focus()
                setTimeout(() => {
                    success.classList.remove('success--done')
                    console.log('done!')
                }, 1500)
            }

            e.preventDefault();
            const inputNode = document.querySelector("#inp")
            const input = inputNode.value;
            inputNode.value = ""

            const newOutput = document.createElement('span')
            newOutput.classList.add('chompy-message')
            newOutput.innerHTML = main(input)

            const label = document.createElement('label')
	    label.classList.add('oblique')
            label.innerHTML = input

            const success = document.createElement('span')
            success.innerHTML = 'Copied!'
            success.classList.add('success')

            const wrapper = document.createElement('li')
            wrapper.appendChild(label)
            wrapper.appendChild(newOutput)
            wrapper.appendChild(success)

            wrapper.addEventListener('click', onClick(newOutput, success, inputNode))
            document.querySelector("#output").appendChild(wrapper)
            onClick(newOutput, success, inputNode)()
        });
    }

    bindOnSubmit();
</script>

</html>
	<html>
	<style>
	body {
	background-color: lightblue
	}

	li {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	}

	.success {
	opacity: 0;
	padding: 3px;
	margin-left: 1rem;
	border-radius: 3px;
	background-color: green;
	color: white;
	}

	.chompy-message {
	width: 65%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	white-space: nowrap;

	}

	label {
	width: 10rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.chompy-message::before {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	content: "-->";
	}

	.success--done {
	opacity: 1;
	}

	.oblique {
	font-style: italic;
	}
	</style>

	<body>
	<form id="form">
	<label>Chompify!</label>
	<input id="inp"></input>
	<button>Go</button>
	<span class="oblique">Entries are copied on submit. Click to copy a specific one.</span>
	</form>
	<ol id="output"></ol>
	</body>
	<script>
	const letterUp = (l) => `:chompyletter${l}:`;

	const specialChars = {
	"'": 'apostrophe',
	".": 'period',
	",": 'comma',
	"!": 'exclamation',
	"?": 'question',
	'"': 'quote',
	}

	function main(sentence) {
	return [
	":chompybubbleleft:",
	...sentence
	.split("")
	.map((char) =>
	letterUp(char.match(/[\w\d]/) ? char : specialChars[char] \|\| 'space')
	),
	":chompybubbleendright:"
	].join("");
	}

	function bindOnSubmit() {
	document.querySelector("#form").addEventListener("submit", function (e) {
	const onClick = (output, success, input) => () => {
	const selection = window.getSelection();
	const range = document.createRange();
	range.selectNodeContents(output);
	selection.removeAllRanges();
	selection.addRange(range);

	document.execCommand('copy');
	selection.removeAllRanges();
	success.classList.add('success--done')
	input.focus()
	setTimeout(() => {
	success.classList.remove('success--done')
	console.log('done!')
	}, 1500)
	}

	e.preventDefault();
	const inputNode = document.querySelector("#inp")
	const input = inputNode.value;
	inputNode.value = ""

	const newOutput = document.createElement('span')
	newOutput.classList.add('chompy-message')
	newOutput.innerHTML = main(input)

	const label = document.createElement('label')
	label.classList.add('oblique')
	label.innerHTML = input

	const success = document.createElement('span')
	success.innerHTML = 'Copied!'
	success.classList.add('success')

	const wrapper = document.createElement('li')
	wrapper.appendChild(label)
	wrapper.appendChild(newOutput)
	wrapper.appendChild(success)

	wrapper.addEventListener('click', onClick(newOutput, success, inputNode))
	document.querySelector("#output").appendChild(wrapper)
	onClick(newOutput, success, inputNode)()
	});
	}

	bindOnSubmit();
	</script>

	</html>