خب بعد از چند روز کتاب خواندن و در اینترنت جستوجو کردن چیزی که میخواستم رو پیدا کردم برای شما هم کد رو میزارم شاید به کار کسی بیاد
کار این شکلی میشه
d.png
کد HTML:
<div id="header_Computing">
<div id="header_Computing_label">
<label>مقدار به یورو</label>
<label>قیمت یورو</label>
<label>کسورات</label>
<label>مقدار به تومان</label>
</div>
<div id="header_Computing_input">
<input id="euro" oninput="calcE()" onchange="calcE" type="number" style="position: absolute;top: 0;right: 20px;">
<input id="price" type="number" value="17000" disabled style="position: absolute;top: 0;right: 159px;">
<input id="percent" type="text" value="%7" disabled style="position: absolute;top: 0;right: 292px;">
<input id="toman" oninput="calcT()" onchange="calcT()" type="number" style="position: absolute;top: 0;right: 430px;">
</div>
</div>
و کد CSS
کد HTML:
#header_Computing{
width: 640px;
height: 150px;
direction: rtl;
float: right;
}
#header_Computing_label{
font-family: homa, fantasy;
font-size: 11pt;
color: grey;
width: 100%;
height: 75px;
}
#header_Computing_label label{
margin: 35px 75px 0 0;
display: inline-block;
}
#header_Computing_input{
font-family: homa, fantasy;
font-size: 11pt;
color: grey;
width: 100%;
height: 75px;
position: relative;
}
#header_Computing_input input{
width: 108px;
height: 30px;
display: inline-block;
margin: 2px 30px 0 0;
border: 1px solid #9ae2ff;
box-shadow: 0px 3px 5px #c3e3ff;
border-radius: 15px;
-moz-appearance: textfield;
text-align: center;
font-family: homa, fantasy;
font-size: 11pt;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
و در آخر JS
کد HTML:
function calcE(){
x = document.getElementById("euro").value;
y = document.getElementById("price").value;
let sum = x * y;
let pro = (sum/100)*6;
document.getElementById("toman").value = (sum - pro);
}
function calcT(){
x = document.getElementById("toman").value;
y = document.getElementById("price").value;
let sum = x / y;
let pro = (sum/100)*6;
document.getElementById("euro").value = Math.ceil(sum + pro);
}
دوستان اگر روش بهتر و کوتاه تر سراغ دارید ممنون میشم