convert-money-js/index.html at master · kamaudev/convert-money-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>Convert Money</title>
  </head>
  <body>
    <header>
      <img
        class="img-logo"
        src="./assets/img-logo.gif"
        alt="moeda dourada se materalizando em em pixels"
      />
      <h1>Conversor de Moedas</h1>
    </header>
    <main>
      <label for="moeda-a-converter">Converter <b>de</b></label>
      <select  class="currency-select-to-convert" name="moeda-a-converter" id="moeda-a-converter">
        <option value="real">R$ Real Brasileiro</option>
        <option value="dolar">US$ Dólar Americano</option>
        <option value="euro">€ Euro</option>
        <option value="libra">£ Libra</option>
        <option value="bitcoin">Bitcoin</option>
      </select>
      <br />
      <label for="input-currency">Valor</label>
      <input type="text" id="input-currency" name="input-currency" placeholder="R$100" required/>
      <br />
      <label for="moeda-convertida">Converter <b>para</b></label>
      <select class="currency-select-converted" name="moeda-convertida" id="moeda-convertida">
        <option value="real">R$ Real Brasileiro</option>
        <option value="dolar">US$ Dólar Americano</option>
        <option value="euro">€ Euro</option>
        <option value="libra">£ Libra</option>
        <option value="bitcoin">Bitcoin</option>
      </select>
      <br />
      <button class="convert-button">Converter</button>
      <section>
        <div class="currency-box">
          <img class="source-currency-img" src="./assets/img-real.png" alt="logo-moeda-a-ser-convertida" />
          <p class="source-currency-name">Real</p>
          <p class="currency-value-to-convert">R$ 0,00</p>
        </div>

        <img
        class="arrow-img"
          src="./assets/img-arrow.png"
          alt="setas em dois sentidos, cor preta"
        />

        <div class="currency-box">
          <img class="destination-currency-img" src="./assets/img-dolar.png" alt="logo-moeda-convertida" />
          <p class="destination-currency-name">Dólar</p>
          <p class="currency-value">US$ 0.00</p>
        </div>
      </section>
    </main>
  </body>
      <script src="./script.js"></script>
</html>