Untitled

<!-- 1. Write a jQuery code snippet to change the text of a <div> element with the ID "myDiv" to "Hello, world!" when a
    button with the ID "changeTextBtn" is clicked. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <script>
        $(document).ready(function () {
            $('#changeTxtBtn').click(function () {
                $('p').text("Hello World");
            });
        });
    </script>


    <div id="myDiv">
        <p>This is my div</p><button id="changeTxtBtn">Change</button>
    </div>

</body>

</html>


<!-- 2. Create a jQuery script that toggles the visibility of a <div> element with the class "toggleDiv" when a button with
    the ID "toggleBtn" is clicked. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <script>
        $(document).ready(function () {
            let flag = true;
            $('#toggleBtn').click(function () {

                if (flag) {
                    $('.toggleDiv').hide();
                    flag = false;
                }
                else if (!flag) {
                    $('.toggleDiv').show();
                    flag = true;
                }
            });
        });
    </script>
    <div class="toggleDiv" style="height: 300px; width: 300px; background-color: red;"></div>
    <button id="toggleBtn">Toggle</button>

</body>

</html>


<!-- 3. Develop a jQuery function to dynamically generate a list of <li> elements inside a <ul> with the ID "myList" based on
        an array of strings ["Apple", "Banana", "Orange"]. -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>
<script>
    $(document).ready(function () {
        const arr = ["Apple", "Banana", "Orange"];
        let i = 0;
        $('#btn').click(function () {
            $('#myList').append("<li>" + arr[i] + "</li>");
            i++;
            if (i == arr.length) {
                $('#btn').hide();
            }
        });

    });

</script>

<body>
    <ul id="myList">

    </ul>
    <button id="btn">add</button>
</body>

</html>


<!-- 5. Create a jQuery function to slide down a <div> element with the class "slideDownDiv" when hovering over a button with
    the class "hoverBtn". -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <script>
        $(document).ready(function () {
            var toggle = false;
            $("#hoverBtn").hover(function () {
                if (!toggle) {

                    $("#div2").animate({ top: '100px' });
                    toggle = true;
                }
                else {
                    $("#div2").animate({ top: '0px' });
                    toggle = false;
                }
            });

        });
    </script>
    <button id="hoverBtn">Slide</button>
    <div id="div2" style="background-color: green; height: 200px; width: 200px;position: relative;">
        <p>This is me dehradun</p>
    </div>

</body>

</html>


<!-- 6. Write jQuery code to animate the width of a <div> element with the ID "animateDiv" from 100px to 300px over a
    duration of 1 second. -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#animateDiv").animate({
                    height: '300px',
                    width: '300px'
                }, 3000);
            });

        });
    </script>
    <div id="animateDiv" style="background-color: yellow; height: 100px; width: 100px; position: relative; ">
        <p>This is geu dehradun</p>
    </div>
    <div class="class">

        <button id="btn">animate</button>
    </div>

</body>

</html>