dzcode.talk/JAVASCRIPT/learning/javascript-traversey/weight-converter.html at master · zed-dz/dzcode.talk · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">

  <title>weight converter</title>
  <style>
  </style>
</head>

<body class="mt-5" style="background-color: #333; color: #fff">

  <div class="container">

    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h1 class="display-4 text-center mb-2">Weight Converter</h1>
        <form>
          <div class="form-group">
            <input type="number" class="form-control form-control-lg" id="lbsInput" placeholder="Enter Pounds...">
          </div>
        </form>
        <div id="output">
          <div class="card bg-primary mb-2">
            <div class="card-block">
              <h2>Grams:</h2>
              <div id="gramsOutput"></div>
            </div>
          </div>
          <div class="card bg-success mb-2">
            <div class="card-block">
              <h2>Kilogrames:</h2>
              <div id="kgOutput"></div>
            </div>
          </div>
          <div class="card bg-danger mb-2">
            <div class="card-block">
              <h2>Ounces:</h2>
              <div id="ozOutput"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <script>
    document.getElementById('output').style.visibility = 'hidden';
    document.getElementById('lbsInput').addEventListener('input', e => {

      document.getElementById('output').style.visibility = 'visible';

      let lbs = e.target.value;
      document.getElementById('gramsOutput').innerHTML = lbs / 0.0022046;
      document.getElementById('kgOutput').innerHTML = lbs / 2.2046;
      document.getElementById('ozOutput').innerHTML = lbs * 16;
    });
  </script>

</body>

</html>