Ice Cream Flavours - Selectors
A web page contains a list of different types of ice creams with different flavors. Write a jQuery script to perform the below activities:
1. Change the font color of all the paragraph tags in the web page into 'orange'.
2. The background color of all list of ice creams that belong to the class 'flavours' should be 'light blue' and font size should be 120%
3. Set the second paragraph font size as 50%
4. If the 'id' of any list of ice creams is 'icecreamfloats', then set its background color as 'orange'
5. Refer to the web page snapshot given below for more clarifications:
Web Page Snapshot:
Note:
1. The HTML part of the program is given as a template. Do not change anything in it. You have to write the jQuery code only in the 'script.js' file.
2. Avoid writing the jQuery 'document ready' method for the proper web page visibility.
3. Do not use 'ES6' features.
Solution:
flavours.html
<!-- DO NOT ALTER ANYTHING THIS FILE. WRITE YOUR CODE IN THE 'script.js'-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by Compound Selector</title>
</head>
<body>
<p id="icecream"><strong>ICE CREAM TYPES</strong></p>
<p>Choose Your Flavours</p>
<ul class="flavours">
<li>Moon Mist</li>
<li>Moose Tracks</li>
<li>Raspberry Ripple</li>
</ul>
<ul id="icecreamfloats">
<li><span>Purple Cow</span></li>
<li><span>Snow White</span></li>
<li><span>Sherbet Cooler</span></li>
</ul>
<ul class="flavours">
<li>Oyster Ice Cream</li>
<li>Hokey Pokey </li>
<li>Blue Moon</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
// WRITE YOUR CODE HERE
$("p").css("color","orange");
$(".flavours li").css("font-size","120%");
$(".flavours li").css("background","lightblue")
$("p:last").css("font-size","50%");
$("#icecreamfloats li").css("background","orange");
