Split Component

by TigerAsks

HTML

<input id="sequence"\> <button onclick="setSequence()">Set Sequence</button>
<hr>
<div class="container">
    <input class="start" readonly>
    <span>...</span>
    <input class="end" readonly>
</div>

CSS

#sequence{
    width: 50em;
}

.start, .end {
      pointer-events:none;
}

.end {
    direction: RTL;
}

JavaScript

const sequence = document.querySelector("#sequence")
const start = document.querySelector(".start")
const end = document.querySelector(".end")

start.ontouchend = (e) => {
    e.preventDefault()
}

end.ontouchend = (e) => {
    e.preventDefault()
}

sequence.value = 'alphabetagammadeltaepsilonzetaetathetaiotakappalambdamunuxiomikronpirhosigmatauupsilonphichipsiomega'

function setSequence(){
	const s = sequence.value
    
    if(s.length < 2){
    	start.value = s
        end.value = null
        return
    }
    
    const idxBreak = Math.floor(s.length / 2)
    
	start.value = s.substr(0,idxBreak)
    end.value = s.substr(idxBreak)
}