GOVERNMENT POLYTECHNIC AMBAD

DEPARTMENT OF INFORMATION TECHNOLOGY

(CLIENT SIDE SCRIPTING LANGUAGE)

MICRO PROJECT 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.

FOR THE AWARD OF DIPLOMA IN INFORMATION TECHNOLOGY

(IT, SEM-V)

UNDER THE GUIDANCE OF

MR. SANAP SIR

SUBMITTED BY

STUDENT NAME ENROLL MENT NO.

1. Rushikesh Nidhonkar 1911620217
2. Pankaj Marathe 1911620218
3. Om Pophale 1911620212
4. Komal Jadhav 1911620383
5. Vaishnavi Kanade 1911620390
 CERTIFICATE

GOVERNMENT POLYTECHNIC AMBAD

DEPARTMENT OF INFORMATION TECHNOLOGY

(CSS)

This is to certify that the Micro-project entitled 3 RADIO BUTTONS USING

JAVASCRIPT being submitted herewith For the Award of Diploma in

INFORMATION TECHNOLOGY of the Institute Government Polytechnic,

Ambad (1162) MAHARASHTRA STATE BOARD AND TECHNICAL
EDUCATION (MSBTE) Fifth Semester 2021-2022 for the completion of the
course CLIENT SIDE SCRIPTING LANGUAGE.

This Micro-project completed under the supervision of MR. SANAP

SIR.(Lecturer Of CSS)

MICRO PROJECT GUIDE HEAD OF DEPARTMENT PRINCIPAL

PLACE: Ambad
Date:
 DECLARATION

We, the undersigned, hereby declare that the project entitled 3 RADIO
BUTTONS USING JAVASCRIPT is written and submitted by us to
GOVERNMENT POLYTECHNIC AMBAD during year 2021-2022,

First semester for partial fulfilment of the „MICRO PROJECT’ requirement of

CLIENT SIDE SCRIPTING LANGUAGE subject under Maharashtra State
Board Of Technical Education Mumbai Curriculum, under the guidance of MR.
SANAP SIR declare that is our original work.

NAME SIGNATURE

1. RUSHIKESH NIDHONKAR
2. PANKAJ MARATHE
3. OM POPHALE
4. KOMAL JADHAV
5. VAISHNAVI KANADE
 INDEX

SR.NO NAME OF TOPIC

1 AIM OF THE MICRO PROJECT
2 COURSE OUTCOME ADDRESSED
3 PROPOSED METHODOLOGY
4 ACTION PLAN
5 RESOURCES REQUIRED
6 RATIONALE
7 AIM OF THE PROJECT
8 COURSE OUTCOME ACHIEVED
9 LITERATURE REVIEW
10 ACTUAL METHODOLOGY FOLLOWED
11 ACTUAL RESOURCES USED
12 OUTPUTS
13 SKILLS DEVELOPED
14 APPLICATION
 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.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.Course Outcomes Addressed

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

3.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.Action Plan

Sr. no Details of activity Planned Planned Name of Responsible

start date finish date Team Members
1 Searching the topic for 13/08/2021 10/09/2021 Om Pophale
micro-project Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
 2 Choosing the topic for 17/09/2021 24/09/2021 Om Pophale
micro-project Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
3 Searching the information 24/09/2021 01/10/2021 Om Pophale
on the topic Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
4 Working on the code of the 08/10/2021 12/11/2021 Om Pophale
given topic Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
5 Testing and correcting the 12/11/2021 16/11/2021 Om Pophale
code Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
6 Preparing the report 16/11/2021 24/11/2021 Om Pophale
Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
7 Making changes and 24/11/2021 27/11/2021 Om Pophale
corrections in the report Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav
8 Final submission 30/11/2021 30/12/2021 Om Pophale
Rushikesh Nidhonkar
Pankaj Marathe
Vaishnavi Kanade
Komal Jadhav

5.0 Resources Required

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

No material
1 Computer System 4 GB RAM, 1
Windows 10 OS
2 Sublime Text 3 Text editor 1
3 Google Chrome Browser 1
 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.

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

7.Aim of the Micro-Project

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

selection.

8.Course Outcomes Achieved

 Created event based web forms using JavaScript

 Implemented Arrays and functions in JavaScript.

9.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. 5.0

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

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

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

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

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="Mum
bai" Cities[1].value=2
Cities[2].text="Pune"
Cities[2].value=3
Cities[3].text="Koch
i" Cities[3].value=4
Cities[4].text="Mani
 pur"
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

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="Shangh
ai" Cities[1].value=2
Cities[2].text="Shenzh
en" Cities[2].value=3
 Cities[3].text="Wuhan"
Cities[3].value=4
Cities[4].text="Chongq
ing" 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

<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 :
13.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.

14.Applications of this Micro-Project

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