'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 it looks now

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