'How to make it so that when you click on an option item from the list, a picture with a visual currency designation appears
How to make it so that when you click on the option item from the list, a picture or font awesome symbol with a visual currency designation appears. Right now it's all hard-coded, and I have no idea what to do with it all, because all the javascript and html were written by another person and i just added a few styles and changed a couple of variables.
window.onload = function () {
let c = {'BTN':'78', 'ETH':'85.60', 'USD':'1'};
let val = document.getElementById('val');
let currency1 = document.getElementById('cur1');
let currency2 = document.getElementById('cur2');
let result = document.getElementsByClassName('convert_result')[0];
function summ() {
let z = 0;
if(currency1.value === currency2.value){
result.innerText = val.value;
} else {
if(currency1.value != 'USD'){
z = val.value*c[currency1.value];
result.innerHTML = Math.ceil((z/c[currency2.value])*100)/100;
} else {
result.innerHTML = Math.ceil((val.value*c[currency2.value])*100)/100;
}
}
}
val.oninput = function () {
};
currency1.onchange = function () {
summ();
};
currency2.onchange = function () {
summ();
}
}
footer {
position: relative;
margin-top: 15vw;
background-color: #1d1d1d;
width: 100%;
height: 40vw;
}
.input1 {
height: 10%;
width: 20%;
position: absolute;
margin-top: 25vw;
margin-left: 10vw;
font-family: 'Clash Display', sans-serif;
font-size: 2vw;
}
select {
width: 7%;
height: 8.7vh;
font-family: 'Clash Display', sans-serif;
font-size: 2vw;
}
#cur1 {
position: absolute;
margin-top: 25vw;
margin-left: 32vw;
}
.convert_result {
position: absolute;
color: azure;
margin-top: 25.5vw;
margin-left: 70vw;
font-size: 3vw;
font-family: 'Clash Display', sans-serif;
}
input::-webkit-input-placeholder { color: black; }
#cur2 {
position: absolute;
margin-top: 25vw;
margin-left: 82vw;
}
[class="fa-brands fa-btc"] {
color: #fec940;
font-size: 23vw;
margin-top: 1vw;
margin-left: 12.5vw;
}
[class="fa-brands fa-ethereum"] {
color: #abb7de;
font-size: 23vw;
margin-top: 1vw;
margin-left: 43vw;
}
<footer>
<div class="convert_block_item">
<input type="number" id="val" placeholder="Enter The Amount" class="input1">
<select id="cur1">
<option>BTN</option>
<option>ETH</option>
<option>USD</option>
</select>
</div>
<div class="convert_block_item">
<div class="convert_result"> <p>00.000 </p></div>
<select id="cur2">
<option>BTN</option>
<option>ETH</option>
<option>USD</option>
</select>
</div>
<i class="fa-brands fa-btc"></i>
<i class="fa-brands fa-ethereum"></i>
</footer>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

