MoneyTacks/inflation.html at main · shivanircodel/MoneyTacks · 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
<!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="icon" href="moneytacks.png">
    <title>Price Inflation Calculator</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link href="style.css" rel="stylesheet" />
  </head>

  <h1>Calculating Your Inflation</h1>
    <h5 class="fw-bold" style="color:#04604F;">Understand the buying power of the dollar over time.</h5>

  <body>
    <body style = "background-image: url('')">
    <div class="container" style="margin: top 10px;">
    <section class="price-selection">
      <p class="fw-normal" style="color:white;">Cost of Item</p>
      <input id="price" type="number" class="btn btn-dark" placeholder="Item Price ($)">
    </section>
    <hr>

    <section class="years-selection">
      <p class="fw-normal" style="color:white;">Time Duration</p>
      <input id="years" type="number" class="btn btn-dark" placeholder="Number of years">
    </section>
    <hr>

    <section class ="inflation_selection">
      <p class="fw-normal" style="color:white;">Annual Inflation Rate</p>
      <span>1%</span>
      <input id="inflation_rate" type="range" value = "3" min = "1" max = "5" placeholder="Inflation Rate (percent)">
      <span>5%</span>
    </section>
    <hr>

    <section class="submission">
      <button class="btn btn-dark" onclick="returnText()">Submit</button>
    </section>


    <script src="inflation.js"></script>
  </div>
  </body>

</html>