Hugging Face's logo

Spaces:
GarGerry
/
CurrencyConverter5
Running

App Files Community
GarGerry commited on
Commit
1e8c788
·
verified ·
1 Parent(s): bf73753

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +26 -39
index.html CHANGED
@@ -5,10 +5,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
- <script src="https://kit.fontawesome.com/a076d05399.js"></script>
9
  </head>
10
  <body>
11
-
12
  <!-- Navbar -->
13
  <div class="navbar">
14
  <div class="logo">
@@ -19,60 +17,51 @@
19
  <!-- Headline -->
20
  <div class="headline">
21
  <h1>Currency Converter</h1>
22
- <p>Convert currencies quickly and easily.</p>
23
  </div>
24
 
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>
36
- <select id="from-currency">
37
- <option value="USD">USD</option>
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">
49
- <option value="EUR">EUR</option>
50
- <option value="USD">USD</option>
51
- </select>
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>
@@ -80,9 +69,7 @@
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
 
 
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
  <div class="navbar">
12
  <div class="logo">
 
17
  <!-- Headline -->
18
  <div class="headline">
19
  <h1>Currency Converter</h1>
20
+ <p>Convert currencies easily and quickly</p>
21
  </div>
22
 
23
+ <!-- Content Converter -->
24
  <div class="content">
25
  <div class="converter-container">
26
  <div class="currency-box">
27
  <label for="amount">Amount</label>
28
+ <input type="number" id="amount" placeholder="Enter amount">
29
  </div>
30
+ <div class="currency-group">
31
+ <label for="from">From</label>
32
+ <select id="from">
33
+ <option value="USD">USD</option>
34
+ <option value="EUR">EUR</option>
35
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  </div>
37
+ <div class="currency-group">
38
+ <label for="to">To</label>
39
+ <select id="to">
40
+ <option value="EUR">EUR</option>
41
+ <option value="USD">USD</option>
42
+ </select>
43
+ </div>
44
+ <button id="swap-btn">Swap</button>
45
+ <button id="convert-btn">Convert</button>
46
  <div id="result"></div>
47
  </div>
48
  </div>
49
 
50
+ <!-- How to Use -->
51
  <div class="how-to-use">
52
  <h2>How to Convert</h2>
53
  <div class="steps">
54
  <div class="step">
55
+ <h3>Step 1</h3>
56
+ <p>Enter the amount you want to convert.</p>
57
  </div>
58
  <div class="step">
59
+ <h3>Step 2</h3>
60
+ <p>Select your currencies.</p>
61
  </div>
62
  <div class="step">
63
+ <h3>Step 3</h3>
64
+ <p>Click Convert and get your result.</p>
65
  </div>
66
  </div>
67
  </div>
 
69
  <!-- Footer -->
70
  <div class="footer">
71
  <div class="footer-content">
72
+ <p>About Us | Social Media | Copyright</p>
 
 
73
  </div>
74
  </div>
75