Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
2084031
·
verified ·
1 Parent(s): 8b72495

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +53 -68
index.html CHANGED
@@ -1,79 +1,64 @@
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
- <nav class="navbar">
12
- <div class="navbar-content">
13
- <img src="logo.png" alt="Logo" class="logo">
14
- <p class="welcome-text">Welcome to Currency Converter</p>
15
- </div>
16
- </nav>
17
 
18
- <!-- Headline and Explanation -->
19
- <section class="headline-section">
20
- <h1 class="headline">Currency Converter</h1>
21
- <p class="explanation">Easily convert between different currencies using the latest exchange rates.</p>
22
- </section>
23
 
24
- <!-- Currency Converter Form -->
25
- <section class="converter-container">
26
- <div class="currency-container">
27
- <div class="currency-input">
28
- <label for="amount">Amount:</label>
29
- <input type="number" id="amount" placeholder="Enter amount">
30
- </div>
31
- <div class="currency-input">
32
- <label for="from-currency">From:</label>
33
- <select id="from-currency">
34
- <option value="USD">USD</option>
35
- <option value="EUR">EUR</option>
36
- <option value="IDR">IDR</option>
37
- </select>
38
- </div>
39
- <div class="currency-input">
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="IDR">IDR</option>
45
- </select>
46
- </div>
47
- <button id="swap-btn" onclick="swapCurrencies()">🔄</button>
48
- <button id="convert-btn" onclick="convertCurrency()">Convert</button>
49
- </div>
50
- <div id="result"></div>
51
- </section>
52
 
53
- <!-- Steps to use Converter -->
54
- <section class="steps-container">
55
- <h2>How to Convert</h2>
56
- <div class="steps">
57
- <div class="step">
58
- <h3>1. Enter Amount</h3>
59
- <p>Simply type the amount you want to convert into the amount box.</p>
60
- </div>
61
- <div class="step">
62
- <h3>2. Select Your Currency</h3>
63
- <p>Select the currency you are converting from and to from the dropdown menus.</p>
64
- </div>
65
- <div class="step">
66
- <h3>3. That's It!</h3>
67
- <p>The exchange rate will be calculated and displayed instantly.</p>
68
- </div>
69
- </div>
70
- </section>
71
 
72
- <!-- Footer -->
73
- <footer>
74
- <p>&copy; 2025 Currency Converter. All Rights Reserved.</p>
75
- </footer>
76
-
77
- <script src="script.js"></script>
78
  </body>
79
  </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
+ <!-- Navbar -->
11
+ <nav class="navbar">
12
+ <div class="container">
13
+ <span class="brand-logo">BrandLogo</span>
14
+ <span class="welcome-message">Welcome to the Currency Converter</span>
15
+ </div>
16
+ </nav>
17
 
18
+ <!-- Headline and Explanation -->
19
+ <header class="headline">
20
+ <h1>Currency Converter</h1>
21
+ <p>Easily convert currencies in a matter of seconds.</p>
22
+ </header>
23
 
24
+ <!-- Converter Section -->
25
+ <section class="converter-section">
26
+ <div class="converter-box">
27
+ <input type="number" id="amount" placeholder="Enter amount">
28
+ <select id="from-currency">
29
+ <option value="USD">USD</option>
30
+ <option value="EUR">EUR</option>
31
+ </select>
32
+ <select id="to-currency">
33
+ <option value="EUR">EUR</option>
34
+ <option value="USD">USD</option>
35
+ </select>
36
+ <button id="swap-btn">Swap</button>
37
+ <button id="convert-btn">Convert</button>
38
+ <div id="result">Result will be displayed here</div>
39
+ </div>
40
+ </section>
 
 
 
 
 
 
 
 
 
 
 
41
 
42
+ <!-- How to Use -->
43
+ <section class="how-to-use">
44
+ <h2>How to Use the Converter</h2>
45
+ <div class="step-box">
46
+ <h3>1</h3>
47
+ <p>Enter the amount you want to convert.</p>
48
+ </div>
49
+ <div class="step-box">
50
+ <h3>2</h3>
51
+ <p>Select the currencies to convert from and to.</p>
52
+ </div>
53
+ <div class="step-box">
54
+ <h3>3</h3>
55
+ <p>See the result instantly.</p>
56
+ </div>
57
+ </section>
 
 
58
 
59
+ <!-- Footer -->
60
+ <footer class="footer">
61
+ <p>About | Social Media | © 2025 Your Website</p>
62
+ </footer>
 
 
63
  </body>
64
  </html>