codeup-web-exercises/dom-query-js.html at main · ryanmurray3/codeup-web-exercises · GitHub

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
95
96
97

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DOM: Query and Modify</title>
</head>
<body>

<h1 id="main-header">Hello World!</h1>
<ul>
	<li data-dbid="1">Item 1</li>
	<li data-dbid="2">Item 2</li>
	<li data-dbid="3">Item 3</li>
	<li data-dbid="4">Item 4</li>
	<li data-dbid="5">Item 5</li>
</ul>
<h2 id="sub-header">Hello Again.</h2>
<p class="sub-paragraph">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
	ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in
	reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
	pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
	culpa qui officia deserunt mollit anim id est laborum.
</p>

	<div id="buttons">
		<button id="btn-1">Main Header</button>
		<button id="btn-2>">Sub Header</button>
		<button id="btn-3">List Item 1</button>
		<button id="btn-4">Paragraph</button>
	</div>
<script>
	"use strict";
	// // TODO: Uncomment next line and get the main header element by id
	// const mainHeader = document.querySelector("#main-header");
	//
	// // TODO: Set inner html of mainHeader to "JavaScript is Cool"
	// mainHeader.innerHTML = "JavaScript is Cool";
	//
	// // TODO: Uncomment the next line and get the sub header element by id
	// document.querySelector("#sub-header");
	//
	// // TODO: Set the text color of subHeader to blue
	// document.querySelector("#sub-header").style.color = "blue";
	//
	// //  TODO: Uncomment the next line and get all list items
	//
	//
	// // TODO: Set text color on every other list item to grey
	// const listItems = document.getElementsByTagName("li");
	// for (let i = 0; i < listItems.length; i++ ) {
	// 	if (i % 2 !== 0){
	// 		listItems[i].style.color = "grey";
	// 	}
	// }


	// // TODO: Set text color of li with dbid = 1 to blue
	// let liItem = document.querySelector('li[data-dbid="1"]');
	// liItem.style.color = "blue";
	//
	// // TODO: Uncomment the next line and get all elements with class name sub-paragraph
	// const subParagraphs = document.querySelector(".sub-paragraph");
	//
	// // TODO: Change the text in the first sub paragraph to "Mission Accomplished!"
	// subParagraphs.innerHTML = "Mission Accomplished!";
	//
	//
	//
	// let button1 = document.querySelector("#btn-1");

	// const listener = (event) => {
	//
	// }
	// button1.addEventListener('click', listener);

// 	mouse events exercise
//
// 			Set all li text color to red when the mouse is hovering; reset to black when it is not.
	let h1 = document.querySelector("#main-header");
	document.querySelector("#main-header").addEventListener('click', () => h1.style.color = "yellow");

	let allParagraphs = document.querySelector("p");
	document.querySelector(".sub-paragraph").addEventListener("dblclick", () => allParagraphs.style.fontSize = "18px");

	let allLi = document.querySelector("ul");
	document.querySelector("ul").addEventListener("mouseenter", () => allLi.style.color = "red");
	document.querySelector("ul").addEventListener("mouseleave", function(){
		allLi.style.color = "black";
	});

</script>
</body>
</html>