Skip to content

Commit 013d846

Browse files
committed
first commit
0 parents  commit 013d846

File tree

3 files changed

+110
-0
lines changed

3 files changed

+110
-0
lines changed

myscript.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// @ts-nocheck
2+
$(document).ready(function () {
3+
function jsEscape(str) {
4+
// This method is used to prevent user from XSS (cross-site scripting) attack.
5+
// NOTE: We are using this method instead of $(selector).text() provided by jQuery becuase of whitespace issue with it. (https://forum.jquery.com/topic/inserting-whitespace-into-a-textnode)
6+
7+
var tagsToReplace = {
8+
"&": "&",
9+
"<": "&lt;",
10+
">": "&gt;",
11+
'"': "&quot;",
12+
"'": "&#39;",
13+
"/": "&#x2F;",
14+
"`": "&#x60;",
15+
"=": "&#x3D;",
16+
};
17+
18+
if (typeof str === "string") {
19+
return str.replace(/[&<>"'`=\/]/g, function (tag) {
20+
return tagsToReplace[tag];
21+
});
22+
} else {
23+
return str;
24+
}
25+
}
26+
27+
$.ajax({
28+
url: "https://run.mocky.io/v3/e11e89e4-f328-4d3c-974d-b6707e9f27df", // Mock api (just for testing).
29+
type: "GET",
30+
dataType: "json",
31+
success: function (res) {
32+
console.log(res);
33+
34+
// This code generates table from the data provided by this http call.
35+
const caption = "Codility Table";
36+
let $table = $("<table><caption>" + caption + "</caption></table>");
37+
38+
let tr_1 = "<tr><td id='blank_td'></td>";
39+
res.headers.forEach(function (item, index) {
40+
tr_1 += "<th scope='col'>" + jsEscape(item) + "</th>";
41+
});
42+
tr_1 += "</tr>";
43+
$table.append(tr_1);
44+
45+
for (const [key, value] of Object.entries(res.data)) {
46+
var other_tr = "<tr>";
47+
other_tr += "<th scope='row'>" + jsEscape(key) + "</th>";
48+
value.forEach(function (item, index) {
49+
other_tr += "<td class='my_td'>" + jsEscape(item) + "</td>";
50+
});
51+
other_tr += "</tr>";
52+
$table.append(other_tr);
53+
}
54+
55+
$("#my_table").append($table);
56+
},
57+
error: function (err) {
58+
// Error occured.
59+
console.log(err);
60+
alert("Something went wrong. Please try again later.");
61+
},
62+
});
63+
});

mystyle.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
table {
2+
width: 100%;
3+
border-collapse: collapse;
4+
margin: 10px 0;
5+
font-family: sans-serif;
6+
padding: 12px 15px;
7+
}
8+
9+
td,
10+
th,
11+
table caption {
12+
padding: 12px 15px;
13+
text-align: center;
14+
border: solid 1px #777;
15+
}
16+
17+
table tr:nth-child(even) {
18+
background-color: lightgoldenrodyellow;
19+
}
20+
21+
th,
22+
#blank_td {
23+
background-color: lightgrey;
24+
}
25+
26+
table caption {
27+
font-weight: 600;
28+
border-bottom: 0;
29+
border-top-left-radius: 10px;
30+
border-top-right-radius: 10px;
31+
}

mytask.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>JQueryTable</title>
8+
9+
<link rel="stylesheet" href="mystyle.css" />
10+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11+
<script src="myscript.js"></script>
12+
</head>
13+
<body>
14+
<div id="my_table"></div>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)