Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverterBaru
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +45 -47
index.html CHANGED
@@ -4,85 +4,83 @@
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>
 
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>