05
Июл
2022

Inputs currency converter js

Довольно странный, возможно будет вопрос, но как убрать стрелочки, которые находятся в инпуте, там, где вводить число, там появляются стрелочки вверх и вниз, как их убрать? Также как убрать цифру 0,00, которая стоит во втором инпуте и чтобы вместо них был placeholder 200, как и в первом инпуте?

const currencyOne = document.getElementById('currency-one');
const currencyTwo = document.getElementById('currency-two');
const amountOne = document.getElementById('amount-one');
const amountTwo = document.getElementById('amount-two');
const rates = document.getElementById('rate');
const swap = document.getElementById('swap');

// Fetch exchange rates and update the dome
function converter() {
  const currency_one = currencyOne.value;
  const currency_two = currencyTwo.value;

  fetch(`https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?json`)
    .then((res) => res.json())
    .then((data) => {  
    
    data.unshift({"txt":"гривна","rate":1, cc:"UAH"})
            
      c1 = data.find(item => item.cc === currency_one);
      c2 = data.find(item => item.cc === currency_two);
      //console.log(c1,c2);
      rates.innerText =  `1 ${currency_one} = ${(1 * c1.rate / c2.rate).toFixed(4)} ${currency_two}`;
      amountTwo.value = (amountOne.value *c1.rate / c2.rate).toFixed(2);
      
    });
}

converter();

// Обработчики события
currencyOne.addEventListener('change', converter);
amountOne.addEventListener('input', converter);
currencyTwo.addEventListener('change', converter);
amountTwo.addEventListener('input', converter);

swap.addEventListener('click', () => {
  const temp = currencyOne.value;
  currencyOne.value = currencyTwo.value;
  currencyTwo.value = temp;
  converter();
});
:root {
  --primary-color: #5fbaa7;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #f4f4f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 20px;
}

.header {
  
  display: flex;
  align-items: center;
}

.indent-right {
  display: flex; 
  width: 24px; 
  height: 24px; 
  background-image: url("https://cdn.privat24.ua/icons/file/ServiceCurrency.svg"); 
  background-repeat: no-repeat; 
  background-position: center center; 
  background-size: contain;
  margin-right: 10px !important;
}

b {
  font-weight: var(--tw-semi);
}

.btn {
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  width: 57px;
  height: 44px;
  font-size: 16px;
  line-height: 1.5;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  transition-duration: 450ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  word-break: normal;
  color: rgba(0, 0, 0, 0.54);
  background: rgb(255, 255, 255);
  box-shadow: rgb(0 0 0 / 12%) 0px 2px 4px 0px, rgb(0 0 0 / 12%) 0px 0px 4px 0px;
  white-space: nowrap;
  border-style: none;
  border-width: 0px;
  border-color: rgb(255, 255, 255);
  margin: 0px;
  cursor: pointer;
}

.btn:hover {
  background-color: lightgrey;
}

.swap-rate-container .btn-arrows {
  transform: rotate(90deg);
  opacity: 0.54;
  transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
  position:absolute;
  font-family: 'Open Sans', sans-serif;
}


.currency {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.currency select {
  padding: 10px 20px 10px 10px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  background: transparent;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-position: right 10px top 50%, 0, 0;
  background-size: 12px auto, 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.currency select:hover {
  
}

select {
  outline: 0;
  border: none;
}
input::placeholder {
  font-family: 'Open Sans', sans-serif;
  margin-right: -17px;
}
.currency input {
  background: transparent;
  font-size: 20px;
  line-height: 1.5;
  text-align: right;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
  border-style: none;
  border-width: 0px;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  outline: none;
  width: 68%;
  font-family: 'Open Sans', sans-serif;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  margin-top: 6px; 
}

.currency input:hover {
  

}

.select-placeholder {
  background: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.38);
}

.swap-rate-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rate {
  color: black;
  font-size: 14px;
  padding: 0 10px;
}


@media (maz-width: 600px) {
  .currency input {
    width: 200px;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Currency Converter</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header">
        <div class="indent-right"></div>
        <b>Конвертер валют</b>
      </div>
      <div class="currency">
        <select id="currency-one">
          <option class="select-placeholder">Виберите</option>
          <option value="EUR">EUR</option>
          <div class="flag_usd">
            <div style="display: flex;">
          <option value="USD" selected>
            USD
        </option>       
          <svg height="24px" 
          width="24px" 
          version="1.1" 
          viewBox="0 0 24 24" 
          xmlns="http://www.w3.org/2000/svg">
            <path 
            d="M12.192 10.868c-1.736-.438-2.294-.892-2.294-1.597 0-.81.772-1.373 2.065-1.373 1.362 0 1.867.631 1.913 1.56h1.69c-.054-1.28-.817-2.502-2.634-2.92V5h-1.805v1.517c-1.673.255-2.99 1.335-2.99 2.769 0 1.715 1.461 2.57 3.595 3.067 1.913.445 2.295 1.1 2.295 1.79 0 .512-.375 1.329-2.065 1.329-1.576 0-2.195-.683-2.295-1.56H8c.092 1.627 1.596 2.908 3.127 2.908v1.548h1.805v-1.53c1.498 0 2.855-1.18 2.855-2.703 0-2.109-1.859-2.822-3.595-3.267z" 
            fill="#000" 
            fill-rule="evenodd" 
            stroke="none" 
            stroke-width="1">                             
            </path>
          </svg>
        </div>
      </div>
          <option value="GBP">GBP</option>
          <option value="UAH">UAH</option>
        </select>
        <input type="number" id="amount-one" placeholder="200" />
      </div>

      <div class="swap-rate-container">
        <button class="btn" id="swap">
        <div class="btn-arrows">
        <div style="display: flex;">
          <svg
            height="24px"
            width="24px"
            version="1.1"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g
              fill="none"
              fill-rule="evenodd"
              stroke="none"
              stroke-width="1"
            >
              <path d="M0 0h24v24H0z"></path>
              <path
                d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"
                fill="#000"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
      </div>
    </button>
        <div class="rate" id="rate"></div>
      </div>

      <div class="currency">
        <select id="currency-two">
          <option class="select-placeholder">Виберите</option>
          <option value="UAH" selected>UAH</option>
          <option value="EUR">EUR</option>
          <option value="GBP">GBP</option>
          <option value="USD">USD</option>
        </select>
        <input type="number" id="amount-two" placeholder="200" />
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Источник: https://ru.stackoverflow.com/questions/1426762/inputs-currency-converter-js

Тебе может это понравится...

Добавить комментарий