-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathM1-D8.html
218 lines (168 loc) · 6.14 KB
/
M1-D8.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<html>
<head>
<style>
.myHeading {
color: red;
}
button {
margin: 5px;
}
</style>
</head>
<body>
<div>
<button onclick="changeTitle('Something else')">Change title(h1)</button>
<button onclick="addClassToTitle()">Add class myHeading to the title(h1)</button>
<button onclick="changePcontent()">Change p children of div</button>
<button onclick="changeUrls()">Change all links to google.com</button>
<button onclick="addToTheSecond('I was created out of the air :) :):) ')">Add new list item in the second unordered list</button>
<button onclick="addParagraph('I am new paragraph and I\'ve been created with JS function')">Add a second paragraph to the first div</button>
<button onclick="firstUlDisappear()">Hide first UL</button>
<button onclick="paintItGreen()">Paint all UL in green</button>
</div>
<main>
<div>
<h1 onclick="makeItClickable()">This is the title of the page</h1>
<h2>This is the subtitle of the page</h2>
</div>
<p>This p should not be changed!!!</p>
<div>
<hr />
<ul id="firstList">
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
<ul id="secondList">
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
<a href="strive.school">This link goes to Strive School</a>
<div class="first-div-with-p">
<p>This text is just for the exercise</p>
</div>
<div>
<input
type="text"
id="input-field"
placeholder="input field for the exercise"
/>
</div>
</div>
<div class="second-div-with-p">
<p>And this text is just for the exercise too!</p>
<p>This p should be changed !!</p>
<h2 style="color: red">
Save this page on your computer and open it with VSCode to get the
questions!
</h2>
</div>
</main>
<footer onclick="changeFooterText('I\'ve changed! But I cannot change back yet :(')">
I am a footer text. Click on me and I will change!
</footer>
<script>
/* EXERCISE 1
Write a function for changing the title of the document in something else.
*/
const changeTitle = function (newTitle) {
let h1Nodes = document.getElementsByTagName("h1")
h1Nodes[0].innerHTML = newTitle
document.title = newTitle
};
/* EXERCISE 2
Write a function for changing the class of the title of the page in "myHeading".
*/
const addClassToTitle = function () {
let h1Node = document.getElementsByTagName("h1")
h1Node[0].classList.add("myHeading")
};
/* EXERCISE 3
Write a function for changing the text of only the p which are children of a div.
*/
let pChildrenofDivNodes = document.querySelectorAll("div p")
const changePcontent = function () {
let pChildrenofDivNodes = document.querySelectorAll("div p")
for (let i = 0; i < pChildrenofDivNodes.length; i++) {
pChildrenofDivNodes[i].innerHTML = "This text has been changed by the function"
}
};
/* EXERCISE 4
Write a function for changing the href property of every link to https://www.google.com
*/
const changeUrls = function () {
let linkNode = document.querySelectorAll("a")
for (let i = 0; i < linkNode.length; i++) {
linkNode[i].href = "https://www.google.com"
}
};
/* EXERCISE 5
Write a function for adding a new list item in the second unordered list.
*/
const addToTheSecond = function (content) {
let newLi = document.createElement("li")
newLi.innerHTML = content
let secondUl = document.getElementById("secondList")
secondUl.appendChild(newLi)
};
/* EXERCISE 6
Write a function for adding a second paragraph to the first div.
*/
const addParagraph = function (content) {
let firstDivWithPNode = document.querySelector(".first-div-with-p")
let newPar = document.createElement("p")
newPar.innerHTML = content
firstDivWithPNode.appendChild(newPar)
};
/* EXERCISE 7
Write a function for making the first unordered list disappear.
*/
const firstUlDisappear = function () {
let firstUlNode = document.querySelector("ul:first-of-type")
firstUlNode.style.visibility = "hidden";
};
/* EXERCISE 8
Write a function for making the background of every unordered list green.
*/
const paintItGreen = function () {
let allULsNode = document.querySelectorAll("ul")
for (let i = 0; i < allULsNode.length; i++) {
allULsNode[i].style.backgroundColor = "green";
}
};
/* EXERCISE 9
Make the heading of the page change color every time the user clicks on it.
*/
const makeItClickable = function () {
let h1Node = document.querySelector("h1")
h1Node.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16)
};
/* EXERCISE 10
Change the footer text with something else when the user clicks on it.
*/
const changeFooterText = function (newFooterText) {
let footerNode = document.querySelector("footer")
footerNode.innerText = newFooterText
};
/* EXERCISE 11
Attach an event listener to the input field in the page for console logging its value just after any keystroke.
*/
const consoleLogInput = function (e) {
console.log(e.target.value)
}
let inputField = document.getElementById("input-field");
inputField.addEventListener("keyup", consoleLogInput)
/* EXERCISE 12
Create a welcome alert message when the page successfully loads.
*/
/* window.onload = function () {
alert('Succescully loaded')
};
*/
/* EXERCISE 13
Use HTML5 tags to properly provide semantic meaning to the different portions of the page.
*/
</script>
</body>
</html>