Untitled

<!-- 1. Write appropriate HTML-JavaScript-jQuery code for the following requirements:
a. Assign appropriate font size, font family and background color to the <p> tag
using the style property.
b. Use the above <p> tag in three places in a html document and set this common
style property to above tag.
c. Use the above code to style the tags in multiple pages by using common file. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.min.js"></script>
</head>
<body>
    <p style="font-size: large; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; background-color: red;">static p</p>
    <p>dynamic-1</p>
    <p>dynamic-2</p>
    <p>dynamic-3</p>


    <script>
        $('p').css({"font-size": "large","font-family": "'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif","background-color": "orange"})
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.min.js"></script>
</head>
<body>
    <p>otherp-1</p>
    <p>otherp-2</p>
    <p>otherp-3</p>

    <script src="./pStyle.js"></script>

</body>
</html>


$('p').css({"font-size": "large","font-family": "'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif","background-color": "orange"})


<!-- 2. Write appropriate HTML-JavaScript-jQuery code for the following requirements:
a. Create a button, on click of it, welcome message should be displayed on web
page just besides the button.
b. Create three input textboxes. On click of each input box, change its background
color to yellow.
c. Create two style properties and by default apply first one to a paragraph. On a
button click, change the paragraph style to other style.
d. On paragraph-click, toggle its style.
e. Create one button and a textbox. On button-click, set its value to the text written
in the text box. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.7.1.min.js"></script>

</head>
<body>

    <div style="display: flex;" id="message">
        <button onclick="showMessage()">Click to Welcome message</button>
    </div>

    <div>
        <input type="text" id="input1">
        <input type="text" id="input2">
        <input type="text" id="input3">
        <input type="text" id="input4">
    </div>

    <div>
        <p id="p1">hello World!!!</p>
        <button onclick="changeStyle()">Change Style</button>
    </div>

    <div>
        <p id="toggleStyle" style="background-color: bisque; color: brown;">on click Toggle Style</p>
    </div>

    <div>
        <input type="text" name="txt" id="txt" >
        <button onclick="changeValue(this)">My name is Aakash!!</button>
    </div>


    <script>
        function showMessage()
        {
            $("#message").append("<p style='color:red;'>Welcome back Aakash!!!</p>")
        }

        $("input").click((e)=>{
            // console.log(e);
            $(`#${e.target.id}`).css({"background-color":"yellow"})
        })

        function changeStyle()
        {
            console.log("hello");
            $("#p1").css({"background-color":"yellow","color":"red"})
        }

        let toggle=true;
        $("#toggleStyle").click((e)=>{
            if(toggle)
            $(`#${e.target.id}`).css({"background-color":"yellow","color":"blue"})
            else
            $(`#${e.target.id}`).css({"background-color":"bisque","color":"brown"})
            toggle=!toggle;
        })

        function changeValue(e)
        {
            e.textContent=$("#txt").val()
        }

    </script>
</body>
</html>

<!-- 3. Write appropriate HTML-JavaScript-jQuery code for the following requirements:
a. When the document is ready, create a div tag (id: div1) to display display
Welcome message.
b. Create two div tags (id: div2 and div3). When mouse moves over the div1,
assign green as background color to both div2 and div3. When mouse moves
out the div1, resent background color to white.
c. Display and hide a paragraph on click of two buttons btnShow and btnHide.
d. Perform the above task 3-c using a single button. toggle(). -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Program-3</title>
    <script src="../jquery-3.7.1.min.js"></script>
</head>

<body>

    <div id="div2">Div-2</div>
    <div id="div3">Div-3</div>

    <div>
        <button onclick="showPara()">Show!!</button>
        <button onclick="hidePara()">Hide!!</button>
        <button onclick="togglePara()">Toggle!!</button>
        <p id="hideShow">paragraph show !!!</p><br>
    </div>


    <script>
        $(document).ready(() => {
            $(document.body).prepend("<div id='div1' style='width:650px;height:50px;border:2px solid black;'>Welcome message</div>")

            $("#div1").mouseover(() => {
                $("#div2").css({ "background-color": "green" })
                $("#div3").css({ "background-color": "green" })
            })

            $("#div1").mouseout(() => {
                $("#div2").css({ "background-color": "white" })
                $("#div3").css({ "background-color": "white" })
            })

        })

        let toggle = true;
        function showPara() {
            $("#hideShow").css({ "display": "block" })
            toggle=true;
        }
        function hidePara() {
            $("#hideShow").css({ "display": "none" })
            toggle=false;
        }

        function togglePara() {
            if (toggle)
                $("#hideShow").css({ "display": "none" })
            else
                $("#hideShow").css({ "display": "block" })
            toggle = !toggle;
        }


    </script>
</body>

</html>

<!-- 4. Write appropriate HTML-JavaScript-jQuery code for the following requirements:
a. Create one textarea (id: ta1) and one button (id: showTextCount).
On click of the button, display count of text available in ta1 on document.
b. Create one textarea (id: ta2).
Update text count as and when text is entered. Display the same on document.
c. Restrict the max. number of characters to 10 in ta2. -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>program-4</title>
    <script src="../jquery-3.7.1.min.js"></script>
</head>
<body>
    <textarea name="txt" id="ta1" cols="30" rows="10"></textarea>
    <button onclick="countChr()">count characters!!</button>
    <p id="result" style="color: red;"></p>

    <textarea name="txt" id="ta2" cols="30" rows="10" maxlength="10"></textarea>
    <p id="result2"></p>
    <h1 id="showText"></h1>


    <script>
        function countChr()
        {
            let txt=$("#ta1").val();
            $("#result").text(`total character is : ${txt.length}`)
        }

        $("#ta2").keyup(()=>{
            console.log("hello");
            let txt=$("#ta2").val();
            $("#result2").text(`total character is : ${txt.length}`)
            $("#showText").text(`${txt}`)


        })

    </script>

</body>
</html>

<!-- 5. Write appropriate HTML-JavaScript-jQuery code for the following requirements:
a. Create one style class with name ‘error’:-
i. border color : red
ii. background color : yellow.
iii. Apply this class to a text box when the focus is moved out of it and if
entered data is a negative number.
b. Create two textboxes and one button with + on it. On click of the + button,
display sum of the numbers entered in two textboxes. Also perform same
functionality for subtract, multiply and divide buttons.
c. The buttons in above code 5-b should remain in disable state until any one or
both of the textboxes are vacant. -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>program-5</title>
    <style>
        .error {
            border: 2px solid red;
            background-color: yellow;

        }
    </style>
    <script src="../jquery-3.7.1.min.js"></script>
</head>

<body>

    <div>
        <input type="number" id="number" placeholder="enter the number..">
    </div>

    <script>
        $("#number").keyup(()=>{
            let val = Number($("#number").val());
        if (val < 0)
            $("#number").addClass("error");
        else
            $("#number").removeClass("error");
        })
        $("#number").(()=>{
            $("#number").addClass("error");
        })
        $("#number").focus(()=>{
            $("#number").removeClass("error");
        })

    </script>

</body>

</html>