Question

In: Computer Science

Exercise 1 (a) Use javascript modify the code below, so that in addition to outputting the...

Exercise 1

(a) Use javascript modify the code below, 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.


Exercise 2

(a) Extend the code from Exercise 1. When the user clicks the retrieve button the radio buttons or tick boxes are also updated to show the prior selection. Confirm your code is working by making a selection, then exiting the browser, then restarting the browser at the same page and then clicking the retrieve button.


(b) Extend your web page so that the last 10 filter selections are stored. The user is able to see these prior filter selections (perhaps by clicking a button) and then choose one selecting it, making that the current selection.

previous code:

<head>
<title>
EX1
</title>
</head>

<body>

<table>

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

<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A1'>Bird A1
</td>

<td>
<input type='radio' name='ProductB' value='Cat B1'>Cat B1
</td>

<td>
<input type='checkbox' name='ProductC' value='Dog C1'>Dog C1
</td>
</tr>

<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A2'>Bird A2
</td>

<td>
<input type='radio' name='ProductB' value='Cat B2'>Cat B2
</td>

<td>
<input type='checkbox' name='ProductC' value='Dog C2'>Dog C2
</td>

</tr>

<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A3'>Bird A3
</td>

<td>
<input type='radio' name='ProductB' value='Cat B3'>Cat B3
</td>

<td>
<input type='checkbox' name='ProductC' value='Dog C3'>Dog C3
</td>
</tr>

</table>
<br/>

<button onclick='print()'>Filter</button>
  
<button onclick='clearA()'>Clear</button>

<div style='margin-top:30px;' id='display'>

</div>

</body>

<script>

function print(){

var itemA= document.getElementsByName('ProductA');

var itemB= document.getElementsByName('ProductB');
  
var itemC= document.getElementsByName('ProductC');

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 newList='';

newList=selectedItemA+selectedItemB+selectedItemC;

if(newList==''){
disp.innerHTML='No Items selected';
}else{
disp.innerHTML=newList;
}


}

function clearA(){

var itemA= document.getElementsByName('ProductA');

var itemB= document.getElementsByName('ProductB');
  
var itemC= document.getElementsByName('ProductC');

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>

Filter
  
Clear

Solutions

Expert Solution

Hi Madam/Sir,

I have solved part 1(a), 1(b) and 2(a) of the question. For 2(b), I need more clarification. As you have mentioned in 1(a) that the key name in localStorage should be 'select'. If we go by this convention then it is not possible to store and fetch previous ten selections from localStorage. This is because each time I save a value in localStorage, I am using the same key, i.e., 'select'. So every time the new value overrides the previous selection and there is no record of last selection.

To solve this issue, we have to use different key names (maybe sequential key names like select1, select2,.. and so on) but for that I will need to know whether that is okay with you.

Code for 1(a), 1(b) and 2(a) :

___________________________________

<head>

<title>

EX1

</title>

</head>

<body>

<table>

<tr>

<td>PET A</td>

<td>PET B</td>

<td>PET C</td>

</tr>

<tr>

<td>

<input type='checkbox' name='ProductA' value='Bird A1'>Bird A1

</td>

<td>

<input type='radio' name='ProductB' value='Cat B1'>Cat B1

</td>

<td>

<input type='checkbox' name='ProductC' value='Dog C1'>Dog C1

</td>

</tr>

<tr>

<td>

<input type='checkbox' name='ProductA' value='Bird A2'>Bird A2

</td>

<td>

<input type='radio' name='ProductB' value='Cat B2'>Cat B2

</td>

<td>

<input type='checkbox' name='ProductC' value='Dog C2'>Dog C2

</td>

</tr>

<tr>

<td>

<input type='checkbox' name='ProductA' value='Bird A3'>Bird A3

</td>

<td>

<input type='radio' name='ProductB' value='Cat B3'>Cat B3

</td>

<td>

<input type='checkbox' name='ProductC' value='Dog C3'>Dog C3

</td>

</tr>

</table>

<br />

<button onclick='print()'>Filter</button>

<button onclick='clearA()'>Clear</button>

<button onclick='onClickRetrieve()'>Retrieve</button>

<div style='margin-top:30px;' id='display'>

</div>

</body>

<script>

function print() {

var itemA = document.getElementsByName('ProductA');

var itemB = document.getElementsByName('ProductB');

var itemC = document.getElementsByName('ProductC');

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 newList = '';

newList = selectedItemA + selectedItemB + selectedItemC;

if (newList == '') {

disp.innerHTML = 'No Items selected';

localStorage.setItem('select', '');

} else {

disp.innerHTML = newList;

localStorage.setItem('select', newList);

}


}

function clearA() {

var itemA = document.getElementsByName('ProductA');

var itemB = document.getElementsByName('ProductB');

var itemC = document.getElementsByName('ProductC');

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 = '';

}

function onClickRetrieve() {

var lastVal = localStorage.getItem('select');

document.getElementById('display').innerHTML = localStorage.getItem('select');

var els = document.getElementsByTagName('input');

for (i = 0; i < els.length; i++) {

if (lastVal.indexOf(els[i].value) != -1) {

els[i].checked = true;

} else {

els[i].checked = false;

}

}

}

</script>

venereology answered 3 weeks ago
Next > < Previous

Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
How to validate Javascript form data? Here is the code. Can someone modify it so that...
How to validate Javascript form data? Here is the code. Can someone modify it so that all the information is validated? Thanks. <!DOCTYPE html> <html lang="en"> <head>    <title>Music Survey</title>    <meta charset="utf-8"> </head> <style>    legend { font-weight:bold;    }    </style> <body> <h1>Music Survey</h1> <form method="post" action=""> <label for="myname"><b>Name:</b></label>        <input type="text" name="myname" id="myname">        <br><br> <label for="myemail"><b>Email:</b></label>        <input type="email" name="myemail" id="myemail">        <br><br>   <fieldset> <legend>Select Your Favorite Types of Music:</legend> <input type="checkbox"...
Modify the code below to support specifying additional dice type in addition to a 6 sided...
Modify the code below to support specifying additional dice type in addition to a 6 sided dice. For example, the program could support six-sided, eight-sided, 10 sided die. HINTS: You will need to Create an enum type for the dice type and values Modify the parameter passing of some of the functions to pass the die type Adjust the actual code that simulates the die roll to generate a range of values appropriate to the user's selected die type. Think...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...
use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....
Please take the code below and add some javascript to it. Please use javascript inline. Please...
Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance HINT: add some fun widgets to the page index-css.html: <!DOCTYPE html> <html lang="en"> <head> <!-- title for web page --> <title>Index-CSS Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">...
C Programming: POSIX: Producer / Consumer Modify the code below so that the Producer.c file calculates...
C Programming: POSIX: Producer / Consumer Modify the code below so that the Producer.c file calculates the Fibonacci sequence and writes the sequence to the shared-memory object. The Consumer.c file should then output the sequence. Producer.c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <fcntl.h> #include <sys/shm.h> #include <sys/stat.h> #include <sys/mman.h> #include <zconf.h> int main() { /* The size (in bytes) of shared-memory object */ const int SIZE = 4096; /* The name of shared-memory object */ const char *Obj =...
Hi, I have this code so far and need to modify it so that the output...
Hi, I have this code so far and need to modify it so that the output does not print something like 2x^0 but instead will just print 2. Currently it prints 2x^0. I also am having a problem with the output of Polynomial 1 - Polynomial 2. If both coefficient values for the polynomials are equal instead of Polynomial 1 - Polynomial 2 = 0 it outputs nothing. Just Polynomial 1 - Polynomial 2 = For example if I input...
(Javascript) Modify the JavaScript file to implement a function named calculateTotalPrice. At the bottom of the...
(Javascript) Modify the JavaScript file to implement a function named calculateTotalPrice. At the bottom of the file are sample inputs and outputs to test your implementation. /* * The price per ticket depends on the number of tickets * purchased, there are 4 ticket pricing tiers. Given the * number of tickets return the total price, formatted to * exactly two decimal places with a leading dollar sign. * Tier 1: *   Minimum number of tickets: 1 *   Price per...
**** IN C++ **** 1) Modify the class pointerDataClass so the main function below is working...
**** IN C++ **** 1) Modify the class pointerDataClass so the main function below is working properly. Use deep copy. int main() { pointerDataClass list1(10); list1.insertAt(0, 50); list1.insertAt(4, 30); list1.insertAt(8, 60); cout<<"List1: " < list1.displayData(); cout<<"List 2: "< pointerDataClass list2(list1); list2.displayData(); list1.insertAt(4,100); cout<<"List1: (after insert 100 at indext 4) " < list1.displayData(); cout<<"List 2: "< list2.displayData(); return 0; } Code: #include using namespace std; class pointerDataClass { int maxSize; int length; int *p; public: pointerDataClass(int size); ~pointerDataClass(); void insertAt(int index,...
**** IN C++ **** 1) Modify the class pointerDataClass so the main function below is working...
**** IN C++ **** 1) Modify the class pointerDataClass so the main function below is working properly. Use shallow copy. int main() { pointerDataClass list1(10); list1.insertAt(0, 50); list1.insertAt(4, 30); list1.insertAt(8, 60); cout<<"List1: " < list1.displayData(); cout<<"List 2: "< pointerDataClass list2(list1); list2.displayData(); list1.insertAt(4,100); cout<<"List1: (after insert 100 at indext 4) " < list1.displayData(); cout<<"List 2: "< list2.displayData(); return 0; } Code: #include using namespace std; class pointerDataClass { int maxSize; int length; int *p; public: pointerDataClass(int size); ~pointerDataClass(); void insertAt(int index,...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT