Co-authored-by: Gonzalo Nandez <godan2310@yahoo.es>

scripts/script.js

@@ -4,50 +4,30 @@ const level = document.getElementById('level')
 const resultsElement = document.getElementById('returnedResults');
 const tests = wcagObj['intents'];
 
-function populateTable()
-{
+function populateTable() {
 	const filterLevel = level.innerHTML.split(",")
-	var returnedResults = 0;	
-	
-	for(let i = 0;i < tests.length; i++)
-	{
-		const tableRow = document.createElement('tr');
-		for (var key in tests[i]) 
-		{
-			if (tests[i].hasOwnProperty(key)) 
-			{
-				if(key!=='link')
-				{	
-					var val = tests[i][key];
-					var tableData = document.createElement('td');
-
-					if(tests[i].category.includes(filterCategory.innerHTML) || filterCategory.innerHTML == 'all')
-					{
-						
-						if(key=='category')
-						{
-							returnedResults++;
-							for(let a = 0;a < tests[i][key].length; a++)
-							{
-								var cssSpan = document.createElement('span');
-								cssSpan.textContent = val[a];
-								cssSpan.classList.add('bg-primary');
-								cssSpan.classList.add('badge');
-								cssSpan.classList.add('rounded-pill');
-								tableData.appendChild(cssSpan);
-							}
-						}
-						else if(key=='wcagLevel')
-						{
-							switch(val)
-							{
+	var returnedResults = 0;
+	tableBody.innerHTML = '';
+	for (let i = 0; i < tests.length; i++) {
+		if ((tests[i].category.includes(filterCategory.innerHTML) || filterCategory.innerHTML == 'all') && (filterLevel.find(item => item === tests[i].wcagLevel) || filterLevel[0] === 'All' )) {
+			const tableRow = document.createElement('tr');
+			for (var key in tests[i]) {
+				if (tests[i].hasOwnProperty(key)) {
+					if (key !== 'link') {
+						var val = tests[i][key];
+						var tableData = document.createElement('td');
+						if (key == 'wcagLevel') {
+							switch (val) {
 								case 'A':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-info');
+									['bg-info', 'text-dark', 'badge', 'rounded-pill' ].forEach(item => {
+										cssSpan.classList.add(item);
+									})
+									/*cssSpan.classList.add('bg-info');
 									cssSpan.classList.add('text-dark');
 									cssSpan.classList.add('badge');
-									cssSpan.classList.add('rounded-pill');
+									cssSpan.classList.add('rounded-pill');*/
 									tableData.appendChild(cssSpan);
 									break;
 								case 'AA':
@@ -72,8 +52,18 @@ function populateTable()
 									break;
 							}
 						}
-						else if(key=='understandingCriteria')
-						{
+						else if (key == 'category') {
+							returnedResults++;
+							for (let a = 0; a < tests[i][key].length; a++) {
+								var cssSpan = document.createElement('span');
+								cssSpan.textContent = val[a];
+								cssSpan.classList.add('bg-primary');
+								cssSpan.classList.add('badge');
+								cssSpan.classList.add('rounded-pill');
+								tableData.appendChild(cssSpan);
+							}
+						}
+						else if (key == 'understandingCriteria') {
 							const a = document.createElement('a');
 							const linkText = document.createTextNode(val);
 							a.appendChild(linkText);
@@ -82,8 +72,7 @@ function populateTable()
 							a.href = tests[i].link;
 							tableData.appendChild(a);
 						}
-						else if(key=='benefit') 
-						{
+						else if (key == 'benefit') {
 							const ul = document.createElement('ul');
 							const lista = val.split("#")
 							lista.forEach(element => {
@@ -94,8 +83,7 @@ function populateTable()
 							});
 							tableData.appendChild(ul);
 						}
-						else if(key="intent")
-						{
+						else if (key = "intent") {
 							const pText = val.split("#")
 							pText.forEach(element => {
 								const p = document.createElement('p');
@@ -114,47 +102,43 @@ function populateTable()
 	resultsElement.textContent = returnedResults;
 }
 
-function btnCategory(btn)
-{
-	tableBody.innerHTML = '';
+function btnCategory(btn) {
 	filterCategory.textContent = btn.textContent;
 	populateTable();
 }
 
-function btnLevel(btn)
-{
+function btnLevel(btn) {
 	const contentLevel = btn.textContent
 	const arrayLevels = level.innerHTML.split(",")
 
-	if (contentLevel == "All")
-	{
+	if (contentLevel == "All") {
 		level.textContent = 'All'
 	}
-	else if (arrayLevels.indexOf(contentLevel) !== -1)
-	{
+	else if (arrayLevels.indexOf(contentLevel) !== -1) {
 		const newArray = arrayLevels.filter(item => item != contentLevel)
 		level.textContent = newArray.join()
 		if (level.innerHTML == "") {
 			level.textContent = 'All'
 		}
 	}
-	else
-	{
-		
-		if (arrayLevels.indexOf('All') !== -1)
-		{
+	else {
+
+		if (arrayLevels.indexOf('All') !== -1) {
 			arrayLevels.splice(arrayLevels.indexOf('All'), 1)
 			level.textContent = arrayLevels.join()
 		}
 		arrayLevels.push(contentLevel)
+		if (arrayLevels.length === 3) {
+			level.textContent = 'All'
+		} else {
 		level.textContent = arrayLevels.join()
+		}
 	}
 	populateTable();
 }
 
 const hashstring = window.location.hash;
-switch(hashstring.replace('#',''))
-{	
+switch (hashstring.replace('#', '')) {
 	case 'dynamic-content':
 	case 'custom-controls':
 	case 'forms-and-UI':