BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.1
Aim :- Write an algorithm, draw a flowchart and Write a JavaScript program to find-out the
Factorial of a Number.
Code :
<!DOCTYPE html> var fact=fact*i;
<html lang="en"> }
<head> document.write("Factorial of
<meta charset="UTF-8"> number"+fact);
<meta name="viewport" </script>
content="width=device-width, initial-
scale=1.0"> </head>
<title>Execution 1</title> <body>
<script type="text/javascript">
var n=parseInt(prompt("enter </body>
number")); </html>
var fact=1;
var i;
for(i=1;i<=n;i++)
{
Output :
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.2
Aim :- Write an algorithm, draw a flowchart and Write a JavaScript Program to Check
Number Is Positive, Negative or Zero.
Code :
<!DOCTYPE html> }
<html lang="en"> else if(n<0)
<head> {
<meta charset="UTF-8"> document.write("number is
<meta name="viewport" negative="+n);
content="width=device-width, initial- }
scale=1.0"> else
<title>Execution program 2</title> {
</head> document.write("given number is
<body> zero="+n);
<script> }
var n=parseInt(prompt("enter </script>
number"));
if(n>0) </body>
{ </html>
document.write("number is
positive="+n);
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.3
Aim :- . Write an algorithm, draw a flowchart and Write a JavaScript Program to Check the
Number Is Palindrome or Not.
Code :
<!DOCTYPE html> }
<html lang="en"> if(final==temp)
<head> {
<meta charset="UTF-8"> document.write("the inputed number
<meta name="viewport" is palindrone");
content="width=, initial-scale=1.0"> }
<title>Palindrone number</title> else{
<script> document.write("the inputed number
var n=parseInt(prompt("enter is not palindrone");
number")); }
var rem,temp,final=0; </script>
temp=n; </head>
while(n>0) <body>
{
rem=n%10; </body>
n=parseInt(n/10); </html>
final=final*10+rem;
Output :
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.4
Aim :- Write an algorithm, draw a flowchart and Write a JavaScript Program to Check
Number Is Prime or Not.
Code : {
<!DOCTYPE html> ch++
<html lang="en"> }
<head> }
<meta charset="UTF-8"> if(ch==0)
<meta name="viewport" {
content="width=device-width, initial- document.write("number is
scale=1.0"> prime="+n);
<title>number is prime or not </title> }
</head> else
<body> {
<script> document.write("number is not
var n=parseInt(prompt("enter prime="+n);
number")); }
var ch=0; </script>
for(var i=2;i<n;i++)
{ </body>
if(n%i==0) </html>
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.5
Aim :- Write an algorithm, draw a flowchart and Write a JavaScript program to print factors
of a inputted number.
Code :
<!DOCTYPE html> var fact=1;
<html lang="en"> for(var i=1;i<=n;i++)
<head> {
<meta charset="UTF-8"> if(n%1==0)
<meta name="viewport" {
content="width=device-width, initial- fact*=1;
scale=1.0"> document.write("<br>");
<title>program 5</title> document.write(i);
</head> }
<body> }
<script> </script>
var n=parseInt(prompt("Enter </body>
number:")) </html>
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.6
Aim :- Write an algorithm, draw a flowchart and Write a JavaScript Program to Print the
Following Pattern.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern</title>
</head>
<body>
<script>
var n=parseInt(prompt("enter number"));
for(i=0;i<=n-1;i++)
{
for(j=0;j<=i;j++)
{
document.write("*");
}
document.write("<br>");
}
</script>
</body>
</html>
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.7
Aim :- . Write an algorithm, draw a flowchart and Write a JavaScript Programme to Accept
Product Price, Quantity and GST and Calculate the Total Bill Amount.
Code :-
<!DOCTYPE html>
<html lang="en"> var total=p*q
<head>
<meta charset="UTF-8"> var GST=(total*g)/100
<meta name="viewport"
content="width=device-width, initial- var totalAmt=total+GST
scale=1.0">
<title>GST Percentage</title> document.write("<br>price="+p)
</head> document.write("<br>quantity="+q)
<body> document.write("<br>gst="+g)
<script type="text/javascript">
document.write("<br>total amount of
var p=parseInt(prompt("enter the bill="+totalAmt)
price:"));
var q=parseInt(prompt("enter the </script>
quantity:"));
var g=parseInt(prompt("enter the gst </body>
with percentile:")); </html>
Output :-
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.8
Aim: Create a webpage using HTML, CSS create a custom hover and focus effect for
navigation items, using CSS transformations.
Code:
<!DOCTYPE html> margin-left: 350px;
<html lang="en"> cursor: pointer;
<head> }
<meta charset="UTF-8"> Li:hover{
<meta name="viewport" background-color: aqua;
content="width=device-width, initial- color: black;
scale=1.0"> transform: skewY(20deg);
<title>Navigation Menu</title> }
<style> ul:hover{
ul background-color: rgb(255, 201,
{ 23);
height: 75px; } body{
width: 1502px; background-color: rgb(214, 170,
background-color: rgb(117, 70, 255);
245); }
} </style>
li{ </head>
list-style: none; <body>
display: block; <div id="Navigation">
float: left; <ul>
margin-top: 20px; <li class="hom">HOME</li>
font-size: 30px; <li>ABOUT</li>
padding-left: 20px; <li>DETAILS</li>
padding-right: 20px; <li>CONTACT US</li>
color: white; </ul>
cursor: pointer; </div>
} </body>
.hom{ </html>
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
BCCA-II(Sem-III) Component-I Session 2023-24
execution Program no.9
Aim Create a webpage using HTML, CSS create a list with floating headings for each
section.
Code:
<!DOCTYPE html> width:150px;/*This is for color:black;
<html lang="en"> making box around text*/ font-family:sans-serif;
<head> border-right:1px solid
<meta charset="UTF-8"> white;
<meta name="viewport" } }
content="width=device- </style>
width, initial-scale=1.0"> div ul a{ </head>
<title>Execution 9</title> color:white; <div>
</head> font-size:.5cm; <ul>
<body> text-align:center; <li><a
line-height:50px;/* this is href="#">Home</a>
<style type="text/css"> for making text in center <li><a
/* this is the style for div */ align note: it is same like to href="#">About
div{ already define height*/ Us</a></li>
width:100%; text-decoration:none; <li><a
height:50px; margin-left:50px; href="#">Help</a></li>
background-color:skyblue; } <li><a
} /*This is hide the text of href="#">Exit</a></li>
div ul { dropdown */ </ul>
list-style:none; </div>
}
div ul li:hover {
div ul li background-color:blue;
{ transform:skewY(20deg);
float:left;/* this is for float } </body>
the text to left*/ div ul li a:hover{ </html>
font-size:0.6cm;
Output:
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
Bcca:-ii sem(iii) comPonent-i session-2023-24
execution Program:-10
Aim:- create a webpage using html, css create a styled checkbox with animation on state
change .
Coding:-
<html> transform: height: 100vh;
<head> rotatex(90deg)rotatey align-items: center;
<style> (90deg) ; justify-items:
.c-checkbox > position: relative; center;
input[type=checkbox] top: 10px; user-select: none; -
{ } webkit-user-select:
width: 40px; height: .c-checkbox > div > none;
40px; i:nth-of-type(2){ -webkit-tap-
cursor: pointer; background: navy; highlight-color:
opacity: 0; right: 20px; transparent;
margin: 0; } }
appearance: none; - .c-checkbox > div > </style>
webkit-appearance: i:nth-of-type(3){ </head>
none; background: <body>
} darkslategray; <main>
.c-checkbox > div{ left: 20px; <div class=c-
display: grid; } checkbox>
pointer-events: input:checked + div{ <input
none; transform: rotatey( type=checkbox
transition: 180deg ); id=un>
transform .6s cubic- } <!-- cube design ↴ --
bezier(.8, .5, .2, 1.4); .c-checkbox{ >
transform-style: display: grid;
preserve-3d; width: 40px; height: <div><i></i><i></i><
} 40px; i></i><i></i></div>
.c-checkbox > div > *{ } </div>
grid-area: 1/1; .c-checkbox > *{ <label
} grid-area: 1/1; for=un>MBA</label>
.c-checkbox > div > }
i:first-child{ label{ <div class=c-
background: blue; font: 60px Girassol; checkbox>
transform: color: lime; <input
translatez( -10px ); type=checkbox
text-shadow: 2px 0
} id=deux checked>
blue;
.c-checkbox > div > <!-- cube design ↴ --
cursor: pointer;
i:last-child{ >
}
background: #ddd; main{
transform: <div><i></i><i></i><
display: grid; i></i><i></i></div>
translatez( 10px ); grid: repeat(5,
} </div>
70px) / 90px 1fr; <label
.c-checkbox > div > align-items: center;
i:nth-of-type(2), for=deux>M.Com.</l
width: max-content; abel>
.c-checkbox > div > }
i:nth-of-type(3){ body{
height: 20px; display: grid;
siDDHant raHuL KamBLe g.s coLLege oF commerce WarDHa
Bcca:-ii sem(iii) comPonent-i session-2023-24
<div class=c-checkbox> <!-- cube design ↴ -->
<input type=checkbox id=trois
checked> <div><i></i><i></i><i></i><i></i>
<!-- cube design ↴ --> </div>
</div>
<div><i></i><i></i><i></i><i></i> <label for=quatre>B. Com.</label>
</div> </main>
</div> </body>
<label for=trois>BCCA </label> </html>
<div class=c-checkbox>
<input type=checkbox id=quatre>
outPut:-
SIDDHANT RAHUL KAMBLE G.S COLLEGE OF COMMERCE WARDHA
