-
Notifications
You must be signed in to change notification settings - Fork 33
/
assignment.html
84 lines (60 loc) · 3.78 KB
/
assignment.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Introduction to JS: Variables | Assignment</title>
</head>
<body>
<header class="header">
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="/" class="link">Concept</a></li>
<li class="nav-item"><a href="./assignment.html" class="link">Assignment</a></li>
</ul>
</nav>
</header>
<main class="main">
<section class="concept">
<h2 class="title">Assignment</h2>
<p class="definition">Make the following changes in <code class="inline-code">assignment.js</code>. These values will be reflected in the "Answer Ouput" section.</p>
<p class="definition">
<ul class="exp-list">
<li class="exp">Create a variable named <code class="inline-code">book</code> that cannot be reassigned. Set the value to your favorite book.</li>
<li class="exp">Create a variable named <code class="inline-code">activity</code> that can be reassigned. Set the value to your favorite activity.</li>
<li class="exp">Update the function <code class="inline-code">updateActivitySentence()</code>.</li>
<li class="exp">Update the function <code class="inline-code">render()</code>.</li>
</ul>
</p>
<h3 class="sub-title">Answer Ouput</h3>
<p class="definition">My favorite book is: <span id="book-answer">THIS SHOULD UPDATE</span></p>
<p class="definition">My favorite activity is: <span id="activity-answer">THIS SHOULD UPDATE</span></p>
<button id="submission-btn">Submit</button>
<!--
<code class="block-code">const one = 1;</code>
<p class="definition">This makes complete sense because one is always going to be one!</p>
<h3 class="sub-title">let</h3>
<p class="definition"><code class="inline-code">let</code> allows us to declare variables that can be reassigned. Consider the following code:</p>
<code class="block-code">let bestFriend = "Joe";</code>
<p class="definition">For now, Joe is your best friend. Unfortunately, Joe moved away and you meet your new best friend, Susan. We should reflect that change in our code. Using <code class="inline-code">let</code>, we can reassign the new best friend's name like this:</p>
<code class="block-code">bestFriend = "Susan";</code>
<p class="definition">
Note that we did not use <code class="inline-code">let</code> in the example above. This is because you only have to declare the variable once. Once a variable is declared, we can reference it by using just the variable's name.
</p> -->
<h3 class="sub-title"></h3>
<p class="definition"></p>
<!-- <ul class="exp-list">
<li class="exp">Create a couple <code class="inline-code">const</code> variables. Try reassigning a new value to the const and see what the console logs out. </li>
<li class="exp">Create a couple <code class="inline-code">let</code> variables. Like above, give them meaningful names and reassign values to them. Log them to the console and observe the results.</li>
<li class="exp">Google the errors that may appear in your console. If it is unclear, write them down so we can discuss in class.</li>
</ul> -->
<p class="definition"></p>
<p class="definition">
</p>
</section>
</main>
<footer></footer>
<script src="./js/assignment.js"></script>
</body>
</html>