|
|
<!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> |
|
|
|
|
|
<header class="navbar"> |
|
|
<div class="logo">Currency Converter</div> |
|
|
</header> |
|
|
|
|
|
<section class="headline"> |
|
|
<h1>Welcome to the Currency Converter</h1> |
|
|
<p>Convert your currencies easily and instantly!</p> |
|
|
</section> |
|
|
|
|
|
<section class="converter"> |
|
|
<h2>Currency Converter</h2> |
|
|
<input type="number" id="amount" placeholder="Enter Amount" class="amount-input" /> |
|
|
<div class="currency-container"> |
|
|
<select id="from-currency" class="currency-select"> |
|
|
<option value="USD">USD - United States Dollar</option> |
|
|
<option value="EUR">EUR - Euro</option> |
|
|
|
|
|
</select> |
|
|
|
|
|
<button id="swap-btn" onclick="swapCurrencies()">Swap</button> |
|
|
|
|
|
<select id="to-currency" class="currency-select"> |
|
|
<option value="EUR">EUR - Euro</option> |
|
|
<option value="USD">USD - United States Dollar</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<button id="convert-btn">Convert</button> |
|
|
|
|
|
<div id="result"></div> |
|
|
</section> |
|
|
|
|
|
<section class="how-to-use"> |
|
|
<h3>How to Convert</h3> |
|
|
<div class="steps"> |
|
|
<div class="step"> |
|
|
<strong>1. Enter the Amount</strong> |
|
|
<p>Simply type the amount you want to convert in the input box.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<strong>2. Select Your Currencies</strong> |
|
|
<p>Choose USD in the first option and EUR in the second option.</p> |
|
|
</div> |
|
|
<div class="step"> |
|
|
<strong>3. That's It</strong> |
|
|
<p>Your conversion result will be displayed.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer class="footer"> |
|
|
<p>© 2025 Currency Converter. All Rights Reserved.</p> |
|
|
</footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
