Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter
Running

App Files Community
GarGerry commited on
Commit
d53e7dd
·
verified ·
1 Parent(s): 9222cac

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +51 -57
index.html CHANGED
@@ -1,69 +1,63 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Currency Converter</title>
7
- <link rel="stylesheet" href="styles.css">
8
  </head>
9
  <body>
10
- <!-- Navbar -->
11
- <header>
12
- <nav class="navbar">
13
- <a href="#home">
14
- <img src="logo.png" alt="Logo" class="logo">
15
- </a>
16
- </nav>
17
- </header>
 
18
 
19
- <!-- Headline -->
20
- <section class="headline">
21
- <h1>Seribu Dolar Baru Taiwan ke Euro</h1>
22
- <p>Konversi TWD ke EUR dengan nilai tukar nyata</p>
23
- </section>
 
 
24
 
25
- <!-- Main Content (Form Konversi) -->
26
- <main>
27
- <section class="content-area">
28
- <h1>Masukkan Jumlah TWD</h1>
29
- <form>
30
- <input type="number" id="amount" placeholder="Jumlah TWD" required>
31
- <select id="currency-from">
32
- <option value="TWD">TWD</option>
33
- <!-- Tambahkan mata uang lainnya jika perlu -->
34
- </select>
35
- <select id="currency-to">
36
- <option value="EUR">EUR</option>
37
- <!-- Tambahkan mata uang lainnya jika perlu -->
38
- </select>
39
- <button type="submit">Konversi</button>
40
- </form>
41
- </section>
42
 
43
- <!-- Informasi Cara Mengkonversi -->
44
- <section class="info-box">
45
- <h2>Cara Mengkonversi Mata Uang</h2>
46
- <p>Masukkan jumlah uang yang ingin Anda konversi dalam kolom yang tersedia, pilih mata uang asal dan tujuan, lalu tekan tombol "Konversi" untuk mendapatkan hasil konversi berdasarkan nilai tukar yang terkini.</p>
47
- </section>
48
- </main>
49
 
50
- <!-- Footer -->
51
- <footer class="footer">
52
- <div class="social-icons">
53
- <a href="https://www.instagram.com/username" target="_blank" title="Instagram">
54
- <img src="instagram-icon.png" alt="Instagram" style="width: 24px; height: 24px;">
55
- </a>
56
- <a href="https://www.twitter.com/username" target="_blank" title="Twitter">
57
- <img src="twitter-icon.png" alt="Twitter" style="width: 24px; height: 24px;">
58
- </a>
59
- <a href="https://www.facebook.com/username" target="_blank" title="Facebook">
60
- <img src="facebook-icon.png" alt="Facebook" style="width: 24px; height: 24px;">
61
- </a>
62
- </div>
63
- <div class="copyright">
64
- <p>&copy; 2025 Teggar Eka Mustaqim Sitanggang. All rights reserved.</p>
 
 
 
 
 
65
  </div>
66
- <link rel="stylesheet" href="styles.css">
67
- </footer>
68
  </body>
69
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Currency Converter</title>
7
+ <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <div class="container">
11
+ <!-- Navbar -->
12
+ <header>
13
+ <div class="logo">
14
+ <img src="logo.png" alt="Logo">
15
+ </div>
16
+ <h1>Currency Converter</h1>
17
+ <p>Check Live Foreign Currency Exchange Rate</p>
18
+ </header>
19
 
20
+ <!-- Main Content -->
21
+ <div class="content">
22
+ <div class="currency-container">
23
+ <div class="currency-labels">
24
+ <label for="amount">Amount</label>
25
+ <input type="number" id="amount" placeholder="Enter amount">
26
+ </div>
27
 
28
+ <div class="currency-labels">
29
+ <label for="from-currency">From</label>
30
+ <select id="from-currency">
31
+ <option value="USD">USD</option>
32
+ <option value="EUR">EUR</option>
33
+ <option value="GBP">GBP</option>
34
+ </select>
35
+ </div>
 
 
 
 
 
 
 
 
 
36
 
37
+ <button id="swap-btn" onclick="swapCurrencies()">↕</button>
 
 
 
 
 
38
 
39
+ <div class="currency-labels">
40
+ <label for="to-currency">To</label>
41
+ <select id="to-currency">
42
+ <option value="EUR">EUR</option>
43
+ <option value="USD">USD</option>
44
+ <option value="GBP">GBP</option>
45
+ </select>
46
+ </div>
47
+
48
+ <button id="convert-btn" onclick="convertCurrency()">Convert</button>
49
+ <p id="result"></p>
50
+ </div>
51
+ </div>
52
+
53
+ <!-- Footer -->
54
+ <footer>
55
+ <p><strong>About:</strong> Currency Converter App</p>
56
+ <p><strong>Follow us:</strong> <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
57
+ <p>&copy; 2025 Currency Converter App. All rights reserved.</p>
58
+ </footer>
59
  </div>
60
+
61
+ <script src="script.js"></script>
62
  </body>
63
  </html>