-
Notifications
You must be signed in to change notification settings - Fork 3
/
lesson-6.html
100 lines (87 loc) · 3.24 KB
/
lesson-6.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
<html>
<head>
<!--We're importing some of the generic styles from the last lesson.-->
<link rel="stylesheet"
href="./style.css">
</style>
</head>
<body>
<a href="./index.html">Home</a>
<h1>Lesson 6 - Triggering Changes in Javascript</h1>
<div class="info">
It's not very interesting to have JavaScript make changes when the page loads. Luckily, we can tie these changes to
be triggered by events on the page, like a button being clicked by the user.
</div>
<div class="dotted-div">
<h2>Task 1: Functions</h2>
<div class="info">A function is a small bit of code that repeats the same action when called.</div>
<p>Update the <code>helloWorld()</code> function so that the pop up message says "hello world", rather than "Update
this message!"</p><button id="button-1">Run Hello World Function</button>
</div>
<div class="dotted-div">
<h2>Task 2: Updating content on the page</h2>
<div class="info">You can use code like this
<code>document.querySelector("#my-element").innerHTML = 'example'</code> to
update content on a webpage.</div>
<p>Update the function to print "Hello World" to the 'update-text' paragraph</p>
<p>Add a function to '#clear-text-button' that removes the message from 'update-text'</p>
<p id="update-text"></p>
<button id="add-text-button">Add some text</button>
<button id="clear-text-button">Clear the text</button>
</div>
<div class="dotted-div"
id="task-3">
<h2>Task 3: Connecting functions to buttons</h2>
<div class="info">Functions won't run unless they are called, or triggered by an event like pressing a button. You
can use JavaScript to connect buttons to functions.</div>
<p>Update the button in task 4 (<code>document.querySelector("#WHERE-IS-THE-BUTTON")</code>) so that it's connected
to
#button-3
below.</p>
<p id="update-text"></p><button id="button-3">Click me !</button>
</div>
<div class="key-takeaways">
<h2>Key Takeaways</h2>
<ul>
<li>
I understand what a function is.
</li>
<li>
I can edit a function and make it do different things.
</li>
<li>
I can make a function run when a button is pressed.
</li>
</ul>
</div>
<a href="./lesson-5.html">
Previous
Lesson</a>
|
<a href="./lesson-7.html">Next Lesson>
</a>
</body>
<script>
/*** TASK 1 ***/
function helloWorld() {
/*TODO: Update message to say 'hello world'*/
alert("Update this message!")
}
document.querySelector("#button-1").onclick = helloWorld;
/*** TODO: TASK 2 ***/
function updateTextFunction() {
document.querySelector("#update-text").innerHTML = "update this text to have your message!";
}
function clearText() {
//TODO: update 'updateText' to be an empty string of text;
}
document.querySelector("#add-text-button").onclick = updateTextFunction;
document.querySelector("#clear-text-button").onclick = clearText;
/*** TASK 3 ***/
function coolFunction() {
document.querySelector("#task-3").style.backgroundColor = "hsl(0, 25%, 80%)";
}
//TODO: Update the query selector to find #button-4, so the function will work properly.
document.querySelector("#WHERE-IS-THE-BUTTON").onclick = coolFunction;
</script>
</html>