Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
f9b2c5e
·
verified ·
1 Parent(s): aa9d6ee

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +26 -25
index.html CHANGED
@@ -5,6 +5,7 @@
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
 
@@ -24,13 +25,11 @@
24
  <!-- Main Content -->
25
  <div class="content">
26
  <div class="converter-container">
27
- <!-- Amount input -->
28
  <div class="currency-box">
29
  <label for="amount">Amount</label>
30
  <input type="number" id="amount" placeholder="Enter amount" />
31
  </div>
32
 
33
- <!-- Currency selection and swap button -->
34
  <div class="currency-select">
35
  <div class="currency-group">
36
  <label for="from-currency">From</label>
@@ -39,9 +38,11 @@
39
  <option value="EUR">EUR</option>
40
  </select>
41
  </div>
 
42
  <div class="swap-btn" id="swap-btn" onclick="swapCurrencies()">
43
  <i class="fas fa-exchange-alt"></i>
44
  </div>
 
45
  <div class="currency-group">
46
  <label for="to-currency">To</label>
47
  <select id="to-currency">
@@ -51,40 +52,40 @@
51
  </div>
52
  </div>
53
 
54
- <!-- Convert button -->
55
  <button id="convert-btn" onclick="convertCurrency()">Convert</button>
56
 
57
- <!-- Result -->
58
  <div id="result"></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">
66
- <h3>1. Enter the Amount</h3>
67
- <p>Simply type the amount you want to convert in the input box.</p>
68
- </div>
69
- <div class="step">
70
- <h3>2. Select Your Currencies</h3>
71
- <p>Choose the currencies you want to convert from and to.</p>
72
- </div>
73
- <div class="step">
74
- <h3>3. Convert!</h3>
75
- <p>Click on the Convert button and get your result instantly.</p>
76
- </div>
77
  </div>
78
  </div>
79
  </div>
80
 
81
  <!-- Footer -->
82
- <footer class="footer">
83
- <p>&copy; 2025 Your Company</p>
84
- <p>About | Social Media | Privacy</p>
85
- </footer>
 
 
 
86
 
87
  <script src="script.js"></script>
88
-
89
  </body>
90
  </html>
 
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>
9
  </head>
10
  <body>
11
 
 
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>
 
38
  <option value="EUR">EUR</option>
39
  </select>
40
  </div>
41
+
42
  <div class="swap-btn" id="swap-btn" onclick="swapCurrencies()">
43
  <i class="fas fa-exchange-alt"></i>
44
  </div>
45
+
46
  <div class="currency-group">
47
  <label for="to-currency">To</label>
48
  <select id="to-currency">
 
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">
66
+ <h3>1. Enter the Amount</h3>
67
+ <p>Simply type the amount you want to convert in the input box.</p>
68
+ </div>
69
+ <div class="step">
70
+ <h3>2. Select Your Currencies</h3>
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>
 
90
  </body>
91
  </html>