MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION MUMBAI

A
PROJECT REPORT ON
“ Creating webpage with checkbox “
UNDER THE GUIDANCE OF
“Mrs.S.R.Salokhe”

DEPARTMENT OF Computer ENGINEERING

DR. D. Y. PATIL POLYTECHNIC,
KASABA BAWADA, KOLHAPUR
SEMESTER - I
YEAR: - 2021-22
SUBMITTED BY:-
1) Avnish Chandrakant bhoasle Roll No 3125
2) Avaneesh Makarand Desai Roll No 3126
3) Sanjeet Indrajeet Ingavale Roll No 3127
4) Yajurvendra Sunil Desai-Patil Roll No 3128
 Certificate

This is to certify that Mr. /Ms. ………………G-7………………………………………………………………………..

Roll No.3125,3126,3127,3128 of 5th Semester of Diploma in…Computer Engineering…………….

……………………of Institute, Dr. D. Y. Patil Polytechnic (Code: 0539) has completed the

Micro Project satisfactorily in Subject - …...CSS........ (22519) for the academic year 2022-

2023as prescribed in the curriculum.

Place: Kolhapur Enrollment No : ……………………………………..

Date : ……………………… Exam. Seat No: ………………………………………….

Subject Teacher Head of the Department Principal

 ACKNOWLEDGMENT

The success & find outcome of this project required a lot of guidance &
assistance from many people and I am extremely privileged to have got all
along the completion of our project. All that we have done is only due to such
supervision & assistance & I would not forget to thanks them.

I owe my deep gratitude to our project guide “Mrs.S.R.Salokhe”

who took keen interest on our project work & guided us all along, till the
completion of our project work by providing all the necessary Information for
developing a good system.

I am thankful to & fortunate enough to get constant encouragement, support

& guidance form all teaching staffs of Basic Science which help us in successful
completing our project work.

Date:
Place: Kolhapur.
 INDEX

Sr No. Title Content Page No

1 Introduction

2 Aim Of Project

3 Course Outcomes

4 Literature Review

5 Actual Methodology Used

6 Source Code & Output

7 Conclusion
Introduction

JavaScript is a very powerful client-side scripting language. JavaScript is

used mainly for enhancing the interaction of a user with the webpage. In other
words, you can make your webpage more lively and interactive with the help
of JavaScript. JavaScript is also being used widely in game development and
Mobile application development.
A JavaScript used to build interactive web pages and features that are found
on many professional web sites.
JavaScript contains a standard library of objects, such as Array, Date, and
Math, and a core set of language elements such as operators, control
structures, and statements. Core JavaScript can be extended for a variety of
purposes by supplementing it with additional objects; for example:
• Client-side JavaScript extends the core language by supplying objects
to control a browser and its Document Object Model (DOM). For example,
client-side extensions allow an application to place elements on an HTML
form and respond to user events such as mouse clicks, form input, and page
navigation.
• Server-side JavaScript extends the core language by supplying objects
relevant to running JavaScript on a server. For example, server-side
extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another of the application,
or perform file manipulations on a server.
Aim of the Project

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

selection.

Course Outcomes
1. Created event-based web forms using JavaScript
2. Implemented Arrays and functions in JavaScript.

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.
 Actual Methodology Used
 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.
 Checked for any further changes to be done in the project.
 Output of the program
 Conclusion

Actual Resources Used

Sr Name of resource Specification/ Qty. Remark

Function
No or material

1 Computer System 4GB RAM, 1

Windows 11 OS
2 Notepad Text editor 1
3 Browser Google Chrome 1
Source Code
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">State1</option>
<option value="2"> State2</option>
<option value="3"> State3</option>
<option value="4"> State4</option>
<option value="5"> State5</option>
</select>
</form>
Step 2: Declare a Function
Use of function in this code to catch user input (Radio Button
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>
<title>css</title>
<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">State1</option>
<option value="2">State2</option>
<option value="3">State3</option>
<option value="4">State4</option>
<option value="5">State5</option>
</select>
</form>
</body>
</html>

Output Of the Code

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

 We have created Webpage dynamically.

Reference
https://www.stackoverflow.com
https://www.javatpoint.com