Code:
<!DOCTYPE html>
<html>
<head>
<title>Find the area</title>
</head>
<body>
<h1>Area of triangle using Javascript</h1>
<label>Enter length of Side 1 of triangle =</label>
<input type="number" id="side1" /><br /><br />
<label>Enter length of Side 2 of triangle -</label>
<input type="number" id="side2" /><br /><br />
<label>Enter length of Side 3 of triangle </label>
<input type="number" id="side3" /><br /><br />
<button type="button" id="areatri">Submit</button>
<p>AREA OF TRIANGLE: <span id="display"></span></p>
<script>
document.getElementById("areatri").onclick = function () {
var side1 = parseInt(document.getElementById("side1").value);
var side2 = parseInt(document.getElementById("side2").value);
var side3 = parseInt(document.getElementById("side3").value);
var s = (side1 + side2 + side3) / 2;
var area = Math.sqrt(
s * (s - side1) * (s - side2) * (s - side3)
).toFixed(2);
document.getElementById("display").innerHTML = area;
};
</script>
<h1>Area of Rectangle using Javascript</h1>
<label>Enter length of rectangle -</label>
<input type="number" id="len" /><br /><br />
<label>Enter breadth of rectangle</label>
<input type="number" id="bre" /><br /><br />
<button type="button" id="arearec">Submit</button>
<p>AREA OF RECTANGLE: <span id="display1"></span></p>
<script>
document.getElementById("arearec").onclick = function () {
var len = parseInt(document.getElementById("len").value);
var bre = parseInt(document.getElementById("bre").value);
var area = (len * bre).toFixed(2);
document.getElementById("display1").innerHTML = area;
};
</script>
<h1>Area of Circle using JavaScript</h1>
<label>Enter radius of Circle =</label>
<input type="number" id="rad" /><br /><br />
<button type="button" id="areacir">Submit</button>
<p>AREA OF CIRCLE: <span id="display2"></span></p>
<script>
document.getElementById("areacir").onclick = function () {
var rad = parseInt(document.getElementById("rad").value);
var area = (3.14 * rad * rad).toFixed(2);
document.getElementById("display2").innerHTML = area;
};
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Multiplication table of 7</title>
</head>
<body>
<h1>Multiplication table of 7</h1>
<script>
// Define the number for which you want to create the multiplication table
const number = 7;
// Create a multiplication table for the number
for (let i = 1; i <= 10; i++) {
// Multiply i with the number
const result = i * number;
// Display the result in the console
console.log(number + " * " + i + " = " + result);
// Display the result on the web page
document.write("<p>" + number + " * " + i + " = " + result + "</p>");
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>
Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph
below:
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">
Microsoft is a freemium educational website for learning coding online. Initially released in 1998.
Microsoft offers courses covering all aspects of web development.<br />
Microsoft also publishes free HTML templates. Microsoft is run by Refsnes Data in Norway.<br />
Microsoft has an online text editor called TryIt Editor, and readers can edit examples and run the
code in a test environment.
</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.replace(
/Microsoft/g,
"W3Schools"
);
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Compare Strings</h3>
Enter String 1: <input id="string1" /><br />
Enter String 2: <input id="string2" /><br />
<button onclick="comp1(); comp2(); comp3();">Compare</button>
<script>
function comp1() {
// Using toUpperCase()
var string1 = document.getElementById("string1").value;
var string2 = document.getElementById("string2").value;
// Compare both strings
const result = string1.toUpperCase() === string2.toUpperCase();
console.log("Using toUpperCase()");
if (result) {
console.log("The strings are similar.");
} else {
console.log("The strings are not similar.");
}
}
function comp2() {
// Using RegEx
var string1 = document.getElementById("string1").value;
var string2 = document.getElementById("string2").value;
// Create a regex pattern
const pattern = new RegExp(string1, "gi");
// Compare the strings
const result = pattern.test(string2);
console.log("Using RegEx");
if (result) {
console.log("The strings are similar.");
} else {
console.log("The strings are not similar.");
}
}
function comp3() {
// Using localeCompare()
var string1 = document.getElementById("string1").value;
var string2 = document.getElementById("string2").value;
const result = string1.localeCompare(string2, undefined, {
sensitivity: "base",
});
console.log("Using localeCompare()");
if (result === 0) {
console.log("The strings are similar.");
} else {
console.log("The strings are not similar.");
}
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>String</h2>
<button onclick="RevStr()">Reverse a String</button>
<button onclick="Rep1Chr()">Replace Characters</button>
<p id="test"></p>
<p id="demo">My Music with Microsoft Apps</p>
<script>
function Rep1Chr() {
document.getElementById("test").innerHTML = "Replace all occurrences of M with W in the
paragraph: My Music with Microsoft Apps";
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.replace(/M/g, "W");
}
function RevStr() {
// Empty string
let revString = "";
let str = prompt("Enter a String:");
for (let i = str.length - 1; i >= 0; i--) {
revString += str[i];
}
console.log("Given String: " + str + "<br>Reversed String: " + revString);
PalStr(str, revString);
}
function PalStr(str, revString) {
// Compare the original and reversed strings
if (str === revString) {
console.log('It is a palindrome');
} else {
console.log('It is not a palindrome');
}
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Building Countdown Timer Using Date Function</h3>
<p id="demo"></p>
<script>
// Set the date we're counting down to
var tDate = new Date();
document.write("<br>" + "Today's Date is: " + tDate);
document.write("<br>" + "Month is: " + tDate.getMonth());
document.write("<br>" + "Day is: " + tDate.getDate());
document.write("<br>" + "Time is: " + tDate.getTime() + " msec");
var tt = tDate.getTime();
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
var diff = countDownDate - tt;
document.write(
"<br>" +
"Time in msec from 1 Jan 1970 till Jan 5, 2024 is: " +
countDownDate
);
document.write("<br>" + "Difference: " + diff);
// Update the countdown every 1 second
var x = setInterval(myTimer, 1000);
function myTimer() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the countdown date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes, and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML =
days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
// If the countdown is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h3>Demonstrate Array Operations</h3>
<button onclick="removeElement()">Remove Element</button>
<button onclick="chkValue()">Check Value</button>
<button onclick="emptyArray()">Empty Array</button>
<script>
function removeElement() {
var shoeBrand = ["Nike", "Adidas", "Sparks", "RedTape"];
console.log("Elements in array before removing: " + shoeBrand);
// Removing the last element from the array
var poppedElement = shoeBrand.pop();
console.log(
"Removed last element from array using pop(): " + poppedElement
);
// Display the remaining elements present in the array after removing
console.log("New array: " + shoeBrand);
// Removing 2 elements from position "1"
shoeBrand.splice(1, 2);
console.log(
"Removed elements from array using splice(1, 2):\nNew Array: " +
shoeBrand
);
}
function chkValue() {
var carBrand = ["Maruti", "BMW", "Kia"];
console.log(carBrand);
var str = prompt("Enter carBrand Value");
const hasValue = carBrand.includes(str);
console.log(carBrand);
console.log("Value entered: " + str);
// Check the condition
if (hasValue) {
console.log("Array contains: " + str);
} else {
console.log("Array does not contain: " + str);
}
}
function emptyArray() {
var carBrand = ["Maruti", "BMW", "Kia", "Tata"];
console.log(carBrand);
carBrand.splice(0, carBrand.length);
console.log("Empty Array: " + carBrand);
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<head>
<h2>Demonstrate Set Operations</h2>
<p>Set A: {'apple', 'mango', 'orange'}</p>
<p>Set B: {'grapes', 'apple', 'banana'}</p>
<p>Set C: {'apple', 'orange'}</p>
<button onclick="union()">Union of Sets</button>
<button onclick="intersection()">Intersection of Sets</button>
<button onclick="difference()">Difference of Sets</button>
<button onclick="subset()">Subset of Set</button>
</head>
<body>
<script>
// Two sets of fruits
const setA = new Set(["apple", "mango", "orange"]);
const setB = new Set(["grapes", "apple", "banana"]);
const setC = new Set(["apple", "orange"]);
function union() {
let unionSet = new Set(setA);
for (let i of setB) {
unionSet.add(i);
}
console.log(unionSet);
}
function intersection() {
let intersectionSet = new Set();
for (let i of setB) {
if (setA.has(i)) {
intersectionSet.add(i);
}
}
console.log(intersectionSet);
}
function difference() {
let differenceSet = new Set(setA);
for (let i of setB) {
differenceSet.delete(i);
}
console.log(differenceSet);
}
function subset() {
for (let i of setC) {
if (!setA.has(i)) {
console.log(false);
return;
}
}
console.log(true);
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<h2>Demonstrate mouseover() and focusFunction()</h2>
<h3 id="demo" onmouseover="mouseover()" onmouseout="mouseout()">
Mouse over me
</h3>
<input
type="text"
placeholder="Enter Text"
id="focus"
onfocus="focusFunction()"
onblur="blurFunction()"
/>
<script>
function mouseover() {
document.getElementById("demo").style.color = "red";
}
function mouseout() {
document.getElementById("demo").style.color = "black";
}
function focusFunction() {
document.getElementById("focus").style.background = "yellow";
}
function blurFunction() {
document.getElementById("focus").style.background = "red";
}
</script>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<input id="text1" placeholder="Enter Number" />
<input id="text2" placeholder="Enter Number" />
<br />
<button onclick="sum()" id="btn">Add</button>
<button onclick="diff()" id="btn">Subtract</button>
<button onclick="mult()" id="btn">Multiply</button>
<button onclick="div()" id="btn">Divide</button>
<input id="result" placeholder="Result" />
<script>
function sum() {
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var result = x + y;
document.getElementById("result").value = result;
alert(result);
}
function diff() {
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var result = x - y;
document.getElementById("result").value = result;
alert(result);
}
function mult() {
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var result = x * y;
document.getElementById("result").value = result;
alert(result);
}
function div() {
var x = parseFloat(document.getElementById("text1").value);
var y = parseFloat(document.getElementById("text2").value);
var result = x / y;
document.getElementById("result").value = result;
alert(result);
}
</script>
</body>
</html>
Output:
