A

MICROPROJECT REPORT
ON
‘Write a JavaScript code to create 3 radio buttons to select Country names-
India, U.S, China and one option list to display name Cities. Based on Country
selection the option list must get changed’

SUBMITTED
BY

Roll No Name of Group Members

45 Aniruddha Pawar
46 Prayush Ghule
47 Kunal Pawar

Under Guidance of :
Mrs. S.M.Mate

Diploma Course in Computer Technology

(As per directives of I scheme)

Sinhgad Technical Education Society’s

SOU.VENUTAI CHAVAN POLYTECHNIC, PUNE – 411051.
ACADEMIC YEAR: 2020 – 2021
 Maharashtra State
Board of technical Education

Certificate
This is to certify that Mr. Pawar Aniruddha Prakash with Roll
No. 45 of Fifth Semester of Diploma in Computer Technology
of Institute Sou. Venutai Chavan Polytechnic (Code : 0040) has
successfully completed the Micro-Project in Client Side
Scripting Language (22519) for the academic year 2020-2021.

Place: SVCP, Pune Enrollment No: 1700400169

Date: Exam Seat No:

Mrs. S M Mate Mrs. A V Kurkute Dr. M S Jadhav

Subject Teacher Head of the Department Principal
 Maharashtra State
Board of technical Education

Certificate
This is to certify that Mr. Ghule Prayush Sopan with Roll No.
45 of Fifth Semester of Diploma in Computer Technology of
Institute Sou. Venutai Chavan Polytechnic (Code : 0040) has
successfully completed the Micro-Project in Client Side
Scripting Language (22519) for the academic year 2020-2021.

Place: SVCP, Pune Enrollment No: 1700400099

Date: Exam Seat No:

Mrs. S M Mate Mrs. A V Kurkute Dr. M S Jadhav

Subject Teacher Head of the Department Principal
 Maharashtra State
Board of technical Education

Certificate
This is to certify that Mr. Pawar Kunal Shravan with Roll No.
46 of Fifth Semester of Diploma in Computer Technology of
Institute Sou. Venutai Chavan Polytechnic (Code : 0040) has
successfully completed the Micro-Project in Client Side
Scripting Language (22519) for the academic year 2020-2021.

Place: SVCP, Pune Enrollment No: 1700400101

Date: Exam Seat No:

Mrs. S M Mate Mrs. A V Kurkute Dr. M S Jadhav

Subject Teacher Head of the Department Principal
 Annexure -1
Part A – Micro-Project Proposal
‘Write a JavaScript code to create 3 radio buttons to select Country names-India, U.S,
China and one option list to display name Cities. Based on Country selection, the option list
must get changed’

1.0 Aim of the Micro-Project

To create a code that generates 3 radio buttons to select country names & one option list
to display name of cities, based on country selection an option list must get changed.

2.0 Course Outcomes Addressed

 Implemented Arrays and functions in Java script.
 Create event based web forms using Jana script.

3.0 Proposed Methodology

 We will focus on the materials we need, as well as the instructions and sort it out in a manner
which will expedite different responsibilities of the team members.
 Get information about the Arrays, Functions, & form elements and why they are used.
 Develop a code to option list which get changed according to selection of radio buttons.
 Test the code and remove errors if any.
 Prepare a report on the topic and the developed code.

4.0 Action Plan

Sr. no Details of activity Planned Planned Name of Responsible

start date finish date Team Members
1 Searching the topic for 27/08/2020 10/09/2020 Aniruddha Pawar
micro-project Prayush Ghule
Kunal Pawar
 2 Choosing the topic for 17/09/2020 24/09/2020 Aniruddha Pawar
micro-project Prayush Ghule
Kunal Pawar
3 Searching the information 24/09/2020 01/10/2020 Aniruddha Pawar
on the topic Prayush Ghule
Kunal Pawar
4 Working on the code of the 08/10/2020 12/11/2020 Aniruddha Pawar
given topic Prayush Ghule
Kunal Pawar

5 Testing and correcting the 12/11/2020 16/11/2020 Aniruddha Pawar

code Prayush Ghule
Kunal Pawar
6 Preparing the report 16/11/2020 24/11/2020 Aniruddha Pawar
Prayush Ghule
Kunal Pawar
7 Making changes and 24/11/2020 27/11/2020 Aniruddha Pawar
corrections in the report Prayush Ghule
Kunal Pawar
8 Final submission 30/11/2020 30/01/2021 Aniruddha Pawar
Prayush Ghule
Kunal Pawar

5.0 Resources Required

Sr. Name of resource or Specification/Function Qty. Remark

No material
1 Computer System 4 GB RAM, 1
Windows 8.1 OS
2 Notepad Text editor 1

3 Browser Google Chrome 1

Names and Roll nos. of Team Members

Sr. no Name Roll no

1 Aniruddha Pawar 45
2 Prayush Ghule 45
3 Kunal Pawar 46
CSS-(22519) Code that changes option list dynamically on radio button selection

Annexure II
Micro-Project Report
‘Write a JavaScript code to create 3 radio buttons to select Country names-
India, U.S, China and one option list to display name Cities. Based on Country
selection, the option list must get changed’

1.0 Rationale

A JavaScript used to build interactive web pages and features that are found on many
professional web sites. As a result we want to develop a web page displaying option list and
radio buttons in given problem statement. To achieve desired output we need to use array,
function, form & form elements. Appropriate use of functions and controls results in user
friendly, interactive, and attractive web page.

2.0 Aim of the Micro-Project

To create a code that changes option list dynamically according to checkbox selection.

3.0 Course Outcomes Achieved

 Created event based web forms using JavaScript

 Implemented Arrays and functions in JavaScript.

4.0 Literature Review

Form elements [Radio Buttons (India, U.S, China), Select] are used to create web page.
When we trigger form events (onclick, onselect) which we have to mention in the element’s
attribute. Events responds according to code return in them. After execution of function we
can see the change in the option list.
Form elements (Radio buttons, Buttons) are used to call the function. An after performing
task on form elements function gets called & user can see the change in the option list with.

SVCP/TYCM Page 7
CSS-(22519) Code that changes option list dynamically on radio button selection

5.0 Actual Methodology Followed

 We focused on the materials we needed, as well as the instructions and sorted it out in a
manner which will expedite different responsibilities of the team members.
 Gathered information about Arrays, Functions, & form elements and why they are used.
 Developed a code to generate a dynamically changing option list.
 Tested the code.
 Prepared a report.
 Checked for any further changes to be done in the project.
 Created the final report of the project.

6.0 Actual Resources Used

Sr. Name of resource or Specification/Function Qty. Remark

No material
1 Computer System 4GB RAM, 1
Windows 10 OS
2 Notepad Text editor 1

3 Browser Google Chrome 1

7.0 Outputs of the Micro-Project

To convert an option list dynamically, follow the steps given below −

Step 1: Create a Form using elements

Create form (Web design & components to display) using form elements. As mentioned
in the project topic we have to created web page displaying 3 radio buttons and one option (Drop
Down) list. Radio buttons (India, U.S, China) in order to take the input form user, option list to
show output according to the user’s selection (Radio Button).Option list gets changed according
to country selection.

SVCP/TYCM Page 8
CSS-(22519) Code that changes option list dynamically on radio button selection

<form name="f1">
<input type="radio" name="r1" value="Country1" onclick="c(this.value)">India
<input type="radio" name="r1" value="Country2" onclick="c(this.value)">US
<input type="radio" name="r1" value="Country3" onclick="c(this.value)">China
<select name="Cities" size="5">
<option value="1">City1</option>
<option value="2">City2</option>
<option value="3">City3</option>
<option value="4">City4</option>
<option value="5">City5</option>
</select>
</form>

Step 2: Declare a Function

Use of function in this code to catch user input (RadioButton selection) and respond
according to input. Inside the function we have code written for each radio button selection.
Function will change the option (Drop Down) list with name of cities according to selection of
country (Radio Button).

function c(a)

Step 3: Output according to input

Option (Drop Down) list is get changed as per the selection of radio buttons, if you select
India (Radio button) option list will show 5 cities from India and same for other two buttons also
option list will show the cities from country.

SVCP/TYCM Page 9
CSS-(22519) Code that changes option list dynamically on radio button selection

Code :

<html>
<head>
<script>
function c(a)
{
with(document.forms.f1)
{
if(a =="Country1")
{
Cities[0].text="Delhi"
Cities[0].value=1
Cities[1].text="Mumbai"
Cities[1].value=2
Cities[2].text="Pune"
Cities[2].value=3
Cities[3].text="Kochi"
Cities[3].value=4
Cities[4].text="Manipur"
Cities[4].value=5
}
if(a =="Country2")
{
Cities[0].text="New York"
Cities[0].value=1
Cities[1].text="San Francisco"
Cities[1].value=2

SVCP/TYCM Page 10
CSS-(22519) Code that changes option list dynamically on radio button selection

Cities[2].text="Chicago"
Cities[2].value=3
Cities[3].text="Washington, D.C"
Cities[3].value=4
Cities[4].text="Philadelphia"
Cities[4].value=5
}
if(a =="Country3")
{
Cities[0].text="Beijing"
Cities[0].value=1
Cities[1].text="Shanghai"
Cities[1].value=2
Cities[2].text="Shenzhen"
Cities[2].value=3
Cities[3].text="Wuhan"
Cities[3].value=4
Cities[4].text="Chongqing"
Cities[4].value=5
}
}
}
</script>
</head>
<body>
<form name="f1">
<input type="radio" name="r1" value="Country1" onclick="c(this.value)">India
<input type="radio" name="r1" value="Country2" onclick="c(this.value)">US

SVCP/TYCM Page 11
CSS-(22519) Code that changes option list dynamically on radio button selection

<input type="radio" name="r1" value="Country3" onclick="c(this.value)">China<br><br>

<select name="Cities" size="5">
<option value="1">City1</option>
<option value="2">City2</option>
<option value="3">City3</option>
<option value="4">City4</option>
<option value="5">City5</option>
</select>
</form>
</body>
</html>
Output of the code :

SVCP/TYCM Page 12
CSS-(22519) Code that changes option list dynamically on radio button selection

8.0 Skills Developed

 We studied Arrays, Functions, & form elements and why they are used.
 We also learnt about the different events and there use in form elements as attribute.

9.0 Applications of this Micro-Project

The application of this micro project is that we can utilize the code to generate dynamically
changing option list.

SVCP/TYCM Page 13