File size: 3,379 Bytes
9ff76f0 9fbd00f 11f1f21 9ff76f0 b9bed04 11f1f21 b9bed04 11f1f21 92b055b b9bed04 11f1f21 0ad5a52 11f1f21 d2bfa26 b9bed04 11f1f21 0ad5a52 b9bed04 cc94bf7 11f1f21 b9bed04 cc94bf7 24d4c2a b9bed04 467b80e b9bed04 3fd5464 3fd8eba 3fd5464 11f1f21 b9bed04 3fd8eba 11f1f21 b9bed04 3fd5464 3fd8eba 3fd5464 467b80e b9bed04 3fd8eba 11f1f21 9fbd00f 11f1f21 d53e7dd b9bed04 11f1f21 b9bed04 f9b2c5e b9bed04 f9b2c5e 11f1f21 b9bed04 f9b2c5e 11f1f21 b9bed04 fcd7628 d2bfa26 11f1f21 d2bfa26 b9bed04 11f1f21 b9bed04 24d4c2a 11f1f21 b9bed04 11f1f21 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 96 97 98 |
<!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="style.css">
</head>
<body>
<!-- Navbar -->
<header>
<nav class="navbar">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="Logo" />
</a>
</div>
</nav>
</header>
<!-- Headline -->
<section class="headline">
<h1>Currency Converter</h1>
<p>Convert your money between different currencies easily.</p>
</section>
<!-- Content Section -->
<section 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" min="0">
</div>
<!-- Currency Selection -->
<div class="currency-select">
<!-- From Currency -->
<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>
<!-- Swap Button -->
<button id="swap-btn" onclick="swapCurrencies()">⇅</button>
<!-- To Currency -->
<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>
<p id="result"></p>
</div>
</section>
<!-- How to Use Section -->
<section class="how-to-use">
<h2>How to Use</h2>
<div class="steps">
<div class="step">
<h3>1. Enter the Amount</h3>
<p>Simply type in the amount you want to convert in the input box.</p>
</div>
<div class="step">
<h3>2. Select Your Currencies</h3>
<p>Click the dropdown menu to select the currency you want to convert from and to.</p>
</div>
<div class="step">
<h3>3. That's It</h3>
<p>Our currency converter will show the exchange rate and calculate the result for you.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<p><a href="#about">About</a></p>
<p>Social Media: <a href="#">Facebook</a> | <a href="#">Instagram</a> | <a href="#">Twitter</a></p>
<p>Copyright © 2025</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html> |