Three Divisions
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'.
Avoid writing the jQuery 'document ready' method for the proper web page visibility.
Do not use 'ES6' features.
Sample Page:
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>
</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="divisions.js"></script>
</body>
</html>
divisions.js
$('#button1').click(function(){
$("div[name$='Intelligence']").css("background",'yellow');
})
