rod-cutting.github.io/index.html at main · AzizhX/rod-cutting.github.io · 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
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <title>Rod Cutting Algorithm</title>
</head>
<body>
    <h1>Rod Cutting Problem Solver</h1>

        <p>This page helps you to solve the rod cutting problem.</p>
        <p id="note"><span style="background-color: #262D43; color: white;">* Note:</span>
            type the rod prices  with a <span style="font-weight: bold;">
            single</span> space between each number.</p>
    <section>
       <table id = "table">
        <!--First Row-->
         <tr >
            <td>
                <label for="first-input">Enter the rod prices</label>
            </td>
            <td>
                <input type="text" id="first-input" placeholder="Example: 1 5 7">
            </td>
         </tr>
         <!--Second Row-->
         <tr>
            <td>
                <label for="second-input">Enter a length</label>
            </td>
            <td>
                <input type="number" id="second-input" placeholder="Ex: 3">
            </td>
         </tr>
         <!--Button Row-->
         <tr>
             <td colspan="2">
                <input type="button" id="solve-button" value="Solve" onclick="cutRodAlgorithm()"></input>
             </td>
         </tr>
        <!--Third Row-->
        <tr>
            <td>
                <label for="first-output">Optimal Revenue - r[i]</label>
            </td>
            <td>
                <input type="text" id="first-output" readonly>
            </td>
        </tr>
        <!--Fourth Row-->

        <tr>
            <td>
                <label for="second-output">First Cut - s[j]</label>
            </td>
            <td>
                <input type="text" id="second-output" readonly>
            </td>
        </tr>
        <!--Fifth Row-->
        <tr>
            <td>
                <label for="second-output">Cuts Solution</label>

            </td>
            <td>
                <input type="text" id="third-output" readonly>

            </td>
        </tr>
    </table>
    <table>
                <!--Last Row-->
                <tr>
                    <td colspan="2" style="text-align: center; padding-top: 60px;">
                            <p id="made-by">Made by Azizah Alshammari.</p>
                            <a href="https://twitter.com/ArtistAzizh" target="_blank">
                                <img src="twitter-icon.png" alt="" width="25px">
                            </a>
                            <a href="https://github.com/AzizhX" target="_blank">
                                <img src="github-icon.png" alt="" width="25px">
                            </a>

                    </td>
                </tr>
    </table>
    </section>

    <script src="rod-cutting-algorihtm.js"></script>
</body>
</html>