index.html 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="shortcut icon" href="https://favicon-generator.org/favicon-generator/htdocs/favicons/2015-01-28/7279ebe8ba6a76623019cc424f6c3ff6.ico" type="image/x-icon">
  8. <title>JavaScript DOM</title>
  9. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  10. </head>
  11. <body>
  12. <div class="container h-100">
  13. <div class="row h-100 w-50 mx-auto border border-dark rounded p-3 mt-5 justify-content-center">
  14. <h1 class="text-center">Online currency converter</h1>
  15. <hr>
  16. <div class="w-50">
  17. <label for="firstSelect" class="form-label">Select the currency to convert with</label>
  18. <input class="form-control" list="firstSelect" placeholder="Search a currency" id="firstCurrency">
  19. <datalist id="firstSelect">
  20. </datalist>
  21. <div class="input-group mt-3">
  22. <input class="form-control" type="number" value="1" required min="0" placeholder="Enter the number of convertible currency" id="firstInput" autofocus>
  23. </div>
  24. <div class="mt-3">
  25. <label for="firstSelect" class="form-label">Select the currency to convert to</label>
  26. <input class="form-control" list="firstSelect" placeholder="Search a currency" id="secondCurrency">
  27. <datalist id="firstSelect">
  28. </datalist>
  29. <div class="input-group mt-3">
  30. <input class="form-control" type="number" id="secondInput" disabled>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. <script src="index.js"></script>
  36. </body>
  37. </html>