Practical No.
05
Roll No. 45
Program:-
<!-- Display the countdown timer in an element -->
<p id="demo"></p>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 10, 2024 18:09:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down 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 count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
Practical No. 06
Roll No. 45
Program:-
<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: <br>" + shoeBrand );
// Removing last element from the array
var poppedElement = shoeBrand.pop();
console.log("Removed last element from array using pop(): " + poppedElement );
//display remaining elements present in array after removing
console.log("New array: " + " " + shoeBrand);
//removing 2 elemnts from position '1'.
shoeBrand.splice(1,2);
console.log("Removed elements from array using spilce(1,2) : New Array: " + " " +
shoeBrand );
}
function chkValue(){
var carBrand = ["Maruti", " BMW", " Kia", " Tata"];
console.log(carBrand);
var str1 = prompt("Enter carBrand Value");
const hasValue = carBrand.includes(str1)
console.log(carBrand);
console.log("Value entered: " + str1);
//check the condition
if(hasValue) {
console.log('Array contains: ' + str1);
}
else {
console.log('Array does not contain: ' + str1);
}
}
function emptyArray(){
var carBrand = ["Maruti", " BMW", " Kia", " Tata"];
console.log(carBrand);
carBrand.splice(0,carBrand.length);
//while(a.length > 0) {
// a.pop();
console.log("Empty Array " + " " + carBrand );
}
</script>
</body>
</html>
Output:-
Practical No. 07
Roll No. 45
Program:-
<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>
<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);
}
}
console.log(true);
}
</script>
</head>
</html>
Output:-
Practical No. 08
Roll No. 45
Program:-
<!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:-
Practical No. 09
Roll No. 45
Program:-
<!DOCTYPE html>
<html>
<body>
<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">
<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>
Output:-
