PRACTICAL COMPUTER APPLICATION

11
Practical Programs – Hand Book

Instructions:
1. One exercise from Writer, Calc and CSS, Three exercises from HTML, and
Four exercises from JavaScript are to be practiced in the practical classes.
2. Ansewer to any one question from Practical Book with internal choice
3. Distribution of Marks
I. Internal 5 Marks
Assessment:
Record Book 5 Marks
II. External 15 Marks
Assessment:
(a) Writer or Calc – Procedure
10 Marks
HTML or CSS or JavaScript – Coding

(b) Execution & Output 5 Marks

Total 20 Marks

INDEX
Question
Sl. No. Program Name
Number
1 CA1 Open Office Writer - Formatting Invoice
2 CA2 Open Office Calc – Interest Calculation
3 CA3 HTML – Form Design
4 CA4 HTML – Height and Weight Table
5 CA5 HTML – Nested List
6 CA6 CSS – Formatting Webpage
7 CA7 JavaScript – Display Text
8 CA8 JavaScript – Multiplication Table
9 CA9 JavaScript – Display Weekdays in Words
10 CA10 JavaScript – Login Form
 CA1 – FORMATTING INVOICE
CA-1 Type the following Invoice in OpenOffice Writer and apply the formatting
features as given below:

Invoice
SAIRAM MEDICAL STORES
Mobile No : 9002416000 [Link]: 617
Mail Address : sairam@[Link] 70, New Avadi Road,
Chennai 600 010.
No: 70/162
M/s. Eswari Medical Stores, 23rd Nov 2017
No: 72, N.S.C. Bose Road,
Puduchery - 6210110

Quantity (Nos) Particulars Rate Amount

20 Johnson Baby Powder 25 500
10 Nestle Milk Powder 100 1000
5 Wood Wards Gripe Water 70 350
Total
Add: GST @ 3%
Net Payable

For Sriram Medical Stores

Sales Manager

• Use formula to calculate Total and Net Payable

Procedure
Step-1. OpenOffice Writer and choose Text document or File  New  Text Docu-
ment.
Step-2. Type the text and apply the format as per the given format.
Note: Select the required text before formatting.

Text Format Method

INVOICE Center and apply red Ctrl + E and choose Red color
from font color pallete or any
method.
SAIRAM MEDICAL Center and apply blue Ctrl + E and Blue color from
STORES font color pallete or any method.
Eswari Medical Bold Ctrl + B or any method.
Stores
 Step-3 Create a table using any one of the method Ctrl + F12 or Insert  Table or
Table  Insert  Table or Insert Table icon from toolbar. with 4 columns and 7 rows
Step–4. Enter the data as per the given format.
Step-5. Select first three columns in 5th Row and Right Click  Cell  Merge and
type as "Total"
Step-6. Repeat Step-5 for 7th Row, and type as "Net payable"
Step-7. To find the Total, Enter the following formula at Total  Amount Column as
=<D2>+<D3>+<D4> OR = Sum (<D2:D4>)
Step-8. To find the GST @ 3% Enter the formula as = <B5> *0.03
Step-9. To calculate Netpayable amount, Enter the formula as =<B5>+<D6>
Output

Invoice
SAIRAM MEDICAL STORES
Mobile No : 9002416000 [Link]: 617
Mail Address : sairam@[Link] 70, New Avadi Road,
Chennai 600 010.
No: 70/162
M/s. Eswari Medical Stores, 23rd Nov 2017
No: 72, N.S.C. Bose Road,
Puduchery - 6210110
Quantity (Nos) Particulars Rate Amount
20 Johnson Baby Powder 25 500
10 Nestle Milk Powder 100 1000
5 Wood Wards Gripe Water 70 350
Total 1850
Add: GST @ 3% 55.5
Net Payable 1905.5

For Sriram Medical Stores

Sales Manager

CA2 - INTEREST CALCULATION

CA-2 Create statement of interest using OpenOffice Calc with the following partic-
ulars:

Sara Ltd., sells goods. Their policy is to charge interest @ 2% p.a., for the number of
days. From the following data, find out the amount to be collected from each customer.
Assume 365 days in the year.
 Date of
Customer Sales Date of Sale NO. of days
settlement
Tharani 25000 10/04/2017 60
Mahalakshmi 14000 28/05/2017 30
Kumar 28000 14/07/2017 45
Arulmozhi 54000 03/08/2017 90

Procedure
Step -1. Open OpenOffice Calc and choose Spreadsheet or File  New  Spreadsheet.
Step -2. Type the Headings in cell A1 to E1 (Customer, Sales, Date of Sale, Number of
days and Date of settlement) as per the given data.
Step -3. In cell F1 and G1 type (Interest Amt and Amount to be paid) respectively.
Step -4. In cell E2 enter the formula = C2 + D2 to arrive the date of settlement and to the
remaining cells (E2 to E5). Use Edit  Fill  Down command
Step -5. In cell F2 enter the formula =ROUND((B2*2/100)*D2/365) to arrive the Interest
amount to the remaining cells (F2 to F5). Use Edit  Fill  Down command
Step -6. In cell G2 enter the formula = B2 + F2 to arrive the Amount to be paid to the
remaining cells (G2 to G5). Use Edit  Fill  Down command
Output

CA3 – FORM DESIGN

CA-3 Write an HTML code to design a form like the one shown below.
 Coding
<html>
<head>
<title> User Registration </title>
</head>
<body>
<h1 align = center> Registration Form </h1>
<form id=reg_form method = post action = " ">
User Name: <input type = text name=uname > <br><br>
Password: <input type = password name=pword1 > <br><br>
Re-type Password: <input type = password name=pword2 > <br><br>
Gender:
<input type = radio name=male value="M" > Male
<input type = radio name=female value="F" > Female
<h2 align=center> Additional Information </h2>
Optional Subject:
<select name=subj>
<option value = CT> Computer Technology
<option value = Paint> Painting
<option value = SG> Sports and Games
</select>
<br><br>
<input type = checkbox name=mail > Put me on mail list <br> <br>
<input type = reset value=Reset >
<input type = submit value=Submit >
</form>
</body>
</html>
Output
 CA4 - HEIGHT AND WEIGHT TABLE
CA-4 Write an HTML code to display the following.

Height and Weight

Name Class Height Weight

Mani XII - G 5'0" 45
Vasu XI - H 5'4" 49
Murali XI - B 5'1" 51
Pallavai XII - D 4'5" 50

Coding

<html>
<head>
<title> Height and Weight Table </title>
<head>
<body>
<table border=10>
<caption> Height and Weight </caption>
<tr>
<th width=40%> Name </th>
<th width=20%> Class </th>
<th width=20%> Height </th>
<th width=20%> Weight </th>
</tr>
<tr>
<td> Mani </td>
<td> XII – G </td>
<td> 5’0” </td>
<td> 45 </td>
</tr>
<tr>
<td> Vasu </td>
<td> XI – H </td>
<td> 5’4” </td>
<td> 49 </td>
</tr>
<tr>
<td> Murali </td>
<td> XI – B </td>
<td> 5’1” </td>
<td> 51 </td>
</tr>
<tr>
<td> Pallavai </td>
<td> XII - D </td>
<td> 4’5” </td>
<td> 50 </td>
</tr>
</table>
</body>
</html>
Output

Height and Weight

Name Class Height Weight

Mani XII - G 5'0" 45
Vasu XI - H 5'4" 49
Murali XI - B 5'1" 51
Pallavai XII - D 4'5" 50

CA5 - NESTED LIST

CA-5 Write an HTML code to create a webpage to display the following sets of
lists:

• Languages
1. Tamilnadu
o Tamil
a. Chennai
o Malayalam
b. Madurai
o Telugu
• Science
2. Andhra Pradesh
o Physics
a. Amaravathi
o Chemistry
b. Vijayawada
o Zoology
• Humanities
3. Kerala
o History
a. Thiruvananthapuram
o Commerce
b. Cochin
o Economics
 Coding </OL>
<UL>
<html> <LI> Languages
<head> <UL type=circle>
<title> Sets of Lists </title> <LI> Tamil
</head> <LI> Malayalam
<body> <LI> Telugu
<OL> </UL>
<LI> Tamilnadu <LI> Science
<OL type=a> <UL type=circle>
<LI> Chennai <LI> Physics
<LI> Madurai <LI> Chemistry
</OL> <LI> Zoology
<LI> Andhra Pradesh </UL>
<OL type=a> <LI> Humanities
<LI> Amaravathi <UL type=circle>
<LI> Vijayawada <LI> History
</OL> <LI> Commerce
<LI> Kerala <LI> Economics
<OL type=a> </UL>
<LI> Thiruvananthapuram </UL>
<LI> Cochin </body>
</OL> </html>

Output

Tamilnadu
Chennai
Madurai
Andhra Pradesh
Amaravathi
Vijayawada
Kerala
Thiruvananthapuram
Cochin
Languages
o Tamil
o Malayalam
o Telugu
Science
o Physics
o Chemistry
o Zoology
Humanities
History
Commerce
Economics
 CA6 - FORMATTING WEBPAGE

CA-6 Create a webpage as given description using CSS

Tamil

Tamil is a Dravidian language predominantly spoken by the Tamil people of India

and Sri Lanka, and by the Tamil diaspora, Sri Lankan Moors, Burghers, Douglas, and
Chindians. Tamil is an official language of two countries: Sri Lanka and Singapore.

It has official status in the Indian state of Tamil Nadu and the Indian Union
Territory of Puducherry. It is used as one of the languages of education in Malaysia,
along with English, Malay and Mandarin.

Tamil is spoken by significant minorities in the four other South Indian states of
Kerala, Karnataka, Andhra Pradesh and Telangana and the Union Territory of the
Andaman and Nicobar Islands. It is one of the 22 scheduled languages of India.

Description:

Element Font Style Alignment Color

H1 Arial Black - Center Border 2px

solid blue

P1 Century Bold - Red

P2 Boockman Old Style Italic - Blue

P3 Century Gothic - - Green

Note: Create two files. 1. [Link] and 2. [Link]

Coding -1 color : Red;
}
[Link] P2
H1 {
{ font-family: "Bookman Old Style";
font-family: "Arial Black"; font-style : Italic;
text-align:center; color : Blue;
border : 2px solid blue; }
} P3
P1 {
{ font-family: "Century Gothic";
font-family: "Century"; color : Green;
font-style : Bold; }
 Coding -2 It has official status in the Indian state of
[Link] Tamil Nadu
<html> and the Indian Union Territory of
<head> Puducherry.
<title> Tamil </title> It is used as one of the languages of educa-
<link rel="stylesheet" type="text/css" tion in Malaysia,
href="[Link]"> along with English, Malay and Mandarin.
</head> </P2> <br> <P3>
<body> Tamil is spoken by significant minorities in
<H1> Tamil </H1> the four other
<P1> South Indian states of Kerala, Karnataka,
Tamil is a Dravidian language Andhra Pradesh
predominant- ly spoken and Telangana and the Union Territory
by the Tamil people of India and Sri of the Andaman and
Lanka, and by the Nicobar Islands. It is one of the 22 sched-
Tamil diaspora, Sri Lankan Moors, Bur- uled languages of
ghers, Douglas, India.
and Chindians. Tamil is an official </P3>
language of two countries: </body>
Sri Lanka and Singapore. </html>
</P1> <br> <P2>
Output

Tamil
Tamil is a Dravidian language predominantly sopken
by the Tamil people of India and SriLankan Moors,
Burghers, Douglas, and Chindians. Tamil is an official
language of two countries: Sri Lanka and Singapore.

It has official status in the Indian state of Tamil Nadu

and the Indian Union Territory of Puducherry. It is used as
one of the languages of educatiooon in Malaysia, along with
English, Malay and Mandarin.

Tamil is spoken by significant minorities in the four

other south Indian states of Kerala, Karnataka, Andhra Pradesh
and Telangana and the Union Territory of the andaman and
Nicobar Islands. It is one of the 22 scheduled languages of
India.
 [Link]

CA7 - DISPLAY TEXT

CA-7 Create a webpage using JavaScript to display the following text.

Welcome to JavaScript
State Council of Educational Research and Training (SCERT),
Tamilnadu, Chennai.

Coding
<html>
<head>
<title> Display text using JavaScript </title>
</head>
<body align=center>
<p>
<script>
[Link] ("<h1 align=center>Welcome to JavaScript <br>");
[Link] ("State Council of Educational Research and Training (SCERT),<br>");
[Link] ("Tamilnadu, Chennai. </h1>");
</script>
</p>
</body>
</html>
Output

Welcome to JavaScript

State Council of Educational Research and

Training (SCERT), Tamilnadu, Chennai.
CA8 – MULTIPLICATION TABLE
CA-8 Create a webpage using JavaScript to display multiplication table by prompting
number of rows and columns.
Coding
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
359
 [Link]

if(rows == "" || rows == output = output + "<td>" + i*j + "</

null) rows = 10; td>";
if(cols== "" || cols== j = j+1;
null) cols = 10; }
createTable(rows, cols);
output = output + "</tr>";
function createTable(rows,
j = 1;
cols) }
{
var j=1; output = output + "</table>";
var output ="<table border='1' width='500' [Link](output);
cellspacing='0'cellpadding='5'>"; }
for(i=1;i<=rows;i++) </script>
{ </head>
output = output + "<tr>"; <body>
while(j<=cols) </body>
{ </html>

Output

1 2 3 4 5 6
2 4 6 8 10 12
3 6 9 12 15 18
4 8 12 16 20 24
5 10 15 20 25 30
6 12 18 24 30 36
7 14 21 28 35 46
8 16 24 32 40 48
9 18 27 36 45 54
10 20 30 40 50 60
11 22 33 44 55 66
12 24 36 48 60 72

CA9 - DISPLAY WEEKDAYS IN WORDS

CA-9 Create a webpage using JavaScript to display Weekday in words by getting
input as a number using switch.
360
Coding
<html>
<head>
<title> Weekday </title>
<script type="text/javascript">
var n=prompt("Enter a number between 1
and 7");
switch (n)
{
case (n="1"):
[Link]("Sunday");
break;
case (n="2"):
[Link]("Monday");
break;
case (n="3"):
[Link]("Tuesday"); break;
break; }
case (n="4"): </script>
[Link]("Wednesday"); </head>
break; </html>
case (n="5"):
[Link]("Thursday"); Output
break;
case (n="6"):
[Link]("Friday");
break;
case (n="7"):
[Link]("Saturday");
break;
default: Thursday

[Link]("Invalid Weekday");
CA10 - LOGIN FORM
CA-10 Create a Form using JavaScript to get username, password and address,
validate the inputs.
Coding <p align="center">
User Name:<input type="text"
<html>
id="t1"><br><br>
<head>
<script type="text/javascript"> Password:<input type="text"
function sub() id="t2"><br><br>
{ Confirm Password:<input
if([Link]("t1"). type="text" id="t3"><br><br>
value == "") Address:<textarea rows="2" cols="25"
alert("Please enter your name"); id="t4"></textarea><br><br>
else if([Link]("t2"). <input type="button" value="Submit"
value == "") on- click="sub()">
alert("Please enter a password"); <input type="reset" value="Clear All">
else if([Link]("t2"). </p>
value != [Link]("t3"). </form>
value) </body>
alert("Please enter correct password"); </html>
else if([Link]("t4").
value == "") Output
alert("Please enter your
address"); else
alert("Form has been submitted");
}
</script>
</head>
<body>
<form>

361