Spaces:
Running
Running
File size: 3,177 Bytes
9ff76f0 9fbd00f 92b055b 9ff76f0 010b678 92b055b 0ad5a52 92b055b d2bfa26 92b055b 0ad5a52 764bf7b cc94bf7 92b055b cc94bf7 92b055b 764bf7b cc94bf7 7a96c2c 92b055b 7a96c2c 92b055b 7a96c2c 92b055b 7a96c2c 92b055b 7a96c2c 92b055b 7a96c2c cc94bf7 d54a9be 764bf7b 92b055b 764bf7b 92b055b 9fbd00f 92b055b d53e7dd 92b055b 0ad5a52 fcd7628 0ad5a52 fcd7628 0ad5a52 fcd7628 92b055b fcd7628 d2bfa26 92b055b d2bfa26 92b055b 0ad5a52 92b055b 0ad5a52 92b055b d53e7dd 92b055b 9ff76f0 4ed7334 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script> <!-- For swap icon -->
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="logo">
<img src="logo.png" alt="Logo"> <!-- Add your logo here -->
</div>
</div>
<!-- Headline -->
<div class="headline">
<h1>Currency Converter</h1>
<p>Convert currencies quickly and easily.</p>
</div>
<!-- Main Content -->
<div class="content">
<div class="converter-container">
<!-- Amount input -->
<div class="currency-box">
<label for="amount">Amount</label>
<input type="number" id="amount" placeholder="Enter amount" />
</div>
<!-- Currency selection and swap button -->
<div class="currency-select">
<div class="currency-group">
<label for="from-currency">From</label>
<select id="from-currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<!-- Add other currencies here -->
</select>
</div>
<div class="swap-btn" id="swap-btn" onclick="swapCurrencies()">
<i class="fas fa-exchange-alt"></i> <!-- Swap icon -->
</div>
<div class="currency-group">
<label for="to-currency">To</label>
<select id="to-currency">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<!-- Add other currencies here -->
</select>
</div>
</div>
<!-- Convert button -->
<button id="convert-btn" onclick="convertCurrency()">Convert</button>
<!-- Result display -->
<div id="result"></div>
</div>
</div>
<!-- How to Use Section -->
<div class="how-to-use">
<h2>How to Convert</h2>
<div class="steps">
<div class="step">
<h3>1. Enter the Amount</h3>
<p>Simply type the amount you want to convert in the input box.</p>
</div>
<div class="step">
<h3>2. Select Your Currencies</h3>
<p>Choose the currency you want to convert from and to.</p>
</div>
<div class="step">
<h3>3. Hit Convert</h3>
<p>Click the convert button to see the result.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-content">
<p>About</p>
<p>Social Media</p>
<p>Copyright © 2025</p>
</div>
</div>
<script src="script.js"></script> <!-- JavaScript -->
</body>
</html> |