Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter
Running

App Files Community
GarGerry commited on
Commit
80f3229
·
verified ·
1 Parent(s): d26d78d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +67 -41
index.html CHANGED
@@ -4,74 +4,100 @@
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
- <div class="container">
11
- <!-- Navbar -->
12
- <header class="navbar">
13
- <div class="logo">
14
- <img src="logo.png" alt="Logo">
15
- </div>
16
- <p class="welcome-text">Welcome to Currency Converter</p>
17
- </header>
18
-
19
- <!-- Headline and Explanation -->
20
- <section class="headline">
21
  <h1>Currency Converter</h1>
22
- <p>Convert your money into different currencies with ease. Get the most accurate rates!</p>
23
- </section>
 
 
 
 
 
 
 
 
 
24
 
25
- <!-- Currency Converter Section -->
26
- <section class="converter-content">
 
27
  <div class="currency-container">
 
28
  <div class="currency-input">
29
  <label for="amount">Amount</label>
30
  <input type="number" id="amount" placeholder="Enter amount">
31
  </div>
32
-
 
33
  <div class="currency-input">
34
- <label for="from-currency">From</label>
35
  <select id="from-currency">
36
  <option value="USD">USD</option>
37
  <option value="EUR">EUR</option>
38
- <option value="GBP">GBP</option>
39
  </select>
40
  </div>
41
-
42
- <button id="swap-btn" onclick="swapCurrencies()">↕</button>
43
-
44
  <div class="currency-input">
45
- <label for="to-currency">To</label>
46
  <select id="to-currency">
47
  <option value="EUR">EUR</option>
48
  <option value="USD">USD</option>
49
- <option value="GBP">GBP</option>
50
  </select>
51
  </div>
52
 
 
 
 
 
53
  <button id="convert-btn" onclick="convertCurrency()">Convert</button>
54
- <p id="result"></p>
 
 
55
  </div>
56
- </section>
 
57
 
58
- <!-- Instructions for Using Converter -->
59
- <section class="instructions">
60
- <div class="instructions-box">
61
- <h2>How to Use the Converter</h2>
62
- <p>1. Enter the amount you want to convert.</p>
63
- <p>2. Select the currency you want to convert from and to.</p>
64
- <p>3. Press the 'Convert' button or use the 'Swap' button to reverse currencies.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  </div>
66
- </section>
 
67
 
68
- <!-- Footer -->
69
- <footer class="footer">
70
- <p><strong>About:</strong> Currency Converter App</p>
71
- <p><strong>Follow us:</strong> <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
72
- <p>&copy; 2025 Currency Converter App. All rights reserved.</p>
73
- </footer>
74
- </div>
75
 
76
  <script src="script.js"></script>
77
  </body>
 
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
+ <header id="navbar">
12
+ <div class="container">
 
 
 
 
 
 
 
 
13
  <h1>Currency Converter</h1>
14
+ <p>Welcome to the Currency Converter!</p>
15
+ </div>
16
+ </header>
17
+
18
+ <!-- Headline and Explanation -->
19
+ <section id="headline">
20
+ <div class="container">
21
+ <h2>Convert Your Currencies</h2>
22
+ <p>Enter the amount and select currencies to convert. Get the current exchange rate instantly!</p>
23
+ </div>
24
+ </section>
25
 
26
+ <!-- Currency Converter Section -->
27
+ <section id="converter">
28
+ <div class="container">
29
  <div class="currency-container">
30
+ <!-- Amount Input -->
31
  <div class="currency-input">
32
  <label for="amount">Amount</label>
33
  <input type="number" id="amount" placeholder="Enter amount">
34
  </div>
35
+
36
+ <!-- From Currency -->
37
  <div class="currency-input">
38
+ <label for="from-currency">From Currency</label>
39
  <select id="from-currency">
40
  <option value="USD">USD</option>
41
  <option value="EUR">EUR</option>
42
+ <!-- Add more currencies here -->
43
  </select>
44
  </div>
45
+
46
+ <!-- To Currency -->
 
47
  <div class="currency-input">
48
+ <label for="to-currency">To Currency</label>
49
  <select id="to-currency">
50
  <option value="EUR">EUR</option>
51
  <option value="USD">USD</option>
52
+ <!-- Add more currencies here -->
53
  </select>
54
  </div>
55
 
56
+ <!-- Swap Button -->
57
+ <button id="swap-btn" onclick="swapCurrencies()">↔️</button>
58
+
59
+ <!-- Convert Button -->
60
  <button id="convert-btn" onclick="convertCurrency()">Convert</button>
61
+
62
+ <!-- Conversion Result -->
63
+ <div id="result"></div>
64
  </div>
65
+ </div>
66
+ </section>
67
 
68
+ <!-- Step-by-step Guide -->
69
+ <section id="how-to">
70
+ <div class="container">
71
+ <h3>How to Convert</h3>
72
+ <div class="steps">
73
+ <div class="step">
74
+ <h4>Step 1</h4>
75
+ <div class="step-box">
76
+ <p>Enter the amount you want to convert in the input field.</p>
77
+ </div>
78
+ </div>
79
+ <div class="step">
80
+ <h4>Step 2</h4>
81
+ <div class="step-box">
82
+ <p>Select the currencies you want to convert from and to.</p>
83
+ </div>
84
+ </div>
85
+ <div class="step">
86
+ <h4>Step 3</h4>
87
+ <div class="step-box">
88
+ <p>Click "Convert" to see the exchange rate and converted amount.</p>
89
+ </div>
90
+ </div>
91
  </div>
92
+ </div>
93
+ </section>
94
 
95
+ <!-- Footer -->
96
+ <footer>
97
+ <div class="container">
98
+ <p>About | <a href="#">Social Media</a> | &copy; 2025 Currency Converter</p>
99
+ </div>
100
+ </footer>
 
101
 
102
  <script src="script.js"></script>
103
  </body>