Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
9fbd00f
·
verified ·
1 Parent(s): 138f2f5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +60 -53
index.html CHANGED
@@ -1,64 +1,71 @@
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>
 
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
+ <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>
71
  </html>