Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

App Files Community
1
GarGerry commited on
Commit
d2bfa26
·
verified ·
1 Parent(s): 44ac58c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +85 -47
index.html CHANGED
@@ -7,64 +7,102 @@
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
- <!-- Navbar -->
11
- <header>
12
- <nav class="navbar">
13
- <div class="logo">
14
- <h1>Currency Converter</h1>
15
- </div>
16
- <div class="welcome-message">
17
- <p>Welcome to our Currency Converter!</p>
18
- </div>
19
- </nav>
20
- </header>
21
 
22
- <!-- How to Use Section -->
23
- <section class="how-to-use">
24
- <h2>How to Convert</h2>
25
- <div class="steps">
26
- <div class="step">
27
- <h3>1. Enter the Amount</h3>
28
- <p>Simply type the amount you want to convert in the input box.</p>
29
- </div>
30
- <div class="step">
31
- <h3>2. Select Your Currencies</h3>
32
- <p>Click the dropdown menu to choose USD in the first option as the currency you want to convert, and EUR in the second option as the currency you want to convert to.</p>
33
- </div>
34
- <div class="step">
35
- <h3>3. That's It</h3>
36
- <p>Our currency converter will show you the current exchange rate from USD to EUR and how it has changed over the past day, week, or month.</p>
37
- </div>
38
- </div>
39
- </section>
40
 
41
- <!-- Currency Converter Form -->
42
- <section class="converter">
43
- <h2>Currency Converter</h2>
44
- <div class="form-container">
45
  <input type="number" id="amount" placeholder="Enter amount" required>
 
 
46
  <select id="from-currency">
47
- <!-- Currency options will go here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </select>
 
 
49
  <select id="to-currency">
50
- <!-- Currency options will go here -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </select>
52
- <button onclick="convertCurrency()">Convert</button>
 
53
  <p id="result"></p>
54
  </div>
55
- </section>
56
 
57
- <!-- Footer -->
58
- <footer>
59
- <div class="footer-content">
60
- <p>&copy; 2025 Currency Converter | All Rights Reserved</p>
61
- <div class="social-media">
62
- <a href="#">Facebook</a>
63
- <a href="#">Twitter</a>
64
- <a href="#">Instagram</a>
65
- </div>
66
  </div>
67
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
68
 
69
  <script src="script.js"></script>
70
  </body>
 
7
  <link rel="stylesheet" href="style.css">
8
  </head>
9
  <body>
10
+ <div class="navbar">
11
+ <img src="logo.png" alt="Logo" class="logo"> <!-- Ganti logo.png dengan gambar logo yang Anda inginkan -->
12
+ </div>
 
 
 
 
 
 
 
 
13
 
14
+ <div class="headline">
15
+ <h1>Currency Converter</h1>
16
+ <p>Convert your currency easily</p>
17
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
 
19
+ <div class="container">
20
+ <div class="converter">
21
+ <label for="amount">Amount:</label>
 
22
  <input type="number" id="amount" placeholder="Enter amount" required>
23
+
24
+ <label for="from-currency">From:</label>
25
  <select id="from-currency">
26
+ <option value="USD">🇺🇸 USD - United States Dollar</option>
27
+ <option value="BND">🇧🇳 BND - Brunei Dollar</option>
28
+ <option value="KHR">🇰🇭 KHR - Cambodian Riel</option>
29
+ <option value="IDR">🇮🇩 IDR - Indonesian Rupiah</option>
30
+ <option value="LAK">🇱🇦 LAK - Lao Kip</option>
31
+ <option value="MYR">🇲🇾 MYR - Malaysian Ringgit</option>
32
+ <option value="MMK">🇲🇲 MMK - Myanmar Kyat</option>
33
+ <option value="PHP">🇵🇭 PHP - Philippine Peso</option>
34
+ <option value="SGD">🇸🇬 SGD - Singapore Dollar</option>
35
+ <option value="THB">🇹🇭 THB - Thai Baht</option>
36
+ <option value="VND">🇻🇳 VND - Vietnamese Dong</option>
37
+ <option value="EUR">🇪🇺 EUR - Euro</option>
38
+ <option value="GBP">🇬🇧 GBP - British Pound</option>
39
+ <option value="CHF">🇨🇭 CHF - Swiss Franc</option>
40
+ <option value="RUB">🇷🇺 RUB - Russian Ruble</option>
41
+ <option value="TRY">🇹🇷 TRY - Turkish Lira</option>
42
+ <option value="CAD">🇨🇦 CAD - Canadian Dollar</option>
43
+ <option value="BRL">🇧🇷 BRL - Brazilian Real</option>
44
+ <option value="ARS">🇦🇷 ARS - Argentine Peso</option>
45
+ <option value="ZAR">🇿🇦 ZAR - South African Rand</option>
46
+ <option value="JPY">🇯🇵 JPY - Japanese Yen</option>
47
+ <option value="CNY">🇨🇳 CNY - Chinese Yuan</option>
48
+ <option value="KRW">🇰🇷 KRW - South Korean Won</option>
49
+ <option value="KPW">🇰🇵 KPW - North Korean Won</option>
50
+ <option value="HKD">🇭🇰 HKD - Hong Kong Dollar</option>
51
  </select>
52
+
53
+ <label for="to-currency">To:</label>
54
  <select id="to-currency">
55
+ <option value="EUR">🇪🇺 EUR - Euro</option>
56
+ <option value="USD">🇺🇸 USD - United States Dollar</option>
57
+ <option value="BND">🇧🇳 BND - Brunei Dollar</option>
58
+ <option value="KHR">🇰🇭 KHR - Cambodian Riel</option>
59
+ <option value="IDR">🇮🇩 IDR - Indonesian Rupiah</option>
60
+ <option value="LAK">🇱🇦 LAK - Lao Kip</option>
61
+ <option value="MYR">🇲🇾 MYR - Malaysian Ringgit</option>
62
+ <option value="MMK">🇲🇲 MMK - Myanmar Kyat</option>
63
+ <option value="PHP">🇵🇭 PHP - Philippine Peso</option>
64
+ <option value="SGD">🇸🇬 SGD - Singapore Dollar</option>
65
+ <option value="THB">🇹🇭 THB - Thai Baht</option>
66
+ <option value="VND">🇻🇳 VND - Vietnamese Dong</option>
67
+ <option value="GBP">🇬🇧 GBP - British Pound</option>
68
+ <option value="CHF">🇨🇭 CHF - Swiss Franc</option>
69
+ <option value="RUB">🇷🇺 RUB - Russian Ruble</option>
70
+ <option value="TRY">🇹🇷 TRY - Turkish Lira</option>
71
+ <option value="CAD">🇨🇦 CAD - Canadian Dollar</option>
72
+ <option value="BRL">🇧🇷 BRL - Brazilian Real</option>
73
+ <option value="ARS">🇦🇷 ARS - Argentine Peso</option>
74
+ <option value="ZAR">🇿🇦 ZAR - South African Rand</option>
75
+ <option value="JPY">🇯🇵 JPY - Japanese Yen</option>
76
+ <option value="CNY">🇨🇳 CNY - Chinese Yuan</option>
77
+ <option value="KRW">🇰🇷 KRW - South Korean Won</option>
78
+ <option value="KPW">🇰🇵 KPW - North Korean Won</option>
79
+ <option value="HKD">🇭🇰 HKD - Hong Kong Dollar</option>
80
  </select>
81
+
82
+ <button id="convert-btn" onclick="convertCurrency()">Convert</button>
83
  <p id="result"></p>
84
  </div>
85
+ </div>
86
 
87
+ <div class="steps">
88
+ <h2>How to Use</h2>
89
+ <div class="step-box">
90
+ <h3>1. Enter the Amount</h3>
91
+ <p>Simply type the amount you want to convert in the input box.</p>
 
 
 
 
92
  </div>
93
+ <div class="step-box">
94
+ <h3>2. Select Your Currencies</h3>
95
+ <p>Click the dropdown menu to choose USD as the currency you want to convert from, and EUR as the currency you want to convert to.</p>
96
+ </div>
97
+ <div class="step-box">
98
+ <h3>3. That's It</h3>
99
+ <p>Our currency converter will show you the current exchange rate and how it has changed over time.</p>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="footer">
104
+ <p>About Us | Social Media | Copyright © 2025</p>
105
+ </div>
106
 
107
  <script src="script.js"></script>
108
  </body>