Spaces:
Running
Running
Update index.html
Browse files- 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
|
23 |
</div>
|
24 |
|
25 |
-
<!--
|
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 |
-
|
34 |
-
<
|
35 |
-
<
|
36 |
-
<
|
37 |
-
|
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 |
-
|
56 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
57 |
<div id="result"></div>
|
58 |
</div>
|
59 |
</div>
|
60 |
|
61 |
-
<!-- How to Use
|
62 |
<div class="how-to-use">
|
63 |
<h2>How to Convert</h2>
|
64 |
<div class="steps">
|
65 |
<div class="step">
|
66 |
-
<h3>1
|
67 |
-
<p>
|
68 |
</div>
|
69 |
<div class="step">
|
70 |
-
<h3>2
|
71 |
-
<p>
|
72 |
</div>
|
73 |
<div class="step">
|
74 |
-
<h3>3
|
75 |
-
<p>Click
|
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 |
|