Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
92b055b
·
verified ·
1 Parent(s): bf66925

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +41 -36
index.html CHANGED
@@ -4,58 +4,62 @@
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
- <header>
11
- <nav class="navbar">
12
- <div class="logo">
13
- <img src="logo.png" alt="Logo">
14
- </div>
15
- </nav>
16
- </header>
17
 
18
- <section class="headline">
 
 
 
 
 
 
 
 
19
  <h1>Currency Converter</h1>
20
- <p>Convert your money between different currencies easily.</p>
21
- </section>
22
 
23
- <section class="content">
 
24
  <div class="converter-container">
25
- <!-- Amount -->
26
  <div class="currency-box">
27
- <label for="amount">Amount:</label>
28
- <input type="number" id="amount" placeholder="Enter amount">
29
  </div>
30
- <!-- From & To Currency -->
31
  <div class="currency-select">
32
  <div class="currency-group">
33
- <label for="from-currency">From:</label>
34
  <select id="from-currency">
35
- <option value="USD">🇺🇸 USD</option>
36
- <option value="EUR">🇪🇺 EUR</option>
37
  <!-- Add other currencies here -->
38
  </select>
39
  </div>
40
-
41
- <button id="swap-btn" onclick="swapCurrencies()">⇅</button>
42
-
43
  <div class="currency-group">
44
- <label for="to-currency">To:</label>
45
  <select id="to-currency">
46
- <option value="EUR">🇪🇺 EUR</option>
47
- <option value="USD">🇺🇸 USD</option>
48
  <!-- Add other currencies here -->
49
  </select>
50
  </div>
51
  </div>
52
 
53
- <button id="convert-btn">Convert</button>
54
- <p id="result"></p>
 
55
  </div>
56
- </section>
57
 
58
- <section class="how-to-use">
 
59
  <h2>How to Convert</h2>
60
  <div class="steps">
61
  <div class="step">
@@ -67,20 +71,21 @@
67
  <p>Choose the currency you want to convert from and to.</p>
68
  </div>
69
  <div class="step">
70
- <h3>3. That's It</h3>
71
- <p>Our currency converter will show you the current exchange rate.</p>
72
  </div>
73
  </div>
74
- </section>
75
 
76
- <footer class="footer">
 
77
  <div class="footer-content">
78
  <p>About</p>
79
  <p>Social Media</p>
80
- <p>Copyright © 2022025</p>
81
  </div>
82
- </footer>
83
 
84
- <script src="script.js"></script>
85
  </body>
86
  </html>
 
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
+ <script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- For swap icon -->
9
  </head>
10
  <body>
 
 
 
 
 
 
 
11
 
12
+ <!-- Navbar -->
13
+ <div class="navbar">
14
+ <div class="logo">
15
+ <img src="logo.png" alt="Logo"> <!-- Add your logo here -->
16
+ </div>
17
+ </div>
18
+
19
+ <!-- Headline -->
20
+ <div class="headline">
21
  <h1>Currency Converter</h1>
22
+ <p>Convert currencies quickly and easily.</p>
23
+ </div>
24
 
25
+ <!-- Main Content -->
26
+ <div class="content">
27
  <div class="converter-container">
 
28
  <div class="currency-box">
29
+ <label for="amount">Amount</label>
30
+ <input type="number" id="amount" placeholder="Enter amount" />
31
  </div>
32
+
33
  <div class="currency-select">
34
  <div class="currency-group">
35
+ <label for="from-currency">From</label>
36
  <select id="from-currency">
37
+ <option value="USD">USD</option>
38
+ <option value="EUR">EUR</option>
39
  <!-- Add other currencies here -->
40
  </select>
41
  </div>
42
+ <div class="swap-btn" id="swap-btn" onclick="swapCurrencies()">
43
+ <i class="fas fa-exchange-alt"></i> <!-- Swap icon -->
44
+ </div>
45
  <div class="currency-group">
46
+ <label for="to-currency">To</label>
47
  <select id="to-currency">
48
+ <option value="EUR">EUR</option>
49
+ <option value="USD">USD</option>
50
  <!-- Add other currencies here -->
51
  </select>
52
  </div>
53
  </div>
54
 
55
+ <button id="convert-btn" onclick="convertCurrency()">Convert</button>
56
+
57
+ <div id="result"></div>
58
  </div>
59
+ </div>
60
 
61
+ <!-- How to Use Section -->
62
+ <div class="how-to-use">
63
  <h2>How to Convert</h2>
64
  <div class="steps">
65
  <div class="step">
 
71
  <p>Choose the currency you want to convert from and to.</p>
72
  </div>
73
  <div class="step">
74
+ <h3>3. Hit Convert</h3>
75
+ <p>Click the convert button to see the result.</p>
76
  </div>
77
  </div>
78
+ </div>
79
 
80
+ <!-- Footer -->
81
+ <div class="footer">
82
  <div class="footer-content">
83
  <p>About</p>
84
  <p>Social Media</p>
85
+ <p>Copyright © 2025</p>
86
  </div>
87
+ </div>
88
 
89
+ <script src="script.js"></script> <!-- JavaScript -->
90
  </body>
91
  </html>