Spaces:
Running
Running
File size: 3,578 Bytes
9ff76f0 d53e7dd 80f3229 9ff76f0 80f3229 8ad3b06 80f3229 af437bf 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 8ad3b06 80f3229 d53e7dd 80f3229 d53e7dd 80f3229 8ad3b06 80f3229 d53e7dd 80f3229 af437bf d53e7dd 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 99 100 101 102 103 104 |
<!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">
</head>
<body>
<!-- Navbar -->
<header id="navbar">
<div class="container">
<h1>Currency Converter</h1>
<p>Welcome to the Currency Converter!</p>
</div>
</header>
<!-- Headline and Explanation -->
<section id="headline">
<div class="container">
<h2>Convert Your Currencies</h2>
<p>Enter the amount and select currencies to convert. Get the current exchange rate instantly!</p>
</div>
</section>
<!-- Currency Converter Section -->
<section id="converter">
<div class="container">
<div class="currency-container">
<!-- Amount Input -->
<div class="currency-input">
<label for="amount">Amount</label>
<input type="number" id="amount" placeholder="Enter amount">
</div>
<!-- From Currency -->
<div class="currency-input">
<label for="from-currency">From Currency</label>
<select id="from-currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<!-- Add more currencies here -->
</select>
</div>
<!-- To Currency -->
<div class="currency-input">
<label for="to-currency">To Currency</label>
<select id="to-currency">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<!-- Add more currencies here -->
</select>
</div>
<!-- Swap Button -->
<button id="swap-btn" onclick="swapCurrencies()">↔️</button>
<!-- Convert Button -->
<button id="convert-btn" onclick="convertCurrency()">Convert</button>
<!-- Conversion Result -->
<div id="result"></div>
</div>
</div>
</section>
<!-- Step-by-step Guide -->
<section id="how-to">
<div class="container">
<h3>How to Convert</h3>
<div class="steps">
<div class="step">
<h4>Step 1</h4>
<div class="step-box">
<p>Enter the amount you want to convert in the input field.</p>
</div>
</div>
<div class="step">
<h4>Step 2</h4>
<div class="step-box">
<p>Select the currencies you want to convert from and to.</p>
</div>
</div>
<div class="step">
<h4>Step 3</h4>
<div class="step-box">
<p>Click "Convert" to see the exchange rate and converted amount.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<p>About | <a href="#">Social Media</a> | © 2025 Currency Converter</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html> |