WebServer/index.html at master · tomfelix/WebServer · 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
<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>STXNext JavaScript entry test 2017</title>

    <style type="text/css">

        #loadingIndicator {

            color: #999;

        }

        #error {

            color: #aa0000;

        }

    </style>

</head>

<body>

<button id="getItemsButton">

    Fetch items from server

</button>

<span id="loadingIndicator" style="display: none">Loading...</span>

<span id="error"></span>

<div id="results"></div>

<script type="text/javascript">

    document.getElementById("getItemsButton").addEventListener("click", getDataFromBackend);
    function getDataFromBackend() {

        document.getElementById("error").innerHTML='';
        document.getElementById("results").innerHTML='';
        document.getElementById("getItemsButton").disabled = true;
        document.getElementById("loadingIndicator").style.display= '';
        var myPromise =  new Promise(function (resolve, reject) {

            setTimeout(() => {

                if (Math.random() < 0.3 ? true : false) {
                var fulfilled = {

                    status: 200,

                    items: [

                        { 'name': 'Teddy Bear', 'price': 5.0 },

                        { 'name': 'Book', 'price': 15.0 },

                        { 'name': 'Remote controlled car', 'price': 50.0 }

                    ]

                }
                resolve(fulfilled);
                document.getElementById("getItemsButton").disabled = false;
                document.getElementById("loadingIndicator").style.display= 'none';
            } else {
                var error = {

                    status: 500,

                    message: 'Internal Server Error'

                }
                reject(error);

                document.getElementById("getItemsButton").disabled = false;
                document.getElementById("loadingIndicator").style.display= 'none';
            }

        }, 1000);


        });

        myPromise.then( fulfilled => {
            var data = fulfilled.items;
            var arr = "<ul>";
            for(var i = 0; i < data.length;i++){
                arr += "<li>Name: " + data[i].name + " Price: " + data[i].price + "</li>";
            }
            arr += "</ul>";
            document.getElementById("results").innerHTML= "There are " + data.length + " items" + arr;
    })  .catch(error => {
            document.getElementById("error").innerHTML= error.message;
    }) ;


    }

</script>

</body>