index.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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="stylesheet" href="./style.css">
  8. <title>JS_hw1</title>
  9. </head>
  10. <body>
  11. <header>Metric_AtE</header>
  12. <div class="container">
  13. <div class="reader">
  14. <div class="reader__wrapper">
  15. <div id="goleft">&lArr;</div>
  16. <article>
  17. <h2>Pound(lb.)</h2>
  18. <p>
  19. The pound or pound-mass is a unit of mass used in British imperial and United States customary systems of measurement. Various definitions have been used; the most common today is the international avoirdupois pound, which is legally defined as exactly 0.45359237 kilograms, and which is divided into 16 avoirdupois ounces. The international standard symbol for the avoirdupois pound is lb; an alternative symbol is lbm (for most pound definitions), # (chiefly in the U.S.), and ℔ or ″̶ (specifically for the apothecaries' pound).
  20. The unit is descended from the Roman libra (hence the abbreviation "lb"). The English word pound is cognate with, among others, German Pfund, Dutch pond, and Swedish pund. These units are historic and are no longer used formally (replaced by the metric system), though informal use of the term to mean 500 grams is still heard across Europe and beyond.
  21. Usage of the unqualified term pound reflects the historical conflation of mass and weight. This accounts for the modern distinguishing terms pound-mass and pound-force.
  22. </p>
  23. <p><strong style="color: black; background-color: gold;">Tip:</strong> to get approximate result multiply 'width' value to 1,609</p>
  24. </article>
  25. <div id="goright">&rArr;</div>
  26. </div>
  27. </div>
  28. <div class="pound">
  29. <label for="#pnd">Lb.</label>
  30. <br>
  31. <input id="pnd" class="from" type="number">
  32. <!-- <small>Invalid value given</small> -->
  33. </div>
  34. <div class="arrs">&LeftArrowRightArrow;</div>
  35. <div class="kilo">
  36. <label for="#kg">Kg.</label>
  37. <br>
  38. <input id="kg" class="to" type="number">
  39. </div>
  40. <div class="miles">
  41. <label for="#mil">Mi.</label>
  42. <br>
  43. <input id="mil" class="from" type="number">
  44. </div>
  45. <div class="arrs">&LeftArrowRightArrow;</div>
  46. <div class="kilometers">
  47. <label for="#km">Km.</label>
  48. <br>
  49. <input id="km" class="to" type="number">
  50. </div>
  51. <div class="inches">
  52. <label for="#inch">Inch(")</label>
  53. <br>
  54. <input id="inch" class="from" type="number">
  55. </div>
  56. <div class="arrs">&LeftArrowRightArrow;</div>
  57. <div class="cmeters">
  58. <label for="cm">Cm.</label>
  59. <br>
  60. <input id="cm" class="to" type="number">
  61. </div>
  62. <script src="./script.js"></script>
  63. </div>
  64. </body>
  65. </html>