-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery_exercises.html
94 lines (89 loc) · 3.26 KB
/
jquery_exercises.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-exercises</title>
</head>
<body>
<h1 id="firstH1">JQuery</h1>
<ul>
<li class="firstLi">Only this list item should turn red</li>
<li class="codeup">listitem</li>
<li>listitem</li>
<li>listitem</li>
<li class="codeup">listitem</li>
</ul>
<p id="container1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis dolorem, ducimus
eveniet
incidunt
inventore maxime pariatur quis quod quos reiciendis tempore totam unde! Adipisci assumenda ipsam nobis quisquam
soluta?Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto cum enim facilis labore laborum optio placeat quas quis tenetur? Accusamus autem est id ipsum quaerat ratione sit voluptas voluptatum.</p>
<ul>
<li class="codeup">listitem2</li>
<li>listitem2</li>
<li>listitem2</li>
<li>listitem2</li>
<li id="codeup">listitem2</li>
</ul>
<div class="circle1">
test
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.0.js"></script>
<!--put it above all script^^^^-->
<script>
"use strict";
//Use the file jquery_exercises.html for these exercises. Commit your changes to GitHub.
// Remove your custom jQuery code from previous exercises.
//
// Add jQuery code that will change the background color of an h1 element when clicked.
//
// Make all paragraphs have a font size of 18px when they are double clicked.
//
// Set all li text color to red when the mouse is hovering; reset to black when it is not.
$(document).ready(function(){
window.addEventListener("load", function(){
alert('the page has been loaded')
});
// $('li').css('font-size', '20px')
// $('li, h1, p').css('background-color', 'red')
// $('h1').on({
// click: function (){
// alert('you clicked me! I will now turn blue');
// $('h1').css("background-color", 'blue');
// },
// hover: function (){
// $('h1').css('background-color', 'white');
// }
// });
function changeH1(){
$('#firstH1').css('background-color', 'purple')
};
function fontSizeChange(){
$('#container1').css('font-size', '18px');
};
function fontSizeChange2(){
$('#container1').css('font-size', '1em');
$('#container1').css('background-color', 'red');
$('#container1').text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis dolorem, ducimus eveniet incidunt inventore maxime pariatur quis quod quos reiciendis tempore totam unde! Adipisci assumenda ipsam nobis quisquam soluta?Lorem ipsum dolor sit amet, consectetur adipisicing elit. A architecto cum enim facilis labore laborum optio placeat quas quis tenetur? Accusamus autem est id ipsum quaerat ratione sit voluptas voluptatum.');
};
function hoverRed(){
$(this).css('color', 'red');
};
function hoverBlack(){
$(this).css('color', 'black');
};
$("li").hover(hoverRed, hoverBlack);
$('#firstH1').click(changeH1);
$('#container1').click(fontSizeChange2);
$('#container1').dblclick(fontSizeChange);
// function circleSquare(){
// $('.circle1').css('border-radius', '100px');
// $('.circle1').css('color:hover', 'red');
// }
// $(".circle1").css('background-color', 'pink');
// $('.circle1').hover(circleSquare);
});
</script>
</body>
</html>