Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
755d667
·
verified ·
1 Parent(s): fb4f133

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +47 -45
index.html CHANGED
@@ -4,83 +4,85 @@
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">
62
- <h3>1. Enter the Amount</h3>
63
- <p>Simply type the amount you want to convert in the input box.</p>
64
  </div>
65
  <div class="step">
66
- <h3>2. Select Your Currencies</h3>
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
  </head>
9
  <body>
 
 
 
 
 
 
 
10
 
11
+ <!-- Navbar -->
12
+ <div class="navbar">
13
+ <div class="logo">
14
+ <img src="logo.png" alt="Logo">
15
+ </div>
16
+ </div>
17
+
18
+ <!-- Headline -->
19
+ <div class="headline">
20
  <h1>Currency Converter</h1>
21
+ <p>Convert currencies with real-time exchange rates.</p>
22
+ </div>
23
 
24
+ <!-- Converter Container -->
25
+ <div class="content">
26
  <div class="converter-container">
 
27
  <div class="currency-box">
28
+ <label for="amount">Amount</label>
29
  <input type="number" id="amount" placeholder="Enter amount">
30
  </div>
31
+
32
  <div class="currency-select">
33
  <div class="currency-group">
34
+ <label for="from-currency">From Currency</label>
35
  <select id="from-currency">
36
+ <option value="USD">USD</option>
37
+ <option value="EUR">EUR</option>
38
+ <!-- Add more options as needed -->
39
  </select>
40
  </div>
41
+
42
+ <button id="swap-btn">
43
+ <i class="fa fa-exchange"></i>
44
+ </button>
45
+
46
  <div class="currency-group">
47
+ <label for="to-currency">To Currency</label>
48
  <select id="to-currency">
49
+ <option value="EUR">EUR</option>
50
+ <option value="USD">USD</option>
51
+ <!-- Add more options as needed -->
52
  </select>
53
  </div>
54
  </div>
55
 
56
  <button id="convert-btn">Convert</button>
57
+
58
+ <div id="result"></div>
59
  </div>
60
+ </div>
61
 
62
+ <!-- How to Use Section -->
63
+ <div class="how-to-use">
64
+ <h2>How to Use</h2>
65
  <div class="steps">
66
  <div class="step">
67
+ <h3>Step 1</h3>
68
+ <p>Enter the Amount</p>
69
  </div>
70
  <div class="step">
71
+ <h3>Step 2</h3>
72
+ <p>Select Your Currencies</p>
73
  </div>
74
  <div class="step">
75
+ <h3>Step 3</h3>
76
+ <p>Click Convert</p>
77
  </div>
78
  </div>
79
+ </div>
80
 
81
+ <!-- Footer -->
82
+ <div class="footer">
83
+ <p>About | Social Media | Copyright</p>
84
+ </div>
 
 
 
85
 
86
+ <script src="https://kit.fontawesome.com/a076d05399.js"></script>
87
  </body>
88
  </html>