this time I need to do the following effect;
where the part of the numbers can be edited by the user, and USD -EUR are a kind of placeholder that are fixed and never deleted, one of the important details is the central line that makes the division effect, keeping the same distance both the upper and lower elements with respect to said line.
I really saw this effect in an app, and I would like to know how to achieve it.
Thank you.
Here is an example of how to get something similar to what you want, you would have to improve the code a bit, I just focused on what you ask, but that would not be very difficult and I think that with this you can solve your problem .
var inputEuros = document.getElementById("euros");
var inputDolares = document.getElementById("dolares");
function escribirDolares() {
if (inputEuros.value != "") {
var euros = inputEuros.value;
} else {
euros = 0;
}
inputDolares.value = parseFloat(euros) * 1.156604;
}
function escribirEuros() {
if (inputDolares.value != "") {
var dolares = inputDolares.value;
} else {
dolares = 0;
}
inputEuros.value = parseFloat(dolares) / 1.156604;
}input {border:none;}
input:focus {outline:0px;}
hr {border:0.5px solid black;width:220px;margin-left:0px;}<div>
<input type="number" id="euros" onkeyup="escribirDolares()"/><span>Euros</span>
</div>
<hr />
<div>
<input type="number" id="dolares" onkeyup="escribirEuros()"/><span>Dolares</span>
</div>Something similar to this? I have put the css inside the HTML so you can see the effect that can be given to the input by simply removing the edges and adding a line. Do you also want the functionality of JS?
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div>
<input value="20" style="border:none"><span text-align="right">EUR</span>
</div>
<hr>
<div>
<input value="40" style="border:none"><span text-align="right">DOLL</span>
</div>
</div>
</body>
</html>