Web Technology Practical Assignment
This assignment contains basic HTML and JavaScript programs. Each program accepts input
from the user and displays the result using simple scripting techniques.
1. Program to Find Total Surface Area of a Cuboid
Aim:
To create a JavaScript program to calculate the total surface area of a cuboid.
Formula:
Total Surface Area = 2(lb + bh + hl)
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Total Surface Area of Cuboid</h3>
Length: <input type="number" id="l"><br><br>
Breadth: <input type="number" id="b"><br><br>
Height: <input type="number" id="h"><br><br>
<button onclick="calculate()">Calculate</button>
<p id="result"></p>
<script>
function calculate() {
let l = [Link]("l").value;
let b = [Link]("b").value;
let h = [Link]("h").value;
let area = 2 * (l*b + b*h + h*l);
[Link]("result").innerHTML = "Total Surface Area = " + area;
</script>
</body>
</html>
Output:
Displays the total surface area of the cuboid after entering length, breadth and height.
2. Program to Accept Number and Display Square
Aim:
To write a JavaScript program to accept a number and display its square.
Code:
<!DOCTYPE html>
<html>
<body>
Enter Number:
<input type="number" id="num">
<button onclick="square()">Find Square</button>
<p id="ans"></p>
<script>
function square(){
let n = [Link]("num").value;
let result = n * n;
[Link]("ans").innerHTML = "Square = " + result;
</script>
</body>
</html>
Output:
Displays the square of the entered number.
3. HTML Form for Doctor Details
Aim:
To create an HTML form to accept doctor information.
Code:
<!DOCTYPE html>
<html>
<body style="background-color:green">
<form>
Honorific:
<select>
<option>Mr.</option>
<option>Ms.</option>
</select>
<br><br>
Doctor Name:
<input type="text" maxlength="50" required>
<br><br>
Degree:
<input type="radio" name="degree"> MBBS
<input type="radio" name="degree"> BHMS
<input type="radio" name="degree"> BUMS
<br><br>
Email:
<input type="email">
<br><br>
Telephone:
<input type="tel">
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
A form with dropdown, radio buttons and input fields.
4. Program to Multiply Number by 3
Aim:
To write a JavaScript program that multiplies an entered integer by 3.
Code:
<!DOCTYPE html>
<html>
<body>
Enter Number:
<input type="number" id="num">
<button onclick="multiply()">Multiply</button>
<p id="result"></p>
<script>
function multiply(){
let n = [Link]("num").value;
let ans = n * 3;
[Link]("result").innerHTML = "Result = " + ans;
</script>
</body>
</html>
5. Program to Find Length of a String
Aim:
To write a JavaScript program to calculate the length of a string.
Code:
<!DOCTYPE html>
<html>
<body>
Enter Text:
<input type="text" id="text">
<button onclick="lengthCheck()">Check Length</button>
<p id="result"></p>
<script>
function lengthCheck(){
let str = [Link]("text").value;
[Link]("result").innerHTML = "Length = " + [Link];
</script>
</body>
</html>
6. Program to Check Positive or Negative Number
Aim:
To write a JavaScript program to check whether a number is positive or negative.
Code:
<!DOCTYPE html>
<html>
<body>
Enter Number:
<input type="number" id="num">
<button onclick="check()">Check</button>
<p id="result"></p>
<script>
function check(){
let n = [Link]("num").value;
if(n > 0)
[Link]("result").innerHTML = "Positive Number";
else if(n < 0)
[Link]("result").innerHTML = "Negative Number";
else
[Link]("result").innerHTML = "Zero";
</script>
</body>
</html>