Three Divisions in jQuery

Question:

Design  an html page with three divisions(using div tag), which should contains following attributes:

<div> tag 1:                                       <div> tag 2:                                             <div> tag 3:

Name : DAIntelligence                  Name : ASI_Intelligence                     Name : Intelligence-Amp

Each division contains a paragraph tag (<p>) with the texts given below:

<p> tag 1: Distributed Artificial Intelligence (DAI)

<p> tag 2: Artificial Super Intelligence (ASI)

<p> tag 3: Intelligence Amplification (IA)

Using jQuery finds all the divisions with an attribute name that ends with ‘Intelligence’ and sets the background color yellow when the user click on the button “Click to see the effect”.

Note:  Do not alter the given ‘divisions.html’ file.  Write your jQuery code in the file ‘divisions.js’

Sample Page:

Quiz for Exam - Three Divisions

Code:

division.html

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

division.js

$('#button1').click(function(){
    $("div[name$='DAIntelligence']").css( "background", "yellow" );
    $("div[name$='ASI_Intelligence']").css( "background", "yellow" );
});

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *