G. S.

Mandal`s
MIT POLYTECHNIC, ROTEGAON, VAIJAPUR

”ICONS AND LABELS”

Project Report
Submitted in partial fulfilment of the requirements for the 5THsemester
Diploma in Computer Engineering

For the Academic Year

2020-21

THORAT RAHUL HARIBHAU

[1907770066]

UNDER THE GUIDANCE OF

Prof. Y.K.DHOTRE
Lecturer
MIT Polytechnic, Rotegaon
Dept. of Computer Engg. & Technology

Page 1
 G. S. Mandal`s
MIT POLYTECHNIC, ROTEGAON, VAIJAPUR

CERTIFICKET
DEPARTMENT OF COMPUTER ENGINEERING
This is to certify that the micro project entitled “ON RADIO BUTTON” study
work carriedout by”Thorat Rahul Haribhau” [1907770066] in partial
fulfilment of Micro-project of Subjecthaving course code (22519)Computer
Engineering(CO5I) during year 2020-21.

____________________________ ________________________
Signature SUB. Techer Signature
Prof. Y.K.Dhotre Prof. A. S. Sardar
Lect. Dept of Comp Engg. Head of Department [CO]

__________________________
Signature of Principal
Prof. K.S. Patil
MIT Polytechnic
Seal
Of
ANNEXURE
Institute

Page 2
 ANNEXURE II
Evaluation Sheet for the Micro project
Academic Year: 2020-21
Name : Client Side Scripting
Course Code: 22519Semester:5th
Title of Project: ON RADIO BUTTON

Marks out of Marks out of

24 for 16 for
Total
Sr. performance performance
Student Name Out of
No. in group in oral /
40
Activity presentation
(D5 Col. 8) (D5 Col. 9)
1 THORAT RAHUL HARIBHAU

INDEX
Page 3
Sr.no. Content Page No.

1 Introduction

2 Construction

3 Output

4 Conclusion

5 Reference

Micro-Project Report

Page 4
 ‘Write a JavaScript code to create 3 radio buttons to select Country
names India,U.S , china and option list t5o display name cities base
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.

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
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.
Page 5
 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.

Page 6
<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="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
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
<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 :
 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.