InfixPostfixVisualizer/index.html at main · automatefreely/InfixPostfixVisualizer · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Postfix Infix Visulizer</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- <div id = "h1">
        <center><h1 >Infix Postfix Visualizer</h1></center>
        </div> -->
    <div id="box">
        <div id="canvas">
            <canvas id="myCanvas"></canvas>
        </div>
        <div id="form">
            <form>
                <div class="in">
                    <label for="infix">Infix:</label>
                    <input type="text" id="infix" name="infix">
                </div>
                <br>
                <div class="in">
                    <label for="postfix">Postfix:</label>
                    <input type="text" id="postfix" name="postfix">
                </div><br>
            </form>
            <div class="bin"><button id="update">Update</button> <button id="autoplay">Autoplay</button></div>

        </div>
        <div id="form">
            <h2>Instruction</h2>
            <p>You can write your infix expression in the box provided. Then you can click on "Auto Play" to see how
                exactly your infix expression is converted to postfix. Or you also can intract with the element of the box. Do explore!</p>
        </div>
    </div>

    <div id="h1">
        <h1>Infix to Postfix</h1>
        <p>Made with <span id="love">❤</span> by <a href="https://github.com/automatefreely">AF</a></p>
    </div>
    <script src="utils.js"></script>
    <script src="dustbin.js"></script>
    <script src="containerManager.js"></script>
    <script src="stackContainer.js"></script>
    <script src="arrayContainer.js"></script>
    <script src="main2.js"></script>
</body>

</html>