changes

index.html

@@ -21,11 +21,11 @@
 
 	<div class="container">
 			
-		<h1>WCAG <span id="wcagVersion">2.1</span></h1>
+		<h1>WCAG</h1>
 		<div class="row">
 			<div class="col-sm-12 col-lg-7">
 				<p role="status">
-					Showing <span class="badge bg-primary" id="returnedResults">78</span> tests categorised by <span class="badge bg-primary" id="filter">all</span> success criteria
+					Showing <span class="badge bg-primary" id="returnedResults">78</span> understanding criteria categorised by <span class="badge bg-primary" id="filter" data-level="">all</span> success criteria. Level <span class="badge bg-primary" id="level" >All</span>.
 				</p>
 			</div>
 		</div>
@@ -36,17 +36,30 @@
 					<legend>Categorise WCAG</legend>
 				</div>
 				<div class="col" style="text-align:right">
-					<button type="button" class="btn btn-primary btn-sm">all</button>
-					<button type="button" class="btn btn-secondary btn-sm">content</button>
-					<button type="button" class="btn btn-secondary btn-sm">custom-controls</button>
-					<button type="button" class="btn btn-secondary btn-sm">forms-and-UI</button>
-					<button type="button" class="btn btn-secondary btn-sm">audio-video</button>
-					<button type="button" class="btn btn-secondary btn-sm">structure</button>
-					<button type="button" class="btn btn-secondary btn-sm">colour</button>
-					<button type="button" class="btn btn-secondary btn-sm">font-size</button>
-					<button type="button" class="btn btn-secondary btn-sm">dynamic-content</button>
-					<button type="button" class="btn btn-secondary btn-sm">keyboard</button>
-					<button type="button" class="btn btn-secondary btn-sm">link</button>
+					<button type="button" onclick="btnLevel(this)" class="btn btn-primary btn-sm level">All</button>
+					<button type="button" onclick="btnLevel(this)" class="btn btn-info dark-text btn-sm level">A</button>
+					<button type="button" onclick="btnLevel(this)" class="btn btn-warning dark-text btn-sm level">AA</button>
+					<button type="button" onclick="btnLevel(this)" class="btn btn-danger btn-sm level">AAA</button>
+				</div>
+			</div>
+		</fieldset>
+
+		<fieldset>
+			<div class="row bg-light" style="padding:20px;">
+				<div class="col-3" style="padding-left:0px;">
+					<legend>Categorise WCAG</legend>
+				</div>
+				<div class="col" style="text-align:right">
+					<button type="button" onclick="btnCategory(this)" class="btn btn-primary btn-sm category">all</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">content</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">forms-and-UI</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">audio-video</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">structure</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">colour</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">font-size</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">dynamic-content</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">keyboard</button>
+					<button type="button" onclick="btnCategory(this)" class="btn btn-secondary btn-sm category">link</button>
 				</div>
 			</div>
 		</fieldset>

scripts/script.js

@@ -1,14 +1,14 @@
 const tableBody = document.querySelector('tbody');
 const filteredBy = document.getElementById('filter');
 const wcagVersion = document.getElementById('wcagVersion');
+const level = document.getElementById('level')
+const resultsElement = document.getElementById('returnedResults');
+const tests = wcagObj['intents'];
 
-function populateTable(obj, filter)
+function populateTable()
 {
-	const resultsElement = document.getElementById('returnedResults');
-	const tests = obj['intents'];
-	var returnedResults = 0;
 	
-	wcagVersion.textContent = obj.latestWCAGversion;
+	var returnedResults = 0;
 	
 	for(let i = 0;i < tests.length; i++)
 	{
@@ -22,7 +22,7 @@ function populateTable(obj, filter)
 					var val = tests[i][key];
 					var tableData = document.createElement('td');
 
-					if(tests[i].category.includes(filter) || filter == 'all')
+					if(tests[i].category.includes(filteredBy.innerHTML) || filteredBy.innerHTML == 'all')
 					{
 						if(key=='category')
 						{
@@ -53,7 +53,8 @@ function populateTable(obj, filter)
 								case 'AA':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-success');
+									cssSpan.classList.add('bg-warning');
+									cssSpan.classList.add('text-dark');
 									cssSpan.classList.add('badge');
 									cssSpan.classList.add('rounded-pill');
 									tableData.appendChild(cssSpan);
@@ -61,8 +62,7 @@ function populateTable(obj, filter)
 								case 'AAA':
 									var cssSpan = document.createElement('span');
 									cssSpan.textContent = val;
-									cssSpan.classList.add('bg-warning');
-									cssSpan.classList.add('text-dark');
+									cssSpan.classList.add('bg-danger');
 									cssSpan.classList.add('badge');
 									cssSpan.classList.add('rounded-pill');
 									tableData.appendChild(cssSpan);
@@ -114,16 +114,123 @@ function populateTable(obj, filter)
 	}
 	resultsElement.textContent = returnedResults;
 }
-
-const btns = document.querySelectorAll('button');
+/*
+const btns = document.getElementsByClassName('category');
 for (i of btns) 
 {
   i.addEventListener('click', function(){
 		tableBody.innerHTML = '';
-		populateTable(wcagObj,this.textContent);
+		populateTable();
 		filteredBy.textContent = this.textContent;
   });
 }
+*/
+function btnCategory(btn)
+{
+	tableBody.innerHTML = '';
+	populateTable();
+	filteredBy.textContent = btn.textContent;
+}
+/*
+const levels = document.getElementsByClassName('level');
+for (i of levels) 
+{
+  i.addEventListener('click', function(){
+		const datafilter = document.getElementById('filter')
+		let dataLevel = datafilter.getAttribute('data-level')
+		const contentLevel = this.textContent
+		
+		if (dataLevel == "")
+		{
+			datafilter.setAttribute('data-level', contentLevel)	
+		}
+		else if (contentLevel == "All")
+		{
+			datafilter.setAttribute('data-level', 'All')
+		}
+		else{
+			const arrayLevels = dataLevel.split(",")
+			if (arrayLevels.indexOf(contentLevel) !== -1)
+			{
+				const newArray = arrayLevels.filter(item => item != contentLevel)
+				datafilter.setAttribute('data-level', newArray.join())
+			}
+			else
+			{
+				const index = arrayLevels.indexOf('All')
+				if (index !== -1)
+				{
+					arrayLevels.splice(index, 1)
+				}
+				arrayLevels.push(contentLevel)
+				datafilter.setAttribute('data-level', arrayLevels.join())
+			}
+		}
+  });
+}*/
+/*
+const levels = document.getElementsByClassName('level');
+for (i of levels) 
+{
+  i.addEventListener('click', function(){
+		const contentLevel = this.textContent
+		
+		if (contentLevel == "All")
+		{
+			level.textContent = 'All'
+		}
+		else
+		{
+			const arrayLevels = level.innerHTML.split(",")
+			if (arrayLevels.indexOf(contentLevel) !== -1)
+			{
+				const newArray = arrayLevels.filter(item => item != contentLevel)
+				level.textContent = newArray.join()
+			}
+			else
+			{
+				const index = arrayLevels.indexOf('All')
+				if (index !== -1)
+				{
+					arrayLevels.splice(index, 1)
+					level.textContent = arrayLevels.join()
+				}
+				arrayLevels.push(contentLevel)
+				level.textContent = arrayLevels.join()
+			}
+		}
+  });
+}*/
+
+function btnLevel(btn)
+{
+	const contentLevel = btn.textContent
+			
+			if (contentLevel == "All")
+			{
+				level.textContent = 'All'
+			}
+			else
+			{
+				const arrayLevels = level.innerHTML.split(",")
+				if (arrayLevels.indexOf(contentLevel) !== -1)
+				{
+					const newArray = arrayLevels.filter(item => item != contentLevel)
+					level.textContent = newArray.join()
+				}
+				else
+				{
+					const index = arrayLevels.indexOf('All')
+					if (index !== -1)
+					{
+						arrayLevels.splice(index, 1)
+						level.textContent = arrayLevels.join()
+					}
+					arrayLevels.push(contentLevel)
+					level.textContent = arrayLevels.join()
+				}
+			}
+}
 
 const hashstring = window.location.hash;
 switch(hashstring.replace('#',''))
@@ -138,9 +245,9 @@ switch(hashstring.replace('#',''))
 	case 'keyboard':
 	case 'link':
 	case 'font-size':
-		populateTable(wcagObj, hashstring.replace('#',''));
+		populateTable();
 		break;
 	default:
-		populateTable(wcagObj, 'all');
+		populateTable();
 		break;
 }