Calculate Area of Triangle,circle,rectangle
<!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>Document</title>
</head>
<body>
<script>
/* area of triangle */
const baseValue = prompt('Enter the base of a triangle: ');
document.write("Entered base is:\n",+baseValue+"m");document.write("<br>");
const heightValue = prompt('Enter the height of a triangle: ');
document.write("Entered height is:\n",+heightValue+"m");document.write("<br>");
const areaValue = (baseValue * heightValue) / 2;
document.write("<h4> The Area of triangle is:"+areaValue+"sq.m </h4>");
/* area of circle*/
this.radius = prompt('Enter the radius of circle:');
document.write("Entered radius is:\n",+radius+"m");document.write("<br>");
const areacir = (Math.PI*this.radius*this.radius);
document.write("<h4> The Area of circle is:"+areacir+"sq.m </h4>");
/* area of rectangle*/
this.length = prompt('Enter the Length of rectangle:');
document.write("Entered Length is:\n",+length+"m");document.write("<br>");
this.width = prompt('Enter the width of rectangle:');
document.write("Entered width is:\n",+width+"m");document.write("<br>");
const arearec = (this.length*this.width);
document.write("<h4> The Area of Rectangle is:"+arearec+"sq.m </h4>");
</script>
</body>
</html>
Program To Generate Multiplication Table
<!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>Multiplication Table</title>
</head>
<body>
<script>
const number = parseInt(prompt('Enter an integer: '));
document.write("The Multiplication Table of \n"+number+"\n is:"+"<br>");
//creating a multiplication table
for(let i = 1; i <= 10; i++) {
// multiply i with number
const result = i * number;
document.write(number+"*"+i+"="+result+ "<br>");
// display the result
/*console.log(`${number} * ${i} = ${result}`);*/
}
</script>
</body>
</html>
Program To Perform operations on string
<!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>Document</title>
</head>
<body>
<script>
// program to reverse a string
// take input from the user
const string = prompt('Enter a string: ');
function reverseString(str) {
// return a new array of strings
const arrayStrings = str.split("");
// reverse the new created array elements
const reverseArray = arrayStrings.reverse();
// join all elements of the array into a string
const joinArray = reverseArray.join("");
// return the reversed string
return joinArray;
const result = reverseString(string);
document.write(result);
/* Replace a string*/
let str = "Hello GoodMorning!!!"
document.write("<br> Before replacement String is :"+str +"<br>");
let result1 = str.replace("GoodMorning", "GoodAfternoon");
document.write("After Replacement String is :"+result1+"<br>");
/* Palindrome*/
// program to check if the string is palindrome or not
function checkPalindrome(string) {
// find the length of a string
const len = string.length;
// loop through half of the string
for (let i = 0; i < len / 2; i++) {
// check if first and last string are same
if (string[i] !== string[len - 1 - i]) {
return 'It is not a palindrome';
return 'It is a palindrome';
// take input
const string1 = prompt('Enter a string: ');
document.write("The String is:\n"+string1+"<br>");
// call the function
const value = checkPalindrome(string1);
document.write(value);
</script>
</body>
</html>
Program To Compare Two Strings
<!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>Document</title>
</head>
<body>
<script>
let string1 = "Hey whatsup"
document.write("string 1 is:\n"+string1+"<br>");
let string2 = "hey Whatsup"
document.write("string 2 is:\n"+string2+"<br>");
let result = string1.toUpperCase==string2.toUpperCase
if(result){
document.write("The Strings are similar.")
else{
document.write("The Strings are not similar.")
</script>
<script>
let text1 = "ab";
document.write("<br><br>text1 is:\n"+text1+"<br>");
let text2 = "cd";
document.write("text2 is:\n"+text2+"<br>");
let result1 = text1.localeCompare(text2);
if(result1==0){
document.write("They are Same")
else
document.write("They are not same")}
</script>
<script>
let text3 = "CCD";
document.write("<br><br>text1 is:\n"+text3+"<br>");
let text4 = "ccd";
document.write("text2 is:\n"+text4+"<br>");
let pattern = new RegExp(text3,"gi")
let result2 = pattern.test(text4);
if(result2){
document.write("They are Same")
else
document.write("They are not same")}
</script>
</body>
</html>
Program to create countDown Timer
<!DOCTYPE HTML>
<html>
<head>
<style>
p{
text-align: center;
font-size: 60px;
</style>
</head>
<body>
<p id="demo"></p>
<script>
var deadline = new Date("Nov 19, 2023 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = (deadline - now)/1000;
var days = Math.floor(t /3600/24);
var hours = Math.floor((t%( 60 * 60 * 24))/( 60 * 60));
var minutes = Math.floor((t % ( 60 * 60)) / (60));
var seconds = Math.floor((t % (60))) ;
document.getElementById("demo").innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}, 1000);
/* 1day = 24 hours
1 hour = 60 min
60min = 3600 sec*/
</script>
</body>
</html>
Program to create an array & diff. operations
1.Check if an array contains a specified value.
<!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>Document</title>
</head>
<body>
<script>
const fruits = ["Banana","Mango","Orange","Apple"];
if(fruits.includes("Mango")){
document.write("The Array Contains in given list")
else
(document.write("The Array is not Contains in given list"))
</script>
</body>
</html>
2.To remove specific element from the array.
<!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>Document</title>
</head>
<body>
<script>
function func() {
var arr = ["shift", "splice", "filter", "pop"];
// Removing the specified element from the array
var spliced = arr.splice(1, 1);
document.write("Removed element: " + spliced + "<br>");
document.write("Remaining elements: " + arr);
func();
</script>
</body>
</html>
3. To empty an array
<!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>Document</title>
</head>
<body>
<script>
const array = [1,2,3];
document.write(array+"<br>");
function emptyArray(arr){
arr.length = 0;
return arr;
const result = emptyArray(array);
document.write("An array is empty"+result);
</script>
</body>
</html>
Appending Obj. to an array& check an object is an array&empty an array
<!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>Document</title>
</head>
<body>
<script>
// program to append an object to an array
function insertObject(arr, obj) {
// find the last index
let index = arr.length;
// appending object to end of array
arr.splice(index, 0, object);
console.log(arr);
}
// original array
let array = [1, 2, 3];
// object to add
let object = {x: 12, y: 8};
// call the function
insertObject(array, object);
</script>
</body>
</html>
<!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>Document</title>
</head>
<body>
<script>
const array = [1,2,3];
document.write(array+"<br>");
function emptyArray(arr){
arr.length = 0;
return arr;
const result = emptyArray(array);
document.write("An array is empty"+result);
</script>
</body>
</html>
<!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>Document</title>
</head>
<body>
<script>
let array = [1,2,3];
function checkObject(arr){
const result= Array.isArray(arr);
if(result){
document.write(array+"\nis an array"+"<br>");
else
(array+"is not an array");
checkObject(array);
</script>
</body>
</html>
Program to create a home page of any website and change background color using on mouse over event
and on focus event
<!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>Document</title>
</head>
<body>
<h2>Heading Two</h2>
<h3 id="mouse" onmouseover="mouseover()">Hover over me to change the background
color.</h3><br>
<input type="text" placeholder="Entert Text" id="focus" onfocus="focusFunction()">
<script>
function focusFunction(){
document.getElementById("focus").style.background="yellow";
function mouseover(){
document.getElementById("mouse").style.color="orange";
</script>
</body>
</html>
Student Information form to accept info.
<!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>Registration Form</title>
</head>
<body>
<center>
<b>
<style>
body {
background-color: lightblue;
</style>
<h3>Student Information Form</h3>
<form action="" onsubmit="return valid()" method="post">
Name: <input type="text" id="nm"><br><br>
Age: <input type="text" id="age"><br><br>
Email ID: <input type="text" id="eid"><br><br>
Phone Number: <input type="text" id="pno"><br><br>
<input type="submit" value="Submit">
</form>
</b>
</center>
</body>
</html>
<script type="text/javascript">
function valid(){
var na =document.getElementById("nm").value;
var ag =document.getElementById("age").value;
var em =document.getElementById("eid").value.indexOf("@gmail.com");
var mno =document.getElementById("pno").value;
if (na==""|| na==null){
alert("Enter The Name");
return false;
else if(ag ==""||ag==null){
alert("Enter The Age");
return false;
else if (isNaN(ag)||ag<1||ag>100){
alert("The age must be a number between 1 to 100");
return false;
else if(em==-1){
alert("Email ID is not valid");
return false;
}
else if(mno ==""||mno==null){
alert("Enter The Phone Number");
return false;
else if(isNaN(mno)||mno.length>10||mno.length<10){
alert("The mobile no. always has 10 digit numerical value");
return false;
else
alert("The Student Information Submitted Successfully");
</script>
calculator
<!DOCTYPE html>
<html>
<body>
<center>
<h3>Calculator</h3>
<input id ="text1" placeholder = "Enter Num1">
<br>
<br>
<br>
<input id ="text2" placeholder = "Enter Num2">
<br>
<br>
<br>
<button onclick="sum()" id = "btnl">Add</button>
<button onclick="diff()" id = "btnl">Sub</button>
<button onclick="mul()" id = "btnl">Mult</button>
<button onclick="div()" id = "btnl">Div</button>
<br>
<br>
<br>
<input id = "text3" placeholder = "result">
</center>
<script>
function sum(){
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var s1 = x + y;
document.getElementById("text3").value = s1;
alert(s1);
function diff(){
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var s2 = x - y;
document.getElementById("text3").value = s2;
alert(s2);
function mul(){
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var s3 = x * y;
document.getElementById("text3").value = s3;
alert(s3);
function div(){
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var s4 = x / y;
document.getElementById("text3").value = s4;
alert(s4);
</script>
</body>
</html>
