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:

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" ); });