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 1 year 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 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

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.

9. Create a Web page about your favorite musical group. Include the name of the group,...

9. Create a Web page about your favorite musical group. Include the name of the group, the individuals in the group, a hyperlink to the group’s Web site, your favorite three (or fewer if the group is new) CD releases, and a brief review of each CD. ● Use an unordered list to organize the names of the individuals. ● Use a definition list for the names of the CDs and your reviews. I would like it on Pink Floyd...

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

Using brackets you will need to create the HTML page and CSS style sheet for the...

Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...

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.