Question

In: Computer Science

(a) Create a HTML page for a single faceted search selector. It will include the name...

(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.

Expert Solution

a) and b)

<html>
   <head>
       <title>
           Facet Selector
       </title>
   </head>

<body>

           <tr>
               <td>Facet A</td>
               <td>Facet B</td>
               <td>Facet C</td>
           </tr>

</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>

</body>

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>

venereology answered 10 months ago

The code to create a Search/Filter Data with Javascript or html from html page.

I already have a database in phpMyAdmin and need to create an html/php "SEARCH" page to...

I already have a database in phpMyAdmin and need to create an html/php "SEARCH" page to retrieve the information from the database on to my localhost. Please post a php/html code that will create a search page and return the data from my phpmyadmin database. The 3 items I have on the database are first_name, last_name and birth_day.

Create following webpage in HTML : 1. Login Page This is the first page the user...

Create following webpage in HTML : 1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more...

HTML Create a page of texts that uses inline elements. The page should contain a citation,...

HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.

Please provide HTML code for the following: - Create a page that lists a set of...

Please provide HTML code for the following: - Create a page that lists a set of audio files and shows their duration - Create a page that lists a set of video files and plays a different video when you click on the play icon

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Create a web application for a daily planner in HTML. Please include testing in the files...

Create a web application for a daily planner in HTML. Please include testing in the files and show correct code formatting.

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...

Create a web page using PHP and HTML that contains a list of movie names available...

Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...

Create an HTML page that contains a three-level nesting list (you may choose the type of...

Create an HTML page that contains a three-level nesting list (you may choose the type of the list you want to use). One item on each level. Use the three attached images as the content of each of the three list items. use any random image name located in the default directory