Web-Final-Project/Array.html at main · benjamin474/Web-Final-Project · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Container.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1><span>Array(陣列)</span></h1>
    <div class="go_home">
        <a href="Start.html"><img src='icon/home_rounded.png'></a>
    </div>
    <div class="button_group" style="float: left;">
        <div id="assign" onclick="assign()" class="button">Size</div><br>
        <div id="assignValue" class="button">Input</div><br>
        <div id="delete" class="button">Delete</div><br>
    </div>

    <div class="board" id="board">

    </div>

    <div id="input"></div>

    <div class="button_group" style="float: right;">
        <div id="search" class="button">Search</div><br>
        <div id="clear" class="button">Clear</div><br>
        <div id="example" class="button">Example</div>
    </div>

    <script>
        $(document).ready(() => {
            $("#assign").click(assign)
            $("#clear").click(clearAll)
            $("#assignValue").click(push)
            $("#search").click(search)
            // $("#example").click(pop)

        })

        function search() {


        }
        function clearAll() {
            $('#board').empty()
            removeInput();
        }


        function removeInput() {
            console.log('removeInput function is activated.');
            boardExist = false;
            $("#input").empty();
        }

        function assign() { //出現輸入列 然後交給build
            if (!boardExist) {
                inputSummon('assign');

                $("#cancelBtn").click(() => {
                    removeInput()
                })

                $("#submitBtn").click(() => {
                    const inp = $("#stackSize").val();
                    if (inp.length == 0) {
                        alert("Please input stack size")
                        return;
                    }
                    const value = Number.parseInt(inp);
                    if (!(value >= 1 && value <= 10)) {
                        alert("Stack size invalid")
                        return;
                    }
                    buildStack(value)
                })
            }
            else {
                alert('請先取消或輸入完當前數據!')
            }
        }

        function inputSummon(holder) {

            boardExist = true;
            let input = $(document.createElement("input"));
            let container = $("#input")
            let submitButton = $(document.createElement('button'))
            let cancelButton = $(document.createElement('button'))

            container.attr('background-color', 'white');

            container.addClass("input")
            input.attr("type", "Number")
            input.attr("id", "stackSize")
            input.attr("placeholder", holder)

            submitButton.text("submit")
            submitButton.attr("id", "submitBtn")
            cancelButton.text("cancel")
            cancelButton.attr("id", "cancelBtn")

            container.append([input, submitButton, cancelButton]);
        }
    </script>
</body>

</html>