CODEWITHSUNDEEP
javascripthtmlcss
Matute VIP
Matute VIP

Reputation: 31

Currency Converter - JavaScript

I am trying to make a Currency Converter, just for fun. Only from Peso (Argentina) to US Dollar. The problem for me is in the JavaScript. I am trying to use a select in which the user can decide whether to make the conversion from Dollar to Peso, or from Peso to Dollar. So if the user chooses Dollar to Peso the operation is multiply the value the user inputs to the rate, if it chooses Peso to Dollar it has to divide.

Thing is, I cannot get the value from the select. Or I don't know how to do it. Here is the code:

var opciones = document.getElementById('selector');
var dolarapeso = document.getElementsByTagName('option').value;
var pesodolar = document.getElementsByTagName('option').value;

function convertir() {
  var A = document.getElementById('cantidad').value;
  var B = [145, 157.7, 157.9, 90.2];
  var C = [];

  C[0] = ["0"];
  C[1] = ["0"];
  C[2] = ["0"];
  C[3] = ["0"];

  if (dolarpeso === "1") {
    C = B.map(B => A * B);

    document.getElementById('a').innerHTML = C[0];
    document.getElementById('b').innerHTML = C[1];
    document.getElementById('c').innerHTML = C[2];
    document.getElementById('d').innerHTML = C[3];
  } else if (pesodolar === "2") {
    C = B.map(B => A / B);

    document.getElementById('a').innerHTML = C[0];
    document.getElementById('b').innerHTML = C[1];
    document.getElementById('c').innerHTML = C[2];
    document.getElementById('d').innerHTML = C[3];
  }
}
body {
  background-color: #ffe3de;
  height: 1024px;
}

main {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
}

header {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 25px;
}

footer {
  width: 1024px;
  height: 350px;
  margin-right: auto;
  margin-left: auto;
}

h1 {
  font-family: Barlow;
  font-weight: 500;
}

h3 {
  font-family: Barlow;
}

h4 {
  font-family: Barlow;
  font-style: italic;
}

p {
  font-family: IBM Plex Sans;
}

#info {
  width: 90%;
  height: 300px;
  background-color: #03506f;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 20px;
  color: white;
  text-align: center;
}

#tipos {
  margin-left: auto;
  margin-right: auto;
  height: 150px;
  width: 30%;
  background-color: #dddddd;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

#blu {
  color: blue;
}

#mayorista {
  color: #556b2f;
}

#tarjeta {
  color: #e6a80e;
}

#Oficial {
  color: #2aae2a;
}

#areadecalculo {
  width: 90%;
  height: 500px;
  background-color: #a3ddcb;
  border-radius: 5px;
  margin-bottom: 25px;
  margin-top: 25px;
}

#cant {
  margin-left: 60px;
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: Barlow;
}

#cantidad {
  width: 30%;
  height: 28px;
  margin-left: 25px;
  margin-top: 15px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#selector {
  width: 30%;
  height: 28px;
  margin-left: 5px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#convert {
  margin-left: 400px;
  font-size: 25px;
  color: white;
  font-weight: bold;
}

#conversor {
  display: block;
  margin-top: 20px;
  margin-left: 450px;
  height: 30px;
  width: 10%;
  border-radius: 4px;
  font-family: IBM Plex Sans;
  background-color: #0a043c;
  color: white;
}

#resultado {
  width: 80%;
  height: 150px;
  margin-top: 35px;
  margin-left: 80px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#display {
  margin-top: 50px;
  margin-right: 30px;
}

.indicadores {
  margin-right: 10px;
  margin-left: 10px;
  line-height: 150px;
  font-family: Barlow;
}

#a {
  margin-left: 5px;
  color: blue;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#b {
  margin-left: 5px;
  color: #556b2f;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#c {
  margin-left: 5px;
  color: #e6a80e;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#d {
  color: #2aae2a;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#powered-footer {
  float: left;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Conversor de Monedas</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;1,100&family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <h1 id="titulo">Conversor de Moneda</h1>
    <p id="powered"> Powered by CafeEnJarritoWeb</p>
    <img id="powered" src="" alt="" id="logo">
  </header>
  <main>
    <div id="info">
      <h3>¡Averigua la cotización de todos los tipos de dólares al segundo!</h3>
      <p>Con nuestro conversor de moneda para la Argentina, podes convertir el monto que necesites y te haremos la conversión a todos los diferentes tipos de Dolar vigentes en nuestro país.</p>
      <div id="tipos">
        <h4 id="blu">Dólar Blu</h4>
        <h4 id="mayorista">Dólar Mayorista</h4>
        <h4 id="tarjeta">Dólar Tarjeta</h4>
        <h4 id="Oficial">Dólar Oficial</h4>
      </div>
    </div>
    <div id="areadecalculo">
      <span id="cant">Cantidad:</span><input id="cantidad" type="number" name="cantidad" value="" placeholder="Indica la cantidad de Dolares a convertir a Pesos">
      <select id="selector" class="seleccionador" name="monedas">
        <option value="1">de Dólares a Pesos</option>
        <option value="2"> de Pesos a Dólares</option>
      </select>
      <button type="button" name="conversor" id="conversor" onclick="convertir()">¡Convertir!</button>
      <div id="resultado">
        <div id="display">
          <span class="indicadores">Dolar Blu: <span id="a"> </span></span>
          <span class="indicadores">Dólar Mayorista:<span id="b"> </span></span>
          <span class="indicadores">Dólar Tarjeta:<span id="c"></span></span>
          <span class="indicadores">Dólar Oficial:<span id="d"></span></span>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <p id="powered-footer"> Powered by CafeEnJarritoWeb</p>
    <img id="powered-footer" src="" alt="" id="logo">
  </footer>
  <script type="text/javascript" src="js/conversor.js"></script>
</body>

</html>

Upvotes: 0

Views: 328

Answers (3)

McRui
McRui

Reputation: 1955

I've reviewed the JS code and here's my suggestion that should throw no errors. I hope it helps and solves your issue.

let opciones   = document.getElementById("selector"),
    dolarapeso = document.getElementsByTagName("option").value,
    pesodolar  = document.getElementsByTagName("option").value;

function convertir() {

    let A = document.getElementById("cantidad").value,
        B = [145, 157.7, 157.9, 90.2],
        C = [],
        monedas = document.getElementById("selector").value;

        C [0] = ["0"];
        C [1] = ["0"];
        C [2] = ["0"];
        C [3] = ["0"];

    if(monedas === "1") {
        C = B.map(B => A * B);

        document.getElementById("a").innerHTML = C [0];
        document.getElementById("b").innerHTML = C [1];
        document.getElementById("c").innerHTML = C [2];
        document.getElementById("d").innerHTML = C [3];
    } else if(monedas === "2") {
        C = B.map(B => A / B);

        document.getElementById("a").innerHTML = C [0];
        document.getElementById("b").innerHTML = C [1];
        document.getElementById("c").innerHTML = C [2];
        document.getElementById("d").innerHTML = C [3];
    }
}

Upvotes: 0

kmoser
kmoser

Reputation: 9308

You're calling the variable dolarapeso in one place and dolarpeso in another:

var dolarapeso = document.getElementsByTagName('option').value

if (dolarpeso === "1") {

But the main problem is that you're getting the value of the dropdown incorrectly. It should be:

var val = document.getElementById('selector').value;

You can then say:

if ( val === "1" ) {
  // Dollars to pesos
} else if ( val === "2" ) {
  // Pesos to dollars
}

Upvotes: 1

Illusion705
Illusion705

Reputation: 451

You can get the value of your selector like this:

opciones.value

This will get the value property from the selected option.

Upvotes: 0

Related Questions