Javascript Prac Code

--------------------------AREA---------------------------------
<!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>


--------------------------MULTIPLICATION TABLE-------------------------
<!DOCTYPE html>
<html>
<head>
    <title>Multiplication table of 2</title>
</head>
<body>
    <h1>Multiplication table of 2</h1>

    <script>
        // Define the number for which you want to create the multiplication table
        const number = 2;

        // 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>


---------------------------OPERATIONS ON STRINGS-----------------------------
<!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>


---------------------------COMPARE STRINGS--------------------------
<!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>


-----------------------------TIMER----------------------------
<!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>


--------------------------ARRAY OPERATIONS-----------------------------

<!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", "Puma", "Woodland"];
    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 = ["Mercedes", "BMW", "Jeep", "Porsche"];
    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 = ["Mercedes", "BMW", "Jeep", "Porsche"];
    console.log(carBrand);
    carBrand.splice(0, carBrand.length);
    console.log("Empty Array: " + carBrand);
}
</script>
</body>
</html>


---------------------------SET OPERATIONS------------------------------
<!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>


----------------------------HOMEPAGE AND BG COLOR------------------------
<!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 = "white";
}

function blurFunction() {
    document.getElementById("focus").style.background = "red";
}
</script>
</body>
</html>


------------------------------CALCULATOR-------------------------

<!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 = "Sum: " + 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 = "Difference: " + 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 = "Product: " + 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 = "Quotient: " + result;
}
</script>
</body>
</html>