-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (73 loc) · 2.35 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Accessibility Checker</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<h1>Accessibility Checker</h1>
<form id="urlForm">
<input
type="text"
id="urlInput"
placeholder="Enter URL to check"
required
/>
<button type="submit">Check Accessibility</button>
</form>
<table id="resultsTable" style="display: none">
<thead>
<tr>
<th>Violation</th>
<th>Description</th>
<th>Element</th>
</tr>
</thead>
<tbody id="resultsBody"></tbody>
</table>
<script>
document.getElementById("urlForm").onsubmit = async function (e) {
e.preventDefault();
const url = document.getElementById("urlInput").value;
const response = await fetch("/check", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ url: url }),
});
const data = await response.json();
displayResults(data);
};
function displayResults(results) {
const table = document.getElementById("resultsTable");
const tbody = document.getElementById("resultsBody");
tbody.innerHTML = "";
results.violations.forEach((violation) => {
const tr = document.createElement("tr");
const htmlElement = violation.nodes
.map((node) => node.html)
.join(", ");
tr.innerHTML = `<td>${violation.id}</td><td>${violation.description}</td>`;
const td = document.createElement("td");
td.innerText = htmlElement;
tr.appendChild(td);
tbody.appendChild(tr);
});
table.style.display = "table";
}
</script>
<!-- ... existing HTML content ... -->
<footer>
<p>© 2023 Rast Mobile</p>
<p>
Visit us at <a href="https://rastmobile.com" target="_blank">rastmobile.com</a><br>
Follow us on:
<a href="https://twitter.com/rastmobile" target="_blank">Twitter</a> |
<a href="https://facebook.com/rastmobile" target="_blank">Facebook</a> |
<a href="https://instagram.com/mobilerast" target="_blank">Instagram</a> |
<a href="https://linkedin.com/company/rastmobile" target="_blank">LinkedIn</a>
</p>
</footer>
</body>
</html>