├── 1-booleans-comparisons-conditionals └── README.md ├── 2-logical-operators-advanced-conditionals └── README.md ├── 3-variables └── README.md └── README.md /1-booleans-comparisons-conditionals/README.md: -------------------------------------------------------------------------------- 1 | # Part I: Booleans, Comparisons & Conditionals 2 | 3 | *Note: Before getting started on these exercises, please be certain that you've read through the root [README.md](../README.md) file in this repository.* 4 | 5 | ## Exercises 6 | 7 | ### Basic Requirements 8 | 9 | #### Comparison Operators 10 | 11 | 1. Type the two boolean values -- `true` and `false` -- into your console. 12 | 13 | 2. Use the console to accomplish the following: 14 | 15 | + Write an expression using `>` that will evaluate to `false` 16 | + Write an expression using `>` that will evaluate to `true` 17 | + Write an expression using `<` that will evaluate to `false` 18 | + Write an expression using `<` that will evaluate to `true` 19 | + Write an expression using two numbers and `===` that will evaluate to `true` 20 | + Write an expression using two numbers and `===` that will evaluate to `false` 21 | + Write an expression using two strings and `===` that will evaluate to `true` 22 | + Write an expression using two strings and `===` that will evaluate to `false` 23 | 24 | 3. Fill in the `???` with the following operators or values to make the statements 25 | output the expected Boolean value. 26 | 27 | ```js 28 | 12 ??? 78 29 | // => true 30 | 31 | 24 ??? 16 32 | // => false 33 | 34 | 45 !== ??? 35 | // => true 36 | 37 | "45" ??? 45 38 | // => false 39 | 40 | "6" ??? "six" 41 | // => true 42 | ``` 43 | 44 | 4. Write a function `oldEnoughToDrink` that takes an `age` as an argument and 45 | returns `true` if the person with that age is old enough to drink. 46 | 47 | 5. There's an easy way to figure out how long a string is by adding `.length` to 48 | the end of it. Try this out in the console: 49 | 50 | ```js 51 | "hello".length; 52 | "".length; 53 | "John Doe".length; 54 | ``` 55 | 56 | Write a function `sameLength` that accepts two strings as arguments, and 57 | returns `true` if those strings have the same length, and `false` otherwise. 58 | 59 | 6. Write a function `passwordLongEnough` that accepts a "password" as a 60 | parameter and returns `true` if that password is *long enough* -- you get to 61 | decide what constitutes *long enough*. 62 | 63 | #### Conditionals: `if` 64 | 65 | 1. Write a function `bouncer` that accepts a person's name and age as arguments, 66 | and returns either "Go home, NAME.", or "Welcome, NAME!" (where NAME is the 67 | parameter that represents the person's name) depending on whether or not the 68 | person is old enough to drink. 69 | 70 | 2. Write a function `max` that takes two numbers as arguments, and returns the 71 | larger one. 72 | 73 | 3. Write a function `min` that takes two numbers as arguments, and returns the 74 | smaller one. 75 | 76 | 4. Write functions `larger` and `smaller` that each accept two strings as 77 | arguments, and return the *larger* and *smaller* strings, respectively. 78 | 79 | ### More Practice 80 | 81 | 1. Fill in the `???` with the following operators or values to make the statements 82 | output the expected Boolean value. 83 | 84 | ```js 85 | 106 ??? 12 86 | // => false 87 | 88 | "wiz" ??? "wiz" 89 | // => true 90 | 91 | 7 * 7 ??? 49 92 | // => true 93 | 94 | 12 ??? (24 / 2) 95 | // => false 96 | 97 | (20 % 2) <= ??? 98 | // => true 99 | 100 | (9 / 3) + (5 * 5) === ??? 101 | // => true 102 | ``` 103 | 104 | 2. Write the following functions that each accept a single number as an 105 | argument: 106 | 107 | + `even`: returns `true` if its argument is even, and `false` otherwise. 108 | + `odd`: the opposite of the above. 109 | + `positive`: returns `true` if its argument is positive, and `false` otherwise. 110 | + `negative`: the opposite of the above. 111 | 112 | 3. A couple of other useful built-in mathematical functions are `Math.random`, 113 | `Math.floor` and `Math.ceil`. Look these functions up on 114 | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) 115 | to learn how they work, and use them to implement the following functions: 116 | 117 | + `randInt`: Should accept a single numeric argument (`n`), and return a 118 | number from `0` to `n`. 119 | + `guessMyNumber`: Should accept a single numeric argument and compare it to 120 | a random number between `0` and `5`. It should return one of the following 121 | strings: 122 | 123 | - "You guessed my number!" if the argument matches the random number. 124 | - "Nope! That wasn't it!" if the argument did not match the random number. 125 | -------------------------------------------------------------------------------- /2-logical-operators-advanced-conditionals/README.md: -------------------------------------------------------------------------------- 1 | # Part II: Logical Operators & Advanced Conditionals 2 | 3 | *Note: Before getting started on these exercises, please be certain that you've read through the root [README.md](../README.md) file in this repository.* 4 | 5 | ## Exercises 6 | 7 | ### Basic Requirements 8 | 9 | #### Logical Operators 10 | 11 | 1. Is the `!` operator a *unary* operator, or *binary* operator? 12 | 13 | 2. Evaluate each of the following expressions first on a whiteboard, and then in 14 | a console: 15 | 16 | ```js 17 | !(2 >= 2) 18 | !(4 === 4) 19 | !(5 !== 5) 20 | ``` 21 | 22 | 3. Evaluate each of the following expressions first on a whiteboard, and then in a 23 | console: 24 | 25 | ```js 26 | 1 > 2 || 2 > 2 || 3 > 2 27 | 5 < 5 || 75 < 74 28 | ``` 29 | 30 | #### Conditionals: `else if` & `else` 31 | 32 | 1. This guy named "Joe" keeps blacking out at the bar that your function, 33 | `bouncer` (from the previous module), is in charge of; thus, management has 34 | decided to add him to the "blacklist" -- modify the `bouncer` function from 35 | the previous section so that the person named "Joe" is rejected with an 36 | appropriate message, regardless of his age. 37 | 38 | 2. Write a function called `scoreToGrade` that accepts a *number* as a parameter 39 | and returns a *string* representing a letter grade corresponding to that 40 | score. 41 | 42 | For example, the following grades should be returned given these scores: 43 | 44 | + 'A' >= 90 45 | + 'B' >= 80 46 | + 'C' >= 70 47 | + 'D' >= 60 48 | + 'F' < 60 49 | 50 | ```js 51 | function scoreToGrade(score) { 52 | // TODO: your code here 53 | } 54 | scoreToGrade(95); // => 'A' 55 | scoreToGrade(72); // => 'C' 56 | ``` 57 | 58 | 3. Modify the `scoreToGrade` function so that it returns `'INVALID SCORE'` if 59 | the score is greater than `100` or less than `0`. 60 | 61 | ### More Practice 62 | 63 | 1. Think of at least three activities that you enjoy doing outdoors and the 64 | range of temperatures and weather patterns (*e.g* sunny, windy, snowy, rainy, 65 | etc.) that are best for these activities. Write a function `whatToDoOutside` 66 | that accepts a *temperature* and *condition* as parameters and outputs a 67 | string of the format: "The weather is ideal for: ACTIVITY" (where ACTIVITY is 68 | an actual activity). Make sure to include an `else` that indicates what 69 | should be done if the conditions do not match any activities. If you're short 70 | on inspiration, here are some ideas: 71 | 72 | + **Snow Sports:** snowboarding, skiing 73 | + **Water Sports:** surfing, sailing, paddle boarding, swimming 74 | + **Team Sports:** basketball, baseball, football (American or everywhere 75 | else), etc. 76 | 77 | 2. The `guessMyNumber` function from the **Booleans & Conditionals** module 78 | (**More Practice** section) accepts a guess `n` and checks it against a 79 | random number from `0` to `5` -- if the guess `n` is greater than `5`, output 80 | a different message indicating that the guess is out of bounds. 81 | 82 | - **NOTE:** It will be helpful to *first* write a `randInt` function that 83 | accepts a number `n` and computes a random integer from `0` to `n`; then, 84 | you can use this function in `guessMyNumber`. 85 | 86 | 3. Modify the `scoreToGrade` function so that it returns `'A+/A-'` for 87 | scores of 98-100/90-92 respectively. Apply the same logic for all other 88 | letter grades. 89 | 90 | ### Advanced 91 | 92 | 1. The bar that employs our `bouncer` function has decided to do live music on 93 | Friday and Saturday nights, and will be admitting those that are over 18 to 94 | the bar on those nights; the catch however, is that all who are 21 or older 95 | will need to be given a wristband to distinguish them from the minors. Modify 96 | your `bouncer` function to handle this situation. 97 | 98 | 2. You should have noticed a large amount of repetitive code when modifying 99 | `scoreToGrade` to accommodate `+` or `-` grades. When we do lots of repetitive 100 | things, that's a clear signal that there's a better way. Write a helper function 101 | `letterGrade` that accepts two arguments, *letter* and *score*, and works as 102 | follows: 103 | 104 | ```js 105 | function letterGrade(letter, score) { 106 | // your code here 107 | } 108 | // These are examples of what a *working* function would output. 109 | letterGrade('A', 95); // => 'A' 110 | letterGrade('A', 91); // => 'A-' 111 | letterGrade('B', 88); // => 'B+' 112 | letterGrade('monkey', 160); // => 'monkey-' 113 | ``` 114 | 115 | Finally, use `letterGrade` to remove the repetition in `scoreToGrade`. 116 | 117 | 3. It turns out that we can write logical *and* and logical *or* in terms of each 118 | other and logical *not* using De Morgan's Laws. 119 | 120 | + Write a function `or` that works like `||`, but only uses `!` and `&&`. 121 | + Write a function `and` that works like `&&`, but only uses `!` and `||`. 122 | -------------------------------------------------------------------------------- /3-variables/README.md: -------------------------------------------------------------------------------- 1 | # Part III: Variables 2 | 3 | *Note: Before getting started on these exercises, please be certain that you've read through the root [README.md](../README.md) file in this repository.* 4 | 5 | ## Exercises 6 | 7 | ### Basic Requirements 8 | 9 | 1. Fix each of the following variable declarations in a console -- some are 10 | syntactically invalid, some are disobey style guidelines, and some are just 11 | weird. 12 | 13 | ```js 14 | var "animal" = "monkey"; 15 | var "monkey" = animal; 16 | var x= 15; 17 | var y =10; 18 | var var = "huh?"; 19 | var true = false; 20 | var isTenEven = 10 % 2 = 0; 21 | ``` 22 | 23 | 2. Perform the following in the console: 24 | 25 | + Create a variable `firstName` and assign your first name to it. 26 | + Create another variable, `lastName`, and assign your last name to it. 27 | + Have a middle name? If so, repeat the process. 28 | + Now, create a variable `fullName` and assign your full name to it by using 29 | the above variables. 30 | 31 | 32 | 3. For each of the following code blocks, **use a whiteboard (or a piece of paper)** to reason about 33 | what the value of `x` is supposed to be on the last line. Once you have 34 | arrived at a conclusion that you are comfortable with, enter the lines into a 35 | console and check your answer. Was your hypothesis correct? If not, ensure 36 | that you understand why (talk with a classmate, or ask for help). 37 | 38 | ```js 39 | var x = 5; 40 | x + 10; 41 | x; // => ??? 42 | ``` 43 | 44 | ```js 45 | var x = 17; 46 | x = (x + 1) / 2; 47 | x * 4; 48 | x; // => ??? 49 | ``` 50 | 51 | ```js 52 | var x = 5; 53 | var y = 20; 54 | x = y; 55 | y = y + 7; 56 | x; // => ??? 57 | ``` 58 | 59 | ```js 60 | var x = 10; 61 | var y = 5; 62 | x = (x * 4) - 3; 63 | x + 17; 64 | x = x + y; 65 | x; // => ??? 66 | ``` 67 | 68 | 4. Write a function called `counter` that, when invoked, always returns a number 69 | that is *one more* than the previous invocation. For instance: 70 | 71 | ```js 72 | function counter() { 73 | // TODO: your code here 74 | } 75 | counter(); // => 1 76 | counter(); // => 2 77 | counter(); // => 3 78 | // etc. 79 | ``` 80 | 81 | **HINT:** You'll need a variable for this. *Where* should the variable be 82 | declared? 83 | 84 | ### More Practice 85 | 86 | **All of the following exercises involve augmenting the `guessMyNumber` function.** 87 | 88 | 1. In a previous module you wrote a function called `guessMyNumber` that 89 | simulated a guessing game: the idea is that the function picks a random 90 | number between `0` and `5`, and you invoke the function with your guess -- if 91 | you and the function are thinking of the same number, you win! Otherwise, the 92 | function informs you that your guess was incorrect. A version of this game 93 | might look like this (the `randInt` function is included for convenience): 94 | 95 | ```js 96 | function guessMyNumber(n) { 97 | if (n > 5) { 98 | return "Out of bounds! Please try a number between 0 and 5."; 99 | } else if (n === randInt(5)) { 100 | return "You guessed my number!"; 101 | } 102 | return "Nope! That wasn't it!"; 103 | } 104 | 105 | function randInt(n) { 106 | return Math.floor(Math.random() * (n + 1)) 107 | } 108 | ``` 109 | 110 | Read and test both of the functions in your console and 111 | affirm that you understand how they work; then, answer the following 112 | questions: 113 | 114 | + At present, the guess should be between `0` and `5`. We can think of `5` as 115 | the *upper bound* of the guess. How many times is the *upper bound* 116 | repeated? What if we wanted to change the upper bound to `6`? How many 117 | changes would be required? 118 | + Create a variable called `upperBound` to hold the upper bound, and then 119 | reference **it** instead of the number `5`. If you were asked to change the 120 | upper bound to some other number (*e.g.* `7`), you should only have to make 121 | *one* change. 122 | + Modify `guessMyNumber` so that if the guess is incorrect, `guessMyNumber` 123 | includes the correct guess in its output, *e.g.* `"Nope! The correct number 124 | was: X"` (where `X` would have been the correct number). 125 | 126 | 127 | 2. At present, the guessing game picks a new random number every time it is 128 | "played" (invoked). Now that you know how to make information *persistent* 129 | between function invocations, change the guessing game so that it picks a 130 | random number **once** and allows you to guess until you get the correct 131 | answer. 132 | 133 | 3. It would be really cool if, after the answer was guessed, the message 134 | included the number of guesses it had taken to find the answer; for example, 135 | "You guessed my number in 3 guesses." 136 | 137 | + **Tangent Problem:** What happens if you get the number right on the 138 | first try? Does it say, "You guessed my number in 1 guesses."? If so, 139 | perhaps the wording should be different? Some better ideas are: 140 | 141 | + "You guessed my number in 1 guess." 142 | + "Congratulations! You guessed my number on the first try!" 143 | 144 | 145 | 4. Implement a way to **limit** the number of guesses that can be made so that a 146 | player loses after exceeding the limit. 147 | 148 | 5. Keep track of a **high score** (the lowest number of guesses) between games, 149 | and, when the correct number has been guessed in a record number of times, 150 | include in the message something that indicates that a new high score has 151 | been set. 152 | 153 | 6. Whenever a player wins, **increase the difficulty** by increasing the 154 | `upperBound`; whenever a player loses, **decrease the difficulty** by 155 | decreasing the `upperBound`. 156 | 157 | 7. Implement a **high/low hinting system** to tell the the user that the guess 158 | is either too high or too low. You may want to increase the `upperBound` on 159 | the guess. 160 | 161 | ### Advanced 162 | 163 | There is an optimal way to play this game that works like this, given 164 | *upperBound* as the upper bound, *lowerBound* as the lower bound, and *guess* as 165 | the guess: 166 | 167 | 1. Initialize the starting values: 168 | 169 | - *guess* as half of the *upperBound* 170 | - *lowerBound* as 0 171 | 172 | 173 | 2. Execute *guessMyNumber* with *guess*: 174 | 175 | + If the guess was **too high**, repeat (2) where: 176 | - the new *guess* is half of the difference of *guess* and *lowerBound* 177 | - the new *upperBound* is *guess* 178 | + If the guess was **too low**, repeat (2) where: 179 | - The new *guess* is half of the difference of *upperBound* and *guess* 180 | - The new *lowerBound* is *guess* 181 | + If the guess was **correct** stop. 182 | 183 | **Your task** is to write a function that implements the above algorithm 184 | to play the game on your behalf. The first thing that you will need to 185 | do is create another version of `guessMyNumber` that returns output that 186 | will be easier for another function to work with, *e.g.* use `1` for too 187 | high, `-1` for too low, `0` for correct. 188 | 189 | Relative to *upperBound*, how many guesses does it take on average to 190 | guess correctly? 191 | 192 | Some recommendations: 193 | 194 | + Make use of a whiteboard. 195 | + Play the existing game yourself using the above steps to get an 196 | idea of how the algorithm works. 197 | + Work with a partner. 198 | + Read about `console.log` on 199 | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) 200 | and use it to help with debugging. 201 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Hack Reactor](http://www.hackreactor.com): JavaScript 201 Workshop 2 | 3 | ## Overview 4 | 5 | #### Scheduled Length: 3 Hours 6 | 7 | Hey there! Ready to get your hands dirty with some code? This is the practice exercise repository for Hack Reactor's JavaScript 201 workshop. JavaScript 201 is the second lesson in our free, four-part Introductory JavaScript Series (101, 201, 301 and 401). We're excited to have you. 8 | 9 | In order to complete these exercises, open [repl.it](https://repl.it/), choose JavaScript, and then write your code in the left-hand panel. You can run your code using the "Run" button. 10 | 11 | **EXPECTATION:** You will be expected to fully engage during lecture periods. Accordingly, please wait until the designated times during this live workshop to explore the exercises. You will be given 10-15 minutes per section, so please pace yourself accordingly. 12 | 13 | **NEED HELP?** Practice developing your autonomy as a programmer. Use [Google Search](https://www.google.com) or [Stack Overflow](https://www.stackoverflow.com), peruse documentation at [mdn.io](https://www.mdn.io), or talk to your friendly neighbor. If you're utterly stuck, flag down your instructor for guidance. 14 | 15 | **_DISCLAIMER:_** _Completion of this workshop is no guarantee of admission into the Hack Reactor immersive program, nor does it have any influence in the admissions process._ 16 | 17 | ## Slides 18 | 19 | The slide deck for this workshop can be found [here](https://docs.google.com/presentation/d/e/2PACX-1vT5IXcwwWbyWo1olk5B-nSa4FiRE0e1Q3ONjM0Zci_Rsd-CbczCSrklEBqbgiKFis69UXdAHCgQBoeH/pub?start=false&loop=false&delayms=3000). 20 | 21 | ## Exercises 22 | 23 | Each lecture in this workshop will be followed by a set of self-guided practice exercises. The exercises are divided by section and are housed in their respective folders within this Github repository. 24 | 25 | Each section of practice exercises has a `Basic Requirements` portion. Some sections may also contain additional sections for advanced practice. During the live workshop, you are only expected to complete the `Basic Requirements` sections and may complete the remainder as homework. 26 | 27 | _For your ease of access – click the following links for each section's practice exercises._ 28 | 29 | - Part I: [Booleans, Comparisons & Conditionals](./1-booleans-comparisons-conditionals) 30 | - Part II: [Logical Operators & Advanced Conditionals](./2-logical-operators-advanced-conditionals) 31 | - Part III: [Variables](./3-variables) 32 | 33 | ## Exercise Solutions 34 | 35 | You may find reference solutions for this workshop's exercises on the `solutions` [branch](https://github.com/hackreactor/javascript_201/tree/solutions/) of this repository. Please do not refer to the solutions until you've given each problem set a valiant effort. 36 | 37 | ## Thinking about JavaScript 38 | 39 | ##### Reasoning Methods 40 | 41 | As you embark on your learning journey, a sound method for thinking about JavaScript will be to consider each line of code as a discrete instruction being provided to your computer. 42 | 43 | - What is each line of code intended to do individually? 44 | - How about when combined together? 45 | 46 | It will be beneficial for your growth as a sophisticated programmer to think deeply about the intentions of your code so you can predict and understand the behavior your program produces. 47 | 48 | - _What_ is the expected output of the code? 49 | - _Why_ will the code produce the output that I expect? 50 | 51 | Thinking about each line of code can take many shapes: 52 | - How is this line of code structured and why? 53 | - What syntax rules is this line of code following? Not following? 54 | - Where is this line of code located contextually within the program? 55 | - What references is this line of code making to other parts of the program? Are such references sound? 56 | 57 | ##### Vocabulary Development 58 | 59 | Developing your vocabulary as a programmer is as important as learning to write code. To accelerate your conversational capabilities, we recommend partnering with a neighbor to discuss your code at every opportunity. The more opportunities you have to explain yourself, the better. Don't worry – with time, the ambiguity with which you presently speak about code will transform into eloquent prose. 60 | --------------------------------------------------------------------------------