Scribd
Upload
12 views17 pages

Satyam_2020CA081Web 9)

The document consists of a web programming assignment that includes multiple JavaScript tasks such as creating a simple calculator, calculating squares and cubes of numbers, prompting for a user's name, finding the left-most vowel in a string, and calculating average marks to determine grades. Each task is accompanied by HTML and JavaScript code snippets demonstrating the implementation. The assignment is designed for students to practice their web programming skills.

Uploaded by

bmsatyam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views17 pages

Satyam_2020CA081Web 9)

The document consists of a web programming assignment that includes multiple JavaScript tasks such as creating a simple calculator, calculating squares and cubes of numbers, prompting for a user's name, finding the left-most vowel in a string, and calculating average marks to determine grades. Each task is accompanied by HTML and JavaScript code snippets demonstrating the implementation. The assignment is designed for students to practice their web programming skills.

Uploaded by

bmsatyam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Programming Assignment No - 9

Name: Satyam Dwivedi


Registration No: 2020CA081

Q1. Write A JAVAScript to design A simple cAlculAtor to


perform the following operAtions: sum, product, difference
And quotient.
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator using HTML, CSS and Js</title>

<!-- CSS property to create interactive calculator interface -->


<style>
/* Style to set the title of calculator */
.title {
margin-bottom: 10px;
padding: 5px 0;
font-size: 20px;
font-weight: bold;
text-align: center;
width: 447px;
color: black;
border: solid black 2px;
}

/* Set the button style */


#btn {
width: 100%;
height: 40px;
font-size: 30px;
}

input[type="button"] {
background-color: rgb(196, 196, 196);
color: black;
border: solid black 2px;
width: 100%;
}

/* Set input textarea */


input[type="text"]
{ background-color:
white; border: solid
black 2px; width: 100%;
}
</style>

<script>
/* Creating function in HTML for backspace operation */
function backspace(calc) {
size = calc.display.value.length;
calc.display.value = calc.display.value.substring(0, size - 1);
}

/* Creating function to calculate result */


function calculate(calc) {
/* Check if function include ! character then
calculate factorial of number */
if (calc.display.value.includes("!"))
{ size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size - 1));
f = 1;

for (i = 2; i <= n; i++) f = f * i;


calc.display.value = f;
} else if (calc.display.value.includes("%")) {
/* If function include % character then calculate
the % of number */
size = calc.display.value.length;
n = Number(calc.display.value.substring(0, size - 1));
calc.display.value = n / 100;
} else calc.display.value = eval(calc.display.value);
/* Otherwise evaluate and execute output */
}
</script>
</head>

<body>
<div class="title">Simple Calculator</div>

<form name="calc">
<table id="calc" border="2">
<tr>
<td colspan="5">
<input
id="btn"
name="display"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
type="text"
/>
</td>
</tr>

<tr>
<td>
<input
id="btn"
type="button"
value="1"
OnClick="calc.display.value+='1'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="2"
OnClick="calc.display.value+='2'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="3"
OnClick="calc.display.value+='3'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="C"
OnClick="calc.display.value=''"
/>
</td>
<td>
<input
id="btn"
type="button"
value="<-"
OnClick="backspace(this.form)"
/>
</td>
<td>
<input
id="btn"
type="button"
value="="
OnClick="calculate(this.form)"
/>
</td>
</tr>

<tr>
<td>
<input
id="btn"
type="button"
value="4"
OnClick="calc.display.value+='4'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="5"
OnClick="calc.display.value+='5'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="6"
OnClick="calc.display.value+='6'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="-"
OnClick="calc.display.value='-'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="%"
OnClick="calc.display.value+='%'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="cos"
OnClick="calc.display.value='Math.cos('"
/>
</td>
</tr>

<tr>
<td>
<input
id="btn"
type="button"
value="7"
OnClick="calc.display.value+='7'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="8"
OnClick="calc.display.value+='8'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="9"
OnClick="calc.display.value+='9'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="*"
OnClick="calc.display.value+='*'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="n!"
OnClick="calc.display.value+='!'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="sin"
OnClick="calc.display.value='Math.sin('"
/>
</td>
</tr>

<tr>
<td>
<input
id="btn"
type="button"
value="."
OnClick="calc.display.value+='.'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="0"
OnClick="calc.display.value+='0'"
/>
</td>

<td>
<input
id="btn"
type="button"
value=","
OnClick="calc.display.value+=','"
/>
</td>

<td>
<input
id="btn"
type="button"
value="+"
OnClick="calc.display.value+='+'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="/"
OnClick="calc.display.value+='/'"
/>
</td>

<td>
<input
id="btn"
type="button"
value="tan"
OnClick="calc.display.value='Math.tan('"
/>
</td>
</tr>
</table>
</form>
</body>
</html>
Q2. Write A JAVAScript thAt cAlculAtes the squAres And cubes of
the numbers from 0 to 10 And outputs HTML text thAt displAys
the resulting vAlues in An HTML tAble formAt.

<!DOCTYPE HTML>
<html>
<head>
<title>Square and Cubes</title>
<style>
table,tr, td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color: rgb(255, 233, 109);
}
table { margin: auto; }
</style>
<script>
document.write( "<table><tr><th colspan='3'> NUMBERS FROM 0 TO 10 WITH THEIR
SQUARES AND CUBES </th></tr>" );
document.write( "<tr><td>Number</td><td>Square</td><td>Cube</td></tr>" );
for(var n=0; n<=10; n++)
{
document.write( "<tr><td>" + n + "</td><td>" + n*n + "</td><td>" + n*n*n
+ "</td></tr>" ) ;
}
document.write( "</table>" ) ;
</script>
</head>
</html>
O Quare and Cubes

C @ 127.0.0,1:5500/Ques2.html

i
2 4
3 9 27

6 36

Sl2
BJ 729
Q3. Write A JAVA script to prompt for user’s nAme And displAy it
on the
screen.

<!DOCTYPE html>
<html>
<head>
<title>Name Prompt</title>
</head>
<style>
* {
margin: 10px;
padding: 5px;
}
body {
background-color: rgb(166, 215, 243);
}
</style>
<body>

<h2>The prompt() Method</h2>

<p>Click the button to enter you name!</p>

<button onclick="myFunction()">Click me!</button>

<p id="demo"></p>

<script>
function myFunction() {
let person = prompt("Please enter your name", "Harry Potter");
if (person != null)
{ document.getElementById("demo").innerHTML
= "Hello " + person + "! How are you
today?";
}
}
</script>

</body>
</html>
2 0 1 Z7.0.0 1. fi 0y Ot es1. ntm I

The prom 0 Method


Q4. Develop And demonstrAte A HTML5 file thAt includes
JAVAScript script thAt uses functions for the following
problems:

a) PArAmeter: A string

b) Output: The position in the string of the left-most vowel

c) PArAmeter: A number

d) Output: The number with its digits in the reverse order

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Left Most Vowel/ Reverse Number</title>
</head>
<style>
* {
margin: 10px;
padding: 5px;
}
body {
background-color: rgb(166, 215, 243);
}
</style>
<script>
var a = prompt("Enter The Query (Number: reverse; String: leftmost vowel
pos.)"),b = parseInt(a),z=0;
if(b) {
while(b>0)
var r= b%10, z= z*10+r, b = Math.floor(b/10);
document.write("Entered Query : "+ a +"<br> Given Number In Reverse Order : "+
z);
}
else {
a = a.search(/[aeiouAEIOU]/);
document.write("The First Occurence Of Vowel is at : "+ (a+1));
}
</script>

</html>
Q5. Write A jAVA script progrAm which compute, the AVerAge

mArks of the following Students then this AVerAge is used to


determine the corresponding grAde.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Avg Marks</title>
</head>
<style>
* {
margin: 10px;
padding: 5px;
}
body {
background-color: rgb(196, 196, 196);
}
</style>
<body>
<div class="avg-marks">
<div>
<label for="marks"> Marks of the sutdent</label>
<input type="text" id="marks" name="marks" disabled size="50" />
</div>
<div>
<label for="avg">Average</label>
<input type="text" id="avg" name="avg" disabled size="50" />
</div>
<div>
<label for="grade"> Grade</label>
<input type="text" id="grade" name="grade" disabled size="50" />
</div>
<button onclick="avg()">Calculate Avg and Grade</button>
</div>
</body>
<script>
function avg() {
let marks = [98, 89, 87, 99, 98];
document.getElementById("marks").value = marks;
let sum = 0;
for (let i = 0; i < marks.length; i++)
{ sum += marks[i];
}
let avg = (1.0 * sum) / marks.length;
document.getElementById("avg").value = avg;

let grade = "";


if (avg >= 80) grade = "A";
else if (avg < 80 && avg >= 70) grade = "B";
else if (avg < 70 && avg >= 50) grade = "C";
else grade = "D";

document.getElementById("grade").value = grade;
}
</script>
</html>

You might also like