Converter Value
by BloodStorm
HTML
<body>
<div align = "center" id ="select">
<input id="curValue1" class="fir"
maxlength = 13 placeholder="Write...">
<div id = "selDiv1">
<select id = "selectVal1" class="first"></select>
</div>
</div>
<div align = "center" id ="submit">
<input id = "curValue2" class="fin"
placeholder = "Answer..." disabled>
<div id = "selDiv2">
<select id = "selectVal2" class="finish"></select>
</div>
</div>
<button id ="convert">Convert</button>
</body>
CSS
body{
font: 1em/1.4em sans-serif;
}
/*Тут стили Inputa*/
#curValue1::-webkit-input-placeholder {color:white;}
#curValue1{
color: white;
background-color: #3CBC8D;
border: none;
font-size: 20px;
padding: 15px 5px;
margin: 10px 5px;
width:40%;
text-align: center;
}
/*Итоговое значение, после нжатаий на Convert button*/
#curValue2{
display: inline-block;
padding: 15px 5px;
margin: 10px 5px;
background-color: #3d3d3d;
font-size: 20px;
color: white;
width: 40%;
text-align: center;
}
/*Кнопка Convert*/
#convert{
background-color: #f44336;
border: none;
color: white;
padding: 20px 35px;
margin: 20px 40%;
font-size: 20px;
text-decoration: none;
display: inline-block;
cursor: pointer;
transition: 0.3s;
}
/*Эт псевдокласс :hover, подсветка конпки*/
#convert:hover{
background-color: #f42336;
}
/* ******ТЕСТОВОЙ КОД****** */
#selDiv1{
padding: 10px 10px;
margin: 10px 10px;
display: inline-block;
}
#selDiv2{
padding: 10px 10px;
margin: 10px 10px;
display: inline-block;
}
select{
background-color: LightSteelBlue;
border: none;
padding: 15px 10px;
margin: 5px 5px;
font-size: 20px;
cursor: pointer;
}
JavaScript
var cur=[{
"ID": "R00000",
"NumCode": 000,
"CharCode": "RUB",
"Nominal": 1,
"Name": "Российский рубль",
"Value": 1
}, {
"ID": "R01010",
"NumCode": 036,
"CharCode": "AUD",
"Nominal": 1,
"Name": "Австралийский доллар",
"Value": 52.4469
}, {
"ID": "R01235",
"NumCode": 840,
"CharCode": "USD",
"Nominal": 1,
"Name": "Доллар США",
"Value": 68.2724
}, {
"ID": "R01239",
"NumCode": 978,
"CharCode": "EUR",
"Nominal": 1,
"Name": "Евро",
"Value": 77.1273
}, {
"ID": "R01350",
"NumCode": 124,
"CharCode": "CAD",
"Nominal": 1,
"Name": "Канадский доллар",
"Value": 52.7811
}, {
"ID": "R01820",
"NumCode": 392,
"CharCode": "JPY",
"Nominal": 100,
"Name": "Японских иен",
"Value": 63.0313
}]
var options = '';
for (var i = 0; i < cur.length; i++) {
options += "<option value='" + cur[i]['CharCode'] + "'>"+ cur[i]['CharCode'] + "</option>";
}
$("select").html(options);
function change(){
if($.isNumeric($('input').val())==true){
var i=$('select.first option:selected').index();
var j=$('select.finish option:selected').index();
console.log(i,j);
$('input.fin').val($('input.fir').val()*(cur[i]['Value'])/(cur[i]['Nominal'])/(cur[j]['Value']));
}
else{
alert('Введите число')
}
}
$("#convert").click(function(){
change();
});