java/lesson10_calc.html at master · avtohem/java · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Getting Started wiht JAVA Script</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
    body, .jumbotron {padding:30px;}
    .text-gaint {font-size: 40px;}
    </style>

  </head>

  <body>

  <div class="jumbotron">

    <h2>How mutch do pies cost?</h2>

    <form>

      <div class="form-group">

        <label for="price"> Price </label>
        <input type="text" class="form-control" id="" placeholder=""
        name = 'price' value ="30">
        <p class="help-block">Help text here.</p>

      </div>
      <div class="form-group">
        <label for="quantity">Quantity

          <span class='label label-danger quantity-label'> 1 </span>

        </label>
        <input type="range" class="form-control" id="" placeholder=""
        name = 'quantity' value = "1"
        min = '1' max = '15'>

      </div>

    </form>

    <div class = "text-right text-gaint cost">

    </div>

  </div>
    <script>
    // grab everething we undefined
    const priceInput = document.querySelector('[name=price]');
    const quantityInput = document.querySelector('[name=quantity]');
    const total = document.querySelector('.cost');
    const quantityLabelValue = document.querySelector('.quantity-label');


    //create the function that we'll need
    function calculatePieCost() {

      const price = priceInput.value;
      const quantity = quantityInput.value;
      const totalm = price * quantity;
      console.log(totalm);
      total.innerText = '$' + totalm.toFixed(2);
      quantityLabelValue.innerText = quantity;

    }

    //on first run

    calculatePieCost();
    //add our evetn listeners

    priceInput.addEventListener('input', calculatePieCost);
    quantityInput.addEventListener('input', calculatePieCost);

    </script>


  </body>
</html>