45-js-exercises/index.html at main · gocodeup/45-js-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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>45 JS Exercises</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <meta name="description" content="45 Exercises for practicing JavaScript fundamentals datatypes, operators, and functions">
    <meta name="keywords" content="learn to code, JavaScript">
    <meta name="author" content="Ryan Orsinger">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon"
      type="image/png"
      href="https://cdn.glitch.com/project-avatar/eea181be-12a8-4dfb-9200-096233b7a427.png?1565986940392">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&display=swap" rel="stylesheet">

</head>
<body>
    <header>
        <img id="logo" src="https://cdn.glitch.com/165ac023-c836-48b2-9da3-7beda27766a6%2Fcodeup_logo_white.png?v=1603308299550">
        <h1>45 JS Exercises </h1>
        <a href="https://glitch.com/edit/#!/remix/45-js-exercises" target="_blank/"><img src="https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button-v2.svg" alt="Remix on Glitch"></a>
    </header>
    <main>
        <section class="instructions">
            <h2>Instructions</h2>
            <article>
                <h3>Quick Start</h3>
                <ol>
                    <li>Create yourself an account on <a href="https://glitch.com" target="_blank">Glitch.com</a> then return to this page.</li>
                    <li>Click <a href="https://glitch.com/edit/#!/remix/45-js-exercises" target="blank">"Remix on Glitch"</a> to make your own copy of these exercises. Your own copy will have a randomly generated name.
                      <br>
                      <br>
                      <a href="https://glitch.com/edit/#!/remix/45-js-exercises" target="_blank/" class="remix">
                        <img src="https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button-v2.svg" alt="Remix on Glitch">
                      </a>
                    </li>
                    <li>Use Glitch.com's editor to edit the code in the <a class="solutions-edit-link" target="_blank">45-exercises.js</a> file.</li>
                    <li>View your <a href="" class="preview" target="_blank">index.html</a> with the "🔎 Preview" icon in the Glitch editor. The "Preview" icon is at the bottom of the <a href="" class="solutions-edit-link" target="_blank">code editor</a>. Recommend using "Preview in a New Window"</li>
                    <li>The keyboard shortcut to launch the application is Ctrl + Shift + R (keyboard shortcuts are powerful helpers)</li>
                </ol>
            </article>
            <hr>
            <article>
                <h3>Orientation</h3>
                <ul>
                    <li>This index.html page shares the instructions and the JS console shows errors.</li>
                    <li>The only time your JS Console will show no errors is when all the exercises have working solutions.</li>
                  <li>Open the JavaScript console in <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Opening_the_Web_Console" target="_blank">Firefox</a> or <a href="https://developer.chrome.com/docs/devtools/open/#console" target="_blank">Chrome</a></li>
                    <ul>
                        <li>For Mac, the keyboard shortcut is "Command + Option + i"</li>
                        <li>For Windows, the keyboard shortcut "Shift + CTRL + j".</li>
                    </ul>
                  <li>Start writing solutions inside of the <a class="solutions-edit-link" target="_blank">45-exercises.js</a>file in the editor.</li>
                  <li>Refresh this <a href="" class="preview" target="_blank">index.html</a> to re-run you new JS code, then check your JS Console to see that your solution worked or if there's something</li>
                </ul>
            </article>
            <article>
              <h3>Expected Workflow</h3>
              <ul>
                <li>From this page, open the JavaScript console to see the next error.</li>
                <li>Each error message tells you the next exercise to solve or bug to fix.</li>
                <li>Use the glitch.com editor to make changes in your <a class="solutions-edit-link" target="_blank">45-exercises.js</a> file</li>
                <li>Refresh the <a href="" class="preview" target="_blank">index.html</a> page</li>
                <li>Repeat</li>
              </ul>
            </article>
            <hr>
            <article>
                  <h3>Video Demonstration of Workflow</h3>
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/rKMuDZi-s8A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </article>
            <article>
                <h3>Rationale</h3>
                <p>45 Exercises exists to help learners gain deep practice with fundamentals, operators, syntax, and converting problems in English to solutions in JS.</p>
                <p>The best way to learn how to program is write programs. Each exercise is a tiny little program.</p>
                <p>Expect to do a tremendous amount of search engine searches, make many mistakes, and try again. This is all part of programming. Take breaks.</p>
            </article>
        </section>
        <section class="troubleshooting">
          <article>
                <h2>Troubleshooting</h2>
                <h3>General Guidance</h3>
                <ul>
                    <li>Solve the exercises one at a time and in order.</li>
                    <li>Fix any syntax errors before moving forward with the exercises</li>
                    <li>Any synax error in your code may halt the execution of all of your code.</li>
                    <li>Spelling and capitalization matter in programming.</li>
                    <li>Each exercise must pass its tests in order for you to see the next exercise.</li>
                    <li>If you have an incorrect answer or syntax error, fix it before moving forward.</li>
                </ul>
            </article>
            <hr>
            <article>
              <h3>What to do when you don't know what to do next</h3>
              <p>When the exercise asks you to reverse an array in JavaScript, the way forward is to search for <em><a href="https://www.google.com/search?q=how+to+reverse+an+array+in+javascript&oq=How+to+reverse+an+array+in+JavaScript" target="_blank">"How to reverse an array in JavaScript"</a></em> in your favorite search engine.</p>
              <p>When the exercise asks you to check if a number is even, the way forward is to search for <em><a href="https://www.google.com/search?q=how+to+reverse+an+array+in+javascript" target="_blank">"how to check if a number is even in JavaScript"</a></em>.</p>
              <p>When the exercise has you calculate the area of a circle, the way forward is to search for <em><a href="https://www.google.com/search?q=how+to+calculate+the+area+of+a+circle+in+javascript" target="_blank">"how to calculate the area of a circle in JavaScript"</a></em> or <em><a href="How to get pi in JavaScript" target="_blank">"How to get pi in JavaScript"</a></em>.</p>
              <p>The pattern for finding what you need in JavaScript is to rely very heavily on search engine searches so you can find examples of working code and discussions about code that speak to your questions.</p>
            </article>
            <article>
                <h3>Error messages</h3>
                <figure>
                    <p>
                        <em>Reference Error</em> means you need to define the variable or function.
                        <br>
                        The number by the 45-exercises.js filename highlights the line where the variable is referenced before it exist
                    </p>
                    <img src="https://cdn.glitch.com/eea181be-12a8-4dfb-9200-096233b7a427%2Freference_error.png?v=1566406423258" alt="image of a reference">
                </figure>
                <figure>
                    <p>
                        <em>Syntax Error</em> means there's a syntax error that needs to be fixed.
                        <br>
                        The number by the 45-exercises.js filename highlights the line where the syntax error exists.
                    </p>
                    <img src="https://cdn.glitch.com/eea181be-12a8-4dfb-9200-096233b7a427%2Fsyntax_error.png?v=1566406423173" alt="image of a syntax error">
                </figure>

                <figure>
                    <p>
                        <em>Uncaught Error</em> means the answer is incorrect and doesn't match the test.
                        <br>
                        The largest number by the 45-exercises.js filename specifies the line of code for the exercise where there is a mismatch.
                        <br>
                        In this example, line 36 of 45-exercises.js specifies where there is an error. The earlier line numbers reference the assertion testing function itself.
                    </p>
                    <img src="https://cdn.glitch.com/eea181be-12a8-4dfb-9200-096233b7a427%2Fexpected_vs_actual.png?v=1566845593758" alt="uncaught error message">
                </figure>
            </article>
            <article>
                <h3>Resources</h3>
                <ul>
                    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps" target="_blank">JS First Steps</a></li>
                    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks" target="_blank">JS Building Blocks</a></li>
                    <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions" target="_blank">Functions reference</a></li>
                    <li><a href="https://eloquentjavascript.net/" target="_blank">First chapters of Eloquent JavaScript</a></li>
                    <li>If you require more guidance and assistance, fill out <a href="https://forms.gle/TQdmSBj3evCQfB1u7" target="_blank">this form.</a></li>
                </ul>
            </article>
            <hr>
            <article>
                <p>If you notice any typos, misspellings, or mistakes, please triple check your work and <a href="https://github.com/ryanorsinger/101-exercises-js/issues" target="_blank">open an issue on GitHub</a> citing both the line number and exercise number.</p>
                <p>
                  If you want much more practice with JS, work through <a href="https://101-exercises.glitch.me/" target="_blank">101 JS Exercises</a>
                </p>
            </article>

        </section>
        <section class="correct">
            <h2><span id="count"></span><br>Problems Correct</h2>
            <ul></ul>
        </section>
    </main>


<!-- Include the client.js script for dynamic project link rendering -->
<script src="./client.js" type="text/javascript"></script>

<!-- Solutions file -->
<script src="./45-exercises.js" type="text/javascript"></script>
</body>
</html>