In: Computer Science
(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate message will be output instead. Add a clear button that will clear the selection i.e. reset the radio button or tick boxes back to an unselected state. (c) Modify your (b) code so that in addition to outputting the selection to the web page, the selection is also placed in the browser’s local storage. Use ‘select’ as the local-storage key. The value will be the name of the category that was selected or the empty string is no selection was made. (d) Add a button called ‘retrieve’. When it is clicked the local storage is read and the prior selection is shown on the web page.
a) and b)
<html>
<head>
<title>
Facet
Selector
</title>
</head>
<body>
<table border='1' style='text-align:center;'>
<tr>
<td>Facet A</td>
<td>Facet B</td>
<td>Facet C</td>
</tr>
<tr>
<td>
<input type='checkbox'
name='faceta' value='Item A1'>Item A1
</td>
<td>
<input type='radio'
name='facetb' value='Item B1'>Item B1
</td>
<td>
<input type='checkbox'
name='facetc' value='Item C1'>Item C1
</td>
</tr>
<tr>
<td>
<input type='checkbox'
name='faceta' value='Item A2'>Item A2
</td>
<td>
<input type='radio'
name='facetb' value='Item B2'>Item B2
</td>
<td>
<input type='checkbox'
name='facetc' value='Item C2'>Item C2
</td>
</tr>
<tr>
<td>
<input type='checkbox'
name='faceta' value='Item A3'>Item A3
</td>
<td>
<input type='radio'
name='facetb' value='Item B3'>Item B3
</td>
<td>
<input type='checkbox'
name='facetc' value='Item C3'>Item C3
</td>
</tr>
</table>
<button
style='margin-right:20px; margin-top:20px'
onclick='print()'>Filter</button>
<button
style='margin-right:20px; margin-top:20px'
onclick='clearA()'>Clear</button>
<div style='margin-top:30px;' id='display'>
</div>
</body>
<script>
function print(){
var itemA= document.getElementsByName('faceta');
var itemB=
document.getElementsByName('facetb');
var itemC=
document.getElementsByName('facetc');
var
selectedItemA='';
var
selectedItemB='';
var
selectedItemC='';
for(var i=0;
i<itemA.length; i++){
if(itemA[i].type=='checkbox' &&
itemA[i].checked==true)
selectedItemA+=itemA[i].value+" ";
}
for(var i=0;
i<itemB.length; i++){
if(itemB[i].type=='radio' &&
itemB[i].checked==true)
selectedItemB+=itemB[i].value+" ";
}
for(var i=0;
i<itemC.length; i++){
if(itemC[i].type=='checkbox' &&
itemC[i].checked==true)
selectedItemC+=itemC[i].value+" ";
}
var disp=
document.getElementById('display');
var
finalList='';
finalList=selectedItemA+selectedItemB+selectedItemC;
if(finalList==''){
disp.innerHTML='No Items selected';
}else{
disp.innerHTML=finalList;
}
}
function clearA(){
var itemA= document.getElementsByName('faceta');
var itemB=
document.getElementsByName('facetb');
var itemC=
document.getElementsByName('facetc');
for(var i=0; i<itemA.length; i++){
itemA[i].checked=false;
}
for(var i=0; i<itemB.length; i++){
itemB[i].checked=false;
}
for(var i=0; i<itemC.length; i++){
itemC[i].checked=false;
}
var disp=document.getElementById('display');
disp.innerHTML='';
}
</script>
</html>