calculator/script.js at master · Cadichon/calculator · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
(function ($) {
    $.fn.calculator = function () {
        var id = Math.floor(Math.random() * 1000);
        var that;
        var addToInput = function (input, toAdd) {
            var content = input.val() + toAdd;
            input.val(content);
        };
        var updateOutput = function (output) {
            $.ajax({
                url: "api/",
                method: "get",
                dataType: "json",
                success: function (data) {
                    output.empty();
                    for (var i = 0; i < data.length; i += 1) {
                        var option = $("<option value=result-" + i + ">" + data[i].calcul + " = " + data[i].result + "</option>");
                        if (i + 1 == data.length) {
                            option.prop("selected", true);
                        }
                        output.append(option);
                    }
                }
            });
        }
        var evalInput = function (input, output) {
            var content = input.val();
            if (content.length == 0)
                return;
            input.val("");
            $.ajax({
                url: "api/",
                method: "post",
                data: {
                    "calcul": content,
                    "result": eval(content)
                }
            });
            updateOutput(output);
        };
        var clearInput = function (input) {
            input.val("");
        };
        var createFirstRow = function () {
            var firstRow = $("<tr>");
            var inputTd = $("<td>");
            var clearTd = $("<td>");
            var input = $("<input>");
            var clearButton = $("<button>cl</button>");

            clearButton.click(function (e) {
                clearInput(input);
            })
            inputTd.attr("colspan", "3");
            input.addClass("input");
            input.prop("disabled", true);
            inputTd.append(input);
            clearTd.append(clearButton);
            firstRow.append(inputTd);
            firstRow.append(clearTd);
            return [firstRow, input];
        };
        var createSecondRow = function () {
            var secondRow = $("<tr>");
            var outputTd = $("<td>");
            var output = $("<select name='result'>");

            outputTd.attr("colspan", "4");
            output.addClass("output");
            outputTd.append(output);
            secondRow.append(outputTd);;
            return [secondRow, output];
        }

        this.replaceWith("<table id='" + id + "' class='calculator'>");
        that = $("#" + id);
        that.removeAttr("id");
        $.getJSON("data.json", function (data) {
            var idx = 0;
            var [firstRow, input] = createFirstRow();
            var [secondRow, output] = createSecondRow();

            updateOutput(output);
            that.append(firstRow);
            that.append(secondRow);
            for (var i = 0; i < 4; i += 1) {
                var row = $("<tr>");

                for (var j = 0; j < 4; j += 1) {
                    var td = $("<td>");
                    var button = $("<button>");

                    button.addClass(data[idx]["class"]);
                    button.html(data[idx]["html"]);
                    if (button.hasClass("number"))
                        button.click(function (e) {
                            addToInput(input, e.target.innerHTML);
                        });
                    else {
                        switch (button.html()) {
                            case "=":
                            button.click(function (e) {
                                evalInput(input, output);
                            })
                            break;
                            default:
                            button.click(function (e) {
                                addToInput(input, e.target.innerHTML);
                            });
                            break;
                        }
                    }
                    idx++;
                    td.append(button);
                    row.append(td);
                }
                that.append(row);
            }
        });
        return that;
    }

    $(function () {
        $(".calculator").calculator();
    });
}(jQuery));