Download our latest MNC Answers Application at Play Store. Download Now
Home
Accenture
accenture tfa

Jquery Hands-Ons [Web Technology > Jquery] | Accenture TFA Training Pre-Learning Modules



Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

All Question of the Hands-On Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!


1.Check Box Using JQuery

  1. chkbox.html

<!DOCTYPE html>
<!-- DO NOT ALTER THIS FILE -->
<html lang="en">
<head>
<title>Check Box using jQuery</title>
</head>
<body>
<form id="form">
<input type="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div id="result">0 boxes are checked</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="chkbox.js"></script>
</body>

</html>
     
    2.chkbox.js		 
//WRITE YOUR jQUERY CODE HERE

    $("input[type='checkbox']").click(function(){
        var count=0;
        count=$("input:checked").length;
        if(count==1)
        {
            $("#result").text(count+" box is checked");
        }
        else
        $("#result").text(count+" boxes are checked");
    });

2.Customer Data
  1. customer.html
              <!-- DO NOT CHANGE THIS FILE -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 40%;
        margin-bottom: 20px;
	border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="customer.js"></script>
</head>
<body>

    <form id="frm">
        Name: <input type="text" id="name" placeholder="Name">
       	<input type="button" class="add-row" value="Add Customer Details">
   
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Esther Saradha</td>
               </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Customer Details</button>
 </form>

</body> 
</html>
  • customer.js
//WRITE YOUR jQUERY CODE HERE
$(document).ready(function(){
    $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td><input type='checkbox'name='record'></td><td>" + name + "</td></tr>";
        $("table tbody").append(markup);
    });
$(".delete-row").click(function(){
    $("table tbody").find('input[name="record"]').each(function(){ 
        if($(this).is(":checked")){
            $(this).parents("tr").remove();
}
    
});
    
});
});   
3.Drag an Object
  • drag.html
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://code.jquery.com/jquery-1.10.2.js">
        </script>
        <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <style>
            #draggable
            {
                width:300px;
                height: 300px;
            }
        </style>
        <script>
        $(document).ready(function(){
        $("p").click(function(){
        $("#draggable").draggable();
        });
        });
        </script>
    </head>
    <body>
        <div id="draggable" class="ui-qidget-content">
            <img src="fish.jpg">
            <p>Drag me around</p>
        </div>
    </body>
</html>
4.Three Divisions
  • divisions.html
<!-- DO NOT CHANGE THIS FILE -->

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <style type="text/css">
   button {
     display: block;
     margin: 20px 0 0 0;
   } 
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="divisions.js"></script> 
</head>

 <body>

  <div name="DAIntelligence" id="DAI">
     <p> Distributed Artificial Intelligence (DAI)</p>
  </div>
  <div name="ASI_Intelligence" id="ASI">
    <p> Artificial Super Intelligence (ASI)</p>
  </div>
  <div name="Intelligence-Amp" id="IA">
    <p> Intelligence Amplification (IA))</p>
  </div>
 
  <button id="button1">Click to see the effect</button>
 </body>
</html>

  • divisions.js
//WRITE YOUR jQUERY CODE HERE
$('#button1').click(function(){
    $("div[name$='DAIntelligence']").css( "background", "yellow" );
    $("div[name$='ASI_Intelligence']").css( "background", "yellow" );
});
5.Window Resize
  • window.html
<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                var x = 0;
                $(window).resize(function()
                {
                    $("span").text(x += 1);
                    
                });
                
            });
        </script>
    </head>
    <body>
        <p id="resize">
            Window resized
            <span>0</span> times.</p>
        <p id="test">Try resizing your browser window.</p>
    </body>
</html>

If you have any queries, please feel free to ask on the comment section.

If you want MCQs and Hands-On solutions for any courses, Please feel free to ask on the comment section too.

Please share and support our page!



































1 comment





















    

  1. 

    

    

    
                  
                  
    
                  
    

    



    

    
want t
    cs jquery handson solutions

    

    

    





    

                                
    
                              
    2.