WP-Calc/index.html at main · WebDevSwe/WP-Calc · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>WP-Calc - calculates the number of wallpaper rolls you need</title>
  <meta name="description" content="Simple web-based program that calculates the number of wallpaper rolls you need">
  <meta name="author" content="WebDevSwe">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css">

</head>

<body>
    <main>
        <h1>Wp-Calc</h1>
        <p>Enter your details to make a calculation. Press the button to make your calculation and press again, to make a new calculation. Each calculation is unique and sometimes the calculation is a little more or less optimized.</p>

        <div class="wpc-form">
            <fieldset>
                <legend>The wallpaper</legend>
                <div class="wpc-form-input">
                    <label for="wallpaper-length">Wallpaper length</label>
                    <input class="wpc-input-value" type="text" id="wallpaper-length" name="wallpaper-length" value="1005">cm
                </div>
                <div class="wpc-form-input">
                    <label for="pattern-length">Pattern length</label>
                    <input class="wpc-input-value" type="text" id="pattern-length" name="pattern-length" value="20">pcs
                </div>
            </fieldset>

            <fieldset>
                <legend>Wallpaper wet needed</legend>
                <div class="wpc-form-input">
                    <label for="wallpaper-wet-1">Wallpaper wet 1</label>
                    <input class="wpc-input-value" type="text" id="wallpaper-wet-1" name="wallpaper-wet-1" value="230">cm
                    <label for="wallpaper-wet-1_quantity">Quantity</label>
                    <input class="wpc-input-quantity" type="text" id="wallpaper-wet-1_quantity" name="wallpaper-wet-1_quantity" value="24">pcs
                </div>
                <div class="wpc-form-input">
                    <label for="wallpaper-wet-2">Wallpaper wet 2</label>
                    <input class="wpc-input-value" type="text" id="wallpaper-wet-2" name="wallpaper-wet-2" value="270">cm
                    <label for="wallpaper-wet-2_quantity">Quantity</label>
                    <input class="wpc-input-quantity" type="text" id="wallpaper-wet-2_quantity" name="wallpaper-wet-2_quantity" value="6">pcs
                </div>
                <div class="wpc-form-input"></div>
                    <label for="wallpaper-wet-3">Wallpaper wet 3</label>
                    <input class="wpc-input-value" type="text" id="wallpaper-wet-3" name="wallpaper-wet-3" value="30">cm
                    <label for="wallpaper-wet-3_quantity">Quantity</label>
                    <input class="wpc-input-quantity" type="text" id="wallpaper-wet-3_quantity" name="wallpaper-wet-3_quantity" value="7">pcs
                </div>
            </fieldset>
            <p>Press the button to calculate how many wallpaper rolls are needed</p>
            <button id="uxButtonDoCalculation" class="wpc-button" >Calculate</button>
        </div>
        <div id="uxMonitor" class="wpc-monitor"></div>
    </main>
    <div class="wpc-dev-monitor"></div>


  <script src="js/wp-calc.js"></script>
  <script src="js/tester.js"></script>
  <script src="js/view.js"></script>
</body>
</html>