WTL lab4

lab4a) color changing

<html>
<head>
    <title>Assignment 4 A</title>
    <script>
        var i=0;
        function Callme()
        {
         var color=['red','green','teal','yellow','silver','grey','purple','lime','black','blue','aqua','white'];
         document.bgColor=color[i];
         i++;
         if(i==color.length)
         i=0;
        }
    </script>
</head>
<body>
<p>Click Button to Change color </p>
<input type="button" value="change color" onclick="Callme()"
</body>

<!---<body>
    <img src=" " id="im" height="400" width="400">
    <br><hr><br>
    <input type="button" value="click" onclick="fun1()">

    <script>
        var i=0;
        function fun1(){

            var images=['accessory1.jpg','accessory2.jpg','accessory3.jpg','cafe.jpg.jpg']
            x=document.getElementById('im');
            x.src=images[i];
            i++;
            if(i==images.length)

            {
                i=0;
            }
        }
    </script>
</body>---->

</body>
</html>

4b) check for color is present or not
<html>
    <head>

    </head>
    <body>
        Enter a color:<input type="text" id="text1">
        <input type="button" value="Click" onclick="func1()">
        <div id="d1">New Color:</div>
        <script>
            var color=['red','green','yellow'];
            function func1()
            {
                var text1=document.getElementById('text1').value;
                var newcolor=text1.toLowerCase();
                if(color.indexOf(newcolor)==-1)
                {
                    alert("Color not present in the list ");
                    color.push(newcolor);
                    alert(color);
                }
                else
                {
                    alert(newcolor+" is already present");
                }
                document.getElementById("d1").innerHTML=color;
            }
        </script>

    </body>
</html>

4c) background with choose option
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font and Background Color Changer</title>
</head>
<body>
    <h1 id="heading">Sample Heading</h1>
    <label for="fontColor">Select Font Color:</label>
    <select id="fontColor">
        <option value="black">Black</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
    </select>

    <label for="bgColor">Select Background Color:</label>
    <select id="bgColor">
        <option value="white">White</option>
        <option value="yellow">Yellow</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
    </select>

    <script>
        var heading = document.getElementById("heading");
        var fontColorDropdown = document.getElementById("fontColor");
        var bgColorDropdown = document.getElementById("bgColor");

        fontColorDropdown.addEventListener("change", applyStyles);
        bgColorDropdown.addEventListener("change", applyStyles);

        function applyStyles() {
            var selectedFontColor = fontColorDropdown.value;
            var selectedBgColor = bgColorDropdown.value;

            // Get the current font color and background color of the heading
            var currentFontColor = getComputedStyle(heading).color;
            var currentBgColor = getComputedStyle(heading).backgroundColor;

            // Check if the selected colors are different from the current styles
            if (selectedFontColor !== currentFontColor || selectedBgColor !== currentBgColor) {
                heading.style.color = selectedFontColor;
                heading.style.backgroundColor = selectedBgColor;
            }
        }
    </script>
</body>
</html>

4d) check array is present in the list or not
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Occurrences in Array</title>
</head>
<body>
    <h1>Character Occurrences in Array</h1>

    <!-- Input for entering the character to count -->
    <label for="charToCount">Enter a character:</label>
    <input type="text" id="charToCount">
    <button onclick="countOccurrences()">Count</button>

    <!-- Display area for the result -->
    <p id="result"></p>

    <script>
        function countOccurrences() {
            // Get the character to count from the input field
            var charToCount = document.getElementById("charToCount").value;

            // Declare a JavaScript string array
            var arr = ["a", "b", "c", "d", "a", "c", "g", "h","i","j","k","k"];

            // Initialize a counter for the character occurrences
            var charCount = 0;

            // Loop through the array to count occurrences
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] === charToCount) {
                    charCount++;
                }
            }

            // Display the occurrences of the specified character
            var resultElement = document.getElementById("result");
            resultElement.textContent = "Occurrences of " + charToCount + " is " + charCount;
        }
    </script>
</body>
</html>