File size: 3,041 Bytes
be7c3bf
 
 
 
 
 
370e401
 
be7c3bf
370e401
be7c3bf
 
 
 
 
 
370e401
be7c3bf
ace5181
 
 
 
 
83ea6fc
ace5181
 
 
370e401
 
 
 
 
 
 
 
 
 
 
ace5181
83ea6fc
ace5181
 
 
370e401
ace5181
 
43e0d7d
ace5181
 
 
370e401
 
 
 
 
 
 
 
 
 
 
ace5181
7ae1eb2
ace5181
 
 
 
062df00
ace5181
f03791c
ace5181
370e401
be7c3bf
370e401
be7c3bf
 
ace5181
370e401
 
 
be7c3bf
 
aade644
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!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 CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/css/select2.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>Currency Converter</h1>
    </header>

    <form id="currencyForm">
      <!-- Amount Input -->
      <div class="form-group">
        <label for="amount">Amount</label>
        <input type="number" id="amount" placeholder="Enter amount" value="10.00" required>
      </div>

      <!-- From Currency -->
      <div class="form-group">
        <label for="fromCurrency">From</label>
        <select id="fromCurrency" required>
          <option value="USD" selected>USD - US Dollar</option>
          <option value="EUR">EUR - Euro</option>
          <option value="GBP">GBP - British Pound</option>
          <option value="IDR">IDR - Indonesian Rupiah</option>
          <option value="JPY">JPY - Japanese Yen</option>
          <option value="BRL">BRL - Brazilian Real</option>
          <option value="KRW">KRW - South Korean Won</option>
          <option value="AUD">AUD - Australian Dollar</option>
          <option value="CAD">CAD - Canadian Dollar</option>
        </select>
      </div>

      <!-- Swap Button -->
      <div class="swap-group">
        <button type="button" id="swapButton" aria-label="Swap Currencies">
          <i class="fas fa-exchange-alt"></i>
        </button>
      </div>

      <!-- To Currency -->
      <div class="form-group">
        <label for="toCurrency">To</label>
        <select id="toCurrency" required>
          <option value="USD">USD - US Dollar</option>
          <option value="EUR">EUR - Euro</option>
          <option value="GBP">GBP - British Pound</option>
          <option value="IDR" selected>IDR - Indonesian Rupiah</option>
          <option value="JPY">JPY - Japanese Yen</option>
          <option value="BRL">BRL - Brazilian Real</option>
          <option value="KRW">KRW - South Korean Won</option>
          <option value="AUD">AUD - Australian Dollar</option>
          <option value="CAD">CAD - Canadian Dollar</option>
        </select>
      </div>

      <!-- Result -->
      <div id="result" class="result-box">
        Result will appear here
      </div>

      <!-- Convert Button -->
      <button type="button" id="convertButton" class="convert-button">Convert</button>
    </form>

    <footer>
      <p>&copy; 2025 Teggar Eka M.S. All Rights Reserved.</p>
    </footer>
  </div>

  <!-- Link JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0/js/select2.min.js"></script>
  <script src="script.js"></script>
</body>
</html>