refactor and fixes

.gitignore

@@ -0,0 +1 @@
+.vscode/settings.json

index.html

@@ -37,9 +37,12 @@
 	<div class="container">
 		
 		<div class="row">
-			<fieldset class="col-12 row bg-light justify-content-end btns" style="padding:20px">
+			<div class="col-6 row btns" style="padding:20px">
+				<h1>WCAG</h1>
+			</div>
+			<fieldset class="col-6 row justify-content-end btns" style="padding:20px">
 				<legend class="col" style="text-align: right;">Idioma</legend>
-				<ul class="col-4">
+				<ul class="col">
 					<li><button id="cat" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">Català</button></li>
 					<li><button id="es" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">Español</button></li>
 					<li><button id="en" type="button" onclick="btnLang(this)" class="btn btn-secondary btn-sm language">English</button></li>
@@ -47,18 +50,15 @@
 			</fieldset>
 		</div>
 
-		<h1>WCAG</h1>
-
 		<div class="row">
 			<div class="col-12">
-				<p role="status">
-					Showing <span class="badge bg-primary" id="returnedResults">78</span> tests, version <span class="badge bg-primary" id="version">All</span>, categorised by <span class="badge bg-primary" id="filter">all</span> success criteria. Level <span class="badge bg-primary" id="level" >All</span>.
+				<p id="resume">
 				</p>
 			</div>
 		</div>
 
 		<div class="row">
-			<fieldset id="versionbtn" class="col-6 row bg-light btns" style="padding:20px">
+			<fieldset id="versionbtn" class="col-6 row btns" style="padding:20px">
 				<legend class="col-3">Version</legend>
 				<ul class="col justify-content-start">
 					<li><button type="button" onclick="btnVersion(this)" class="btn btn-primary btn-sm version">All</button></li>
@@ -68,7 +68,7 @@
 				</ul>
 			</fieldset>
 
-			<fieldset id="levelbtn" class="col-6 row bg-light justify-content-end btns" style="padding:20px">
+			<fieldset id="levelbtn" class="col-6 row justify-content-end btns" style="padding:20px">
 				<legend class="col-3">Level</legend>
 				<ul class="col">
 					<li><button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button></li>
@@ -78,12 +78,12 @@
 				</ul>
 			</fieldset>
 		</div>
-
+<!--
 		<div class="row">
-			<fieldset id="categorybtn" class="col-12 row bg-light btns" style="padding:20px">
+			<fieldset id="categorybtn" class="col-12 row btns" style="padding:20px">
 				<legend class="col-3">Category</legend>
 				<ul class="col" style="text-align:right">
-					<li><button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">all</button></li>
+					<li><button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">All</button></li>
 					<li><button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">content</button></li>
 					<li><button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">forms-and-UI</button></li>
 					<li><button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">audio-video</button></li>
@@ -96,22 +96,22 @@
 				</ul>
 			</fieldset>
 		</div>
-
+-->
 		<div class="row">
-			<fieldset id="columns" class="col-12 row bg-light btns" style="padding:20px">
+			<fieldset id="columns" class="col-12 row btns" style="padding:20px">
 				<legend class="col-3">Show columns</legend>
 				<ul class="col" style="text-align:right">
 					<li>
-						<label for="wcagLevel">Level</label>
-						<input type="checkbox" id="wcagLevel" value="Level" onchange="showColumns(this)" checked="true">
+						<label for="level">Level</label>
+						<input type="checkbox" id="level" value="Level" onchange="showColumns(this)">
 					</li>
 					<li>
-						<label for="wcagVersion">Version</label>
-						<input type="checkbox" id="wcagVersion" value="Version" onchange="showColumns(this)" checked="true">
+						<label for="version">Version</label>
+						<input type="checkbox" id="version" value="Version" onchange="showColumns(this)">
 					</li>
 					<li>
 						<label for="goal">Goal</label>
-						<input type="checkbox" id="goal" value="Goal" onchange="showColumns(this)" checked="true">
+						<input type="checkbox" id="goal" value="Goal" onchange="showColumns(this)">
 					</li>
 					<li>
 						<label for="intent">Intent</label>
@@ -128,11 +128,11 @@
 					<li>
 						<label for="tools">Tools</label>
 						<input type="checkbox" id="tools" value="Tools" onchange="showColumns(this)">
-					</li>
+					</li><!--
 					<li>
 						<label for="category">Category</label>
-						<input type="checkbox" id="category" value="Category" onchange="showColumns(this)" checked="true">
-					</li>
+						<input type="checkbox" id="category" value="Category" onchange="showColumns(this)">
+					</li>-->
 				</ul>
 			</fieldset>
 		</div>

scripts/script.js

@@ -1,14 +1,20 @@
-const filterCategory = document.getElementById('filter');
-const level = document.getElementById('level');
-const version = document.getElementById('version');
-const resultsElement = document.getElementById('returnedResults');
+const criteria = wcagObj['criterion'];
 let lang = 'en';
+let total = "78";
+let version = 'All';
+let level = 'All';
+let category = 'All';
+
+const resume = document.getElementById('resume');
+let message;
+
+const checks = ['level', 'version', 'goal', 'intent', 'benefits', 'verification', 'tools'];
+
 const tableHeader = document.querySelector('thead');
 const tableBody = document.querySelector('tbody');
-const criteria = wcagObj['criterion'];
 let headers = [
 	{
-		"name": "understandingCriteria",
+		"name": "criteria",
 		"alias": "Criteria",
 		"view": true
 	},
@@ -18,24 +24,24 @@ let headers = [
 		"view": false
 	},
 	{
-		"name": "wcagLevel",
+		"name": "level",
 		"alias": "Level",
 		"view": true
 	},
 	{
-		"name": "wcagVersion",
+		"name": "version",
 		"alias": "Version",
 		"view": true
 	},
 	{
 		"name": "goal",
 		"alias": "Goal",
-		"view": true
+		"view": false
 	},
 	{
 		"name": "intent",
 		"alias": "Intent",
-		"view": false
+		"view": true
 	},
 	{
 		"name": "benefits",
@@ -55,14 +61,15 @@ let headers = [
 	{
 		"name": "category",
 		"alias": "Category",
-		"view": true
+		"view": false
 	}
 ];
 
 const createTable = () => {
-	const filterLevel = level.innerHTML.split(",");
-	const filterVersion = version.innerHTML.split(",");
-  const elementHead = document.getElementById('thead');
+	const filterLevel = level.split(",");
+	const filterVersion = version.split(",");
+  
+	const elementHead = document.getElementById('thead');
   const totalhead = elementHead.children.length;
   for(let g= 0; g<totalhead; g++) {
     if (elementHead.children.length >0 ) { elementHead.removeChild(elementHead.children[0]) }
@@ -74,8 +81,8 @@ const createTable = () => {
     if (element.children.length > 0 ) { element.removeChild(element.children[0]) }
   }
 
+	// Create table headers
   let tr = document.createElement('tr');
-  
 	headers.forEach(item => {
     if (item.view) {
       const th = document.createElement('th')
@@ -87,32 +94,31 @@ const createTable = () => {
   })
   elementHead.appendChild(tr)
 
+	// Create table body
   criteria.forEach(item => {
     tr = document.createElement('tr')
     headers.forEach(head => {
-      if (head.view===true && (item.category.includes(filterCategory.innerHTML) || filterCategory.innerHTML === 'all') && (filterLevel.find(lev => lev === item.wcagLevel) || filterLevel[0] === 'All') && (filterVersion.find(lev => lev === item.wcagVersion) || filterVersion[0] === 'All')) {
-        
-				const td = document.createElement('td');
-        let content;
-				content = document.createTextNode(item[head.name]);
+      if (head.view===true && (item.category.includes(category) || category === 'All') && (filterLevel.find(lev => lev === item.level) || filterLevel[0] === 'All') && (filterVersion.find(lev => lev === item.version) || filterVersion[0] === 'All')) {
 				
-				if (content.textContent === '[object Object]'){
+				const td = document.createElement('td');
+        if (typeof item[head.name] === 'object') {
 					switch (lang) {
 						case 'cat':
-							content = document.createTextNode(item[head.name].cat);
+							td.innerHTML = item[head.name].cat;
 							break;
 						case 'es':
-							content = document.createTextNode(item[head.name].es);
+							td.innerHTML = item[head.name].es;
 							break;
 						case 'en':
-							content = document.createTextNode(item[head.name].en);
+							td.innerHTML = item[head.name].en;
 							break;
 						default:
-							content = document.createTextNode(item[head.name].en);
+							td.innerHTML = item[head.name].en;
 							break;
 					}
+				} else {
+						td.innerHTML = item[head.name];
 				}
-        td.appendChild(content);
         tr.appendChild(td);
       }
     });
@@ -120,7 +126,26 @@ const createTable = () => {
 			element.append(tr);
 		}
   });
-	resultsElement.innerHTML = document.getElementById('wcagTable').rows.length - 1;
+	totalElem = document.getElementById('wcagTable').rows.length - 1;
+	updateResume();
+}
+
+function updateResume() {
+	switch (lang) {
+		case 'cat':
+			message = 'Mostrar ' + total + ' tests. Versió ' + version + ' nivell ' + level + '. Categoritzats en ' + category + ' criteris.';
+		break;
+		case 'es':
+			message = 'Showing ' + total + ' tests. Version ' + version + ' level ' + level + '. Categorised by ' + category + ' criterios.';
+		break;
+		case 'en':
+			message = 'Showing ' + total + ' tests. Version ' + version + ' level ' + level + '. Categorised by ' + category + ' criteria.';
+		break;
+		default:
+			message = 'Showing ' + total + ' tests. Version ' + version + ' level ' + level + '. Categorised by ' + category + ' criteria.';
+		break;
+	}
+	resume.innerHTML = message;
 }
 
 function btnLang(btn) {
@@ -128,76 +153,90 @@ function btnLang(btn) {
 	createTable()
 }
 
-function btnCategory(btn) {
-	filterCategory.textContent = btn.textContent;
+function btnVersion(btn) {
+	const contentVersion = btn.textContent
+	const arrayVersions = version.split(",")
+
+	if (contentVersion == "All") {
+		version = 'All'
+	}
+	else if (arrayVersions.indexOf(contentVersion) !== -1) {
+		const newArray = arrayVersions.filter(item => item != contentVersion)
+		version = newArray.join()
+		if (version == "") {
+			version = 'All'
+		}
+	}
+	else {
+
+		if (arrayVersions.indexOf('All') !== -1) {
+			arrayVersions.splice(arrayVersions.indexOf('All'), 1)
+			version = arrayVersions.join()
+		}
+		arrayVersions.push(contentVersion)
+		if (arrayVersions.length === 3) {
+			version = 'All'
+		} else {
+		version = arrayVersions.join()
+		}
+	}
 	createTable()
 }
 
 function btnLevel(btn) {
 	const contentLevel = btn.textContent
-	const arrayLevels = level.innerHTML.split(",")
+	const arrayLevels = level.split(",")
 
 	if (contentLevel == "All") {
-		level.textContent = 'All'
+		level = 'All'
 	}
 	else if (arrayLevels.indexOf(contentLevel) !== -1) {
 		const newArray = arrayLevels.filter(item => item != contentLevel)
-		level.textContent = newArray.join()
-		if (level.innerHTML == "") {
-			level.textContent = 'All'
+		level = newArray.join()
+		if (level == "") {
+			level = 'All'
 		}
 	}
 	else {
 
 		if (arrayLevels.indexOf('All') !== -1) {
 			arrayLevels.splice(arrayLevels.indexOf('All'), 1)
-			level.textContent = arrayLevels.join()
+			level = arrayLevels.join()
 		}
 		arrayLevels.push(contentLevel)
 		if (arrayLevels.length === 3) {
-			level.textContent = 'All'
+			level = 'All'
 		} else {
-		level.textContent = arrayLevels.join()
+		level = arrayLevels.join()
 		}
 	}
 	createTable()
 }
 
-function btnVersion(btn) {
-	const contentVersion = btn.textContent
-	const arrayVersions = version.innerHTML.split(",")
-
-	if (contentVersion == "All") {
-		version.textContent = 'All'
-	}
-	else if (arrayVersions.indexOf(contentVersion) !== -1) {
-		const newArray = arrayVersions.filter(item => item != contentVersion)
-		version.textContent = newArray.join()
-		if (version.innerHTML == "") {
-			version.textContent = 'All'
-		}
-	}
-	else {
-
-		if (arrayVersions.indexOf('All') !== -1) {
-			arrayVersions.splice(arrayVersions.indexOf('All'), 1)
-			version.textContent = arrayVersions.join()
-		}
-		arrayVersions.push(contentVersion)
-		if (arrayVersions.length === 3) {
-			version.textContent = 'All'
-		} else {
-		version.textContent = arrayVersions.join()
-		}
-	}
+function btnCategory(btn) {
+	category = btn.textContent;
 	createTable()
 }
 
 function showColumns(check){
 	headers.forEach(item => {
-		if (item.name === check.id) { check.checked ? item.view = true : item.view = false; }
+		if (item.name === check.id) { 
+			check.checked ? item.view = true : item.view = false; 
+		}
 	})
 	createTable();
 }	
 
+function checksInit() {
+	checks.forEach(item => {
+		headers.forEach(header => {
+			if (item == header.name) {
+				header.view === true ? document.getElementById(item).checked = true : document.getElementById(item).checked = false;
+				
+			}
+		})
+	})
+}
+
+checksInit();
 createTable();