├── 001 ├── solution.md └── readme.md ├── readme.md ├── 002 └── readme.md ├── 003b ├── readme.md └── solution-comments-01.js └── 003 ├── readme.md └── solution-comments-01.js /001/solution.md: -------------------------------------------------------------------------------- 1 | https://gist.github.com/TatianaKsenofontova/795034d2aa8efdac66c013811fdd1440 2 | -------------------------------------------------------------------------------- /001/readme.md: -------------------------------------------------------------------------------- 1 | # Simple functions 2 | 3 | Create a function that takes a number that represents weight in Kilograms and returns a number that represents weight in Pounds. 4 | 5 | Put the body of function on a public gist and how you would use it on the console -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Programming lessons based on JavaScript 2 | 3 | For my love. 4 | 5 | I'm writing one each day. 6 | 7 | I'm following a [procedural](https://en.wikipedia.org/wiki/Procedural_(genre)) stlye of teaching. Remembering the things nobody told me when I was starting and focusing on knowledge that maximizes understanding from the start. 8 | 9 | 10 | ## Links 11 | 12 | ### Start with 13 | 14 | * http://jsforcats.com/ 15 | * https://www.khanacademy.org/computing/computer-programming/html-css 16 | * https://www.khanacademy.org/computing/computer-programming/programming 17 | * https://developer.mozilla.org/en-US/docs/Learn 18 | 19 | 20 | ### More advanced 21 | 22 | * https://teachyourselfcs.com/ 23 | * https://www.khanacademy.org/computing/computer-science 24 | 25 | 26 | ### Alternative and fun 27 | 28 | * https://hello.processing.org/ 29 | * https://www.youtube.com/user/Computerphile 30 | * https://www.youtube.com/channel/UC0e3QhIYukixgh5VVpKHH9Q 31 | * https://www.youtube.com/user/shiffman 32 | * https://www.youtube.com/user/numberphile 33 | * https://www.youtube.com/user/zachtronics -------------------------------------------------------------------------------- /002/readme.md: -------------------------------------------------------------------------------- 1 | # Expressions and referential transparency 2 | 3 | In this lesson we're going to explore expressions, referential transparency and how to combine functions to do more interesting things. 4 | 5 | An expression is any piece of code that _returns_ something. 6 | 7 | If you go the console and press `1` it returns `1`. It is a number expression. 8 | 9 | If I put `6 > 5` it wil return `true`. 10 | 11 | If I write 12 | 13 | ``` 14 | if (4 > 3) { 15 | var meow = "purr" 16 | } 17 | ``` 18 | I will see that it returns `undefined`, meaning that executing that code does not return anything. Instead of an expression, it is a statement. 19 | 20 | The important thing to have in mind is that if I write `6 > 5` I can safely replace that code by `true` and the program will run the same as before. 21 | 22 | If I write `4 * 2 + 6 / 2` is the same as if I wrote `8 + 3` is the same as if I wrote `11`. 23 | 24 | This concenpt is very useful to understand existing code and also to write more powerful code. 25 | 26 | For instance, we could create a function that multiplies by two: 27 | 28 | ``` 29 | var multiplyByTwo = x => x * 2; 30 | ``` 31 | 32 | And a function to add 4 33 | 34 | ``` 35 | var addFour = x => x + 4; 36 | ``` 37 | 38 | We could then use this two functions as such: 39 | 40 | ``` 41 | multiplyByTwo(22) + addFour(4); 42 | ``` 43 | 44 | What would the result be? Well, I could replace the first function call with 45 | 46 | ``` 47 | (22 * 2) + addFour(6); 48 | ``` 49 | 50 | And the second function call by 51 | 52 | ``` 53 | (22 * 2) + (6 + 4); 54 | ``` 55 | 56 | Let's try to do more interesting stuff. Imagine we live in a universe where only the number one exists; and we have this simple function: 57 | 58 | ``` 59 | var addOne = x => x + 1; 60 | ``` 61 | 62 | But out client would reeeeally like to have a function that adds two. How would we do this using only the `addOne` function? Think for a while and then check down... 63 | 64 | We could write something like this: 65 | 66 | ``` 67 | var addTwo = x => addOne(addOne(x)); 68 | ``` 69 | 70 | So what is going on in here? When we use a function, we can think of anyting inside the parenthesis as what is going in, and then the function name and the parenthesis as what is being returned (and something I can actively replace with the result itself) 71 | 72 | So when I use `addTwo(3)` this is what is going on: 73 | 74 | ``` 75 | addOne(addOne(3)) 76 | addOne(4) 77 | 5 78 | ``` 79 | 80 | So in that excersize we did two new things: 81 | 82 | * We used the return of one function as the input of another function 83 | * We used a function in the declaration of another function 84 | 85 | In JavaScript functions are [first class citizens](https://en.wikipedia.org/wiki/First-class_citizen), so we can do a lot of powerful things with them. 86 | 87 | ## Homework 88 | 89 | Write a function that gets passed a number and returns that number plus five. 90 | 91 | Now only using that previous function, write another function that gets passed a number and returns that number plus fifteen. 92 | 93 | Write a function that gets passed a number and returns that number multiplied by three 94 | Write a function that gets passed a number and returns that number plus two 95 | 96 | Now using only the two previous functions you created, write another function that when passed the number 10 will return the number 42 97 | 98 | Put all the results on a public gist and send me the link `<3` 99 | 100 | Remember to always test the functions on the browser console to check they work as expected 101 | 102 | ## Extra reading 103 | 104 | * https://www.khanacademy.org/computing/ap-computer-science-principles/programming-101/numbers-and-math/a/programming-mathematical-expressions 105 | * https://2ality.com/2012/09/expressions-vs-statements.html 106 | * https://www.sitepoint.com/what-is-referential-transparency/ 107 | 108 | -------------------------------------------------------------------------------- /003b/readme.md: -------------------------------------------------------------------------------- 1 | # Math, randomness, configuring stuff 2 | 3 | On the previous episode we reached this state: 4 | 5 | ```JavaScript 6 | var guessNumber = function(number, reference) { 7 | if (number > reference) { 8 | return "The number you guessed is bigger, try again" 9 | } else if (number < reference) { 10 | return "The number you guessed is smaller, try again" 11 | } else { 12 | return "You guessed the number! You're the best!" 13 | } 14 | } 15 | ``` 16 | 17 | So far we have a function that we can pass two parameters: Number that represents our guess and number that is the number to be guessed. 18 | 19 | Well, let's add more features to this game! I want the computer to generate a random number for me, and then I can use this number as the second parameter instead of having to choose a number. 20 | 21 | Alright! How do we get a random number? Here it is! 22 | 23 | ```JavaScript 24 | Math.random() 25 | ``` 26 | 27 | If you go and execute that on the console, you'll get a random [floating point](https://en.wikipedia.org/wiki/Floating-point_arithmetic) number between 0 and 1. 28 | 29 | Well... it's not exactly what we want, right? `Math.random()` would give us something like `0.38835543316122845` when what we want is... `24`. 30 | 31 | So if we want a random number between 0 and 100, and we have something that gives us a random number between 0 and 1... what could we do? We can multiply the result of `Math.random()` by 100. 32 | 33 | Go to the console and run this several times: 34 | 35 | 36 | ```JavaScript 37 | Math.random() * 100 38 | ``` 39 | 40 | Pretty cool! But we still get all this `.761447304320534` stuff we don't want. Let's get rid of it! Inside the [Math object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math) we have other useful stuff, like [`Math.floor()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor). With it we can do something like this: 41 | 42 | 43 | ```JavaScript 44 | Math.floor(Math.random() * 100) 45 | ``` 46 | 47 | Cool! Now we get a random number between 0 and 100 without the extra fluffy stuff. 48 | 49 | Let's put it inside of a function, because that seems to be what the cool kids are doing: 50 | 51 | ```JavaScript 52 | var getRandomNumber = function() { 53 | return Math.floor(Math.random() * 100) 54 | } 55 | ``` 56 | 57 | Now you can run `getRandomNumber()` and get a random number! And the beauty of this is that you hide all that complexity inside of a function. It's much cleaner to call `getRandomNumber` than `Math.floor(Math.random() * 100)`, and if in the future I decide to change the way I get a random number, I can just change the body of my function and everywhere else where I'm calling that function, I don't have to care. 58 | 59 | Hey, let's add more features to the `getRandomNumber()` function. Right now it gives me a number between 0 and 100... but what if I want a number between 0 and 10? Let's make it configurable and pass it a paramter. How would you do it? Write it and then check above... 60 | 61 | 62 | ```JavaScript 63 | var getRandomNumber = function(n) { 64 | return Math.floor(Math.random() * n) 65 | } 66 | ``` 67 | 68 | Now we can use `getRandomNumber` to generate a random number for us, and then `guessNumber` to play the game. Check this out in your console: 69 | 70 | 71 | ```JavaScript 72 | var getRandomNumber = function(n) { 73 | return Math.floor(Math.random() * n) 74 | } 75 | 76 | var guessNumber = function(number, reference) { 77 | if (number > reference) { 78 | return "The number you guessed is bigger, try again" 79 | } else if (number < reference) { 80 | return "The number you guessed is smaller, try again" 81 | } else { 82 | return "You guessed the number! You're the best!" 83 | } 84 | } 85 | 86 | var myRandomNumber = getRandomNumber(100); 87 | 88 | guessNumber(50, myRandomNumber) 89 | ``` 90 | 91 | Now you can keep executing `guessNumber(50, myRandomNumber)` with your number and play the game! 92 | 93 | Notice that we saved a result of `getRandomNumber(100)` on a variable and then we fed that variable to `guessNumber`. What would happen if we did something like this? 94 | 95 | ``` 96 | guessNumber(50, getRandomNumber(100)) 97 | ``` 98 | 99 | Well, in that case we're constantly rendering a new random number, so each time we guess, we're moving the goalpost. That wouldn't be a fun game to play, right? 100 | 101 | ## Homework 102 | 103 | Refactor getRandomNumber to accept two parameters: first parameter is lower bound of random number and second parameter is higher bound of random nuber. That is if I call `getRandomNumber(50, 150)` I would get a random number between 50 and 150. Put it on a public gist and all you know my love. 104 | 105 | Now also write this function in function arrow style. 106 | 107 | Let's add a little challenge... right now we can call `guessNumber()` as much as we want, but it would be cool if after 10 tries, we get a message that we lost. For this we need a variable that holds the amount of tries we've done, that adds one to itself after one try, and a conditional that after 10 tries it will just let us know we lost. Do your best and don't be afraid to experiment. Today I didn't have so much time to make a tutorial but it's also nice you get some days of lighter stuff. Love you babe <3 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /003/readme.md: -------------------------------------------------------------------------------- 1 | # Comparison, if statements 2 | 3 | We're gonna build a little game, so in this case we're gonna start exploring the things we need to build the game. 4 | 5 | The game will be "guess the number"; we think of a number from 1 to 100, if the number is not it, we can say "lower" or "higher" until the person guesses the number. 6 | 7 | So, the first thing we need to do is to compare. At some point we will need to compare the number the user tells us with the number we're thinking about. 8 | 9 | For this we need [comparison operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators). These guys are expressions that return a [boolean](https://developer.mozilla.org/en-US/docs/Glossary/Boolean) (either `true` or `false`) 10 | 11 | Remember from the last lesson that expressions are pieces of code that _return_ something. 12 | 13 | In the following example I'll put the code followed by `> ` which means what the code would return. Also keep in mind that anything followed by `//` is a [code comment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Comments), which does nothing and gives us as the developer an opportunity to add text to clarify our intentions. 14 | 15 | ```JavaScript 16 | 7 > 5 // Is seven bigger than five? 17 | > true 18 | 19 | 7 > 7 // Is seven bigger than seven? 20 | > false 21 | 22 | 7 >= 7 // Is seven bigger or equal than seven? 23 | > true 24 | 25 | 7 <= 9 // Is seven smaller or equal than nine? 26 | > true 27 | 28 | 7 === 7 // Is seven equal to seven? 29 | > true 30 | 31 | 7 !== 9 // Is seven not equal to nine? 32 | > true 33 | ``` 34 | 35 | Now go to the console and check: 36 | 37 | * Is nine equal to ten? 38 | * Is 42 bigger than 20? 39 | * Is 90 smaller or equal than 2? 40 | * Is 77 smaller than 22? 41 | * Is 321 bigger or equal than 321? 42 | * Is 0 smaller than -1? 43 | * Is 4 + 3 bigger than 20 / 2? 44 | * Is 90 * 3 smaller than 5 + 5? 45 | 46 | You can also read about [Operator precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence), which means that some stuff will happen before other stuff; like in math when you do `2 * 4 + 6 / 3` you know that multiplication and division will happen first, then they will _return_ their result and then the addition will happen. In programming we add more stuff like comparison operators, so in this case any math stuff will happen _before_ any comparison stuff. 47 | 48 | Ok! So we know how to compare one number to another number! What else do we need to do? Well, we need some [flow control](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling). When a number is bigger, something should happen; if the number is smaller, something else should happen; if it's the same, yet another thing. 49 | 50 | One of the most common ways to control flow is with the [if statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) (notice it's a statement, not an expression) 51 | 52 | An if statement is a way to compare some [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) value and decide whether we should do this or that. Let's build a security robot for our nightclub: 53 | 54 | ```JavaScript 55 | var securityRobot = function(age) { 56 | if (age >= 18) { 57 | return "Ok you can enter" 58 | } else { 59 | return "Sorry, come back in a few years" 60 | } 61 | } 62 | ``` 63 | 64 | Here we have a function that has an if statement where we're comparing the `age` parameter with a [hardcoded](https://en.wikipedia.org/wiki/Hard_coding) number: 18. 65 | 66 | In an if statement we have a predicate that gets evaluated, in this case `age >= 18`. What happens if we run `securityRobot(23)`? We can re-write the code (just to understand what is going on) as such: 67 | 68 | ```JavaScript 69 | var securityRobot = function(23) { 70 | if (23 >= 18) { 71 | return "Ok you can enter" 72 | } else { 73 | return "Sorry, come back in a few years" 74 | } 75 | } 76 | ``` 77 | 78 | ```JavaScript 79 | var securityRobot = function(23) { 80 | if (true) { 81 | return "Ok you can enter" 82 | } else { 83 | return "Sorry, come back in a few years" 84 | } 85 | } 86 | ``` 87 | 88 | ```JavaScript 89 | var securityRobot = function(23) { 90 | return "Ok you can enter" 91 | } 92 | ``` 93 | 94 | Our `age` variable gets replaced with 23, the comparison between 23 and 18 returns true, and thus the first branch gets executed. If we had evaluated `16`, then `16 >= 18` would have evaluated to false, and then the `else` branch would get executed instead. In this case, both branches are returning [strings](https://javascript.info/string), which are a type that allows us to save arbitrary text. 95 | 96 | Alright! Awesome. We know how to compare numbers to each other and how to decide stuff based on booleans. How would you create a function that takes two numbers (the guess number and the reference number) and returns a string that tells me whether it's bigger or smaller? Try to play around with the console and then come back... 97 | 98 | Alright, this is what we could do with the knowledge we have so far: 99 | 100 | 101 | ```JavaScript 102 | var guessNumber = function(number, reference) { 103 | if (number > reference) { 104 | return "The number you guessed is bigger, try again" 105 | } else { 106 | return "The number you guessed is smaller, try again" 107 | } 108 | } 109 | ``` 110 | 111 | Nice! We can call this function like this `guessNumber(42, 77)` where 77 is the number we need to guess and 42 is the number we're proposing. In this case, the function would return "The number you guessed is smaller, try again". But because you're so intelligent, you probably spotted a big problem with this function. It will never guess the number! If we were to run `guessNumber(77, 77)` it will still tell us the number is smaller (because `77 > 77 === false` and thus the `else` branch gets executed). 112 | 113 | An if statement can take more than one condition, so let's try one more time: 114 | 115 | ```JavaScript 116 | var guessNumber = function(number, reference) { 117 | if (number > reference) { 118 | return "The number you guessed is bigger, try again" 119 | } else if (number < reference) { 120 | return "The number you guessed is smaller, try again" 121 | } else { 122 | return "You guessed the number! You're the best!" 123 | } 124 | } 125 | ``` 126 | 127 | Go and test this version of `guessNumber` on your console and see if it actually does what we want it to do. 128 | 129 | Nice! We have an [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product) of our game! It's very simple code, it does what it should do... but it would be nice for the computer to create a random number for us, right? And then instead of us having to pass it the guessing number, we could feed it the result of creating a random number. We're gonna do that in the next lesson ;) 130 | 131 | For now we've learned about 132 | 133 | * Comparison operators 134 | * If statements 135 | * Code comments 136 | * Operator precedence 137 | 138 | ## Homework 139 | 140 | With string interpolation we can put stuff inside of a string. Normally strings are all like `"hey wuzzup"` but with string interpolation we get stuff like 141 | 142 | ``` 143 | var cat = "lovely" 144 | var myCat = `My cat is quite ${cat}, don't you think` 145 | ``` 146 | 147 | Notice that `myCat` is using this ``` funky characters and the `${}` syntax for interpolation. 148 | 149 | Go and run that in the console and see what's inside `myCat` 150 | 151 | With this knowledge let's [refactor](https://refactoring.com/) securityRobot. What could we improve? Well, if I'm not older than 18 it now tells me `"Sorry, come back in a few years"` but it could actually tell me in how many years I should come back, right? 152 | 153 | Check this code and change `yourCodeHere` so that `securityRobot` returns a string that lets me know in how many years I should return, and put it in a public gist: 154 | 155 | ```JavaScript 156 | var securityRobot = function(age) { 157 | if (age >= 18) { 158 | return "Ok you can enter" 159 | } else { 160 | return `Sorry, come back in ${yourCodeHere} years` 161 | } 162 | } 163 | ``` 164 | 165 | Cool! Our `securityRobot` has been deployed to production and is working in 5 different nightclubs around the world. As we saw before, the number 18 is hardcoded in our code. This has become a problem, because one of our clients wants to let people in who are equal or older than 21. 166 | 167 | Refactor `securityRobot` so that it takes a second parameter (the age to compare to) and returns the appropriate string (and also tells me how many years I'll have to wait if I'm not old enough) and put it in a public gist. 168 | 169 | Write a function that takes a string that represents a name and returns a string such as `\`Hello ${myname}!\`` and put it in the public gist. Write this function twice, using [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and the older [function keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function). This is an example for you to remember the difference, a function that adds one: 170 | 171 | ```JavaScript 172 | // Arrow function expression 173 | var addOne = x = x + 1; 174 | 175 | // Function expression 176 | var addOne = function (x) { 177 | return x + 1; 178 | } 179 | ``` 180 | 181 | Write a function that takes 3 parameters, all numbers. The first two parameters are whatever number and the third parameters is the difference between the numbers. If the difference between the numbers is smaller than the third parameter, return the string "Yup this two numbers are close to each other" and if not "No they are pretty far apart" and put it in a public gist. 182 | 183 | `<3` -------------------------------------------------------------------------------- /003/solution-comments-01.js: -------------------------------------------------------------------------------- 1 | //= Comments starting with = are my own (DrummerHead) 2 | 3 | //Comparisons: http://prntscr.com/pwlmph 4 | //= Great job! 5 | // ____________________________________________ 6 | // 7 | //What does it mean? http://prntscr.com/pwlt54 8 | //= Ok, let's put this in a little function to understand it better 9 | 10 | var increaseFunky = function(num) { 11 | var x = num; 12 | while (x < 10) {x++}; 13 | return x; 14 | } 15 | 16 | // This is a function that takes a number, copies that number to an internal 17 | // variable, and executes a while statement 18 | // A while statement will keep executing as long as the predicate remains true, 19 | // which also means that to avoid an infinite loop, the conditional has to be 20 | // mutated by the body of the while in some way. 21 | // For instance if I do this: 22 | 23 | while (6 > 3) { 24 | console.log('meow') 25 | } 26 | 27 | // It will execute forever, since the predicate 6 > 3 is always true. 28 | // Now then what is the plus plus thing? Let's see this example: 29 | 30 | var bob = 7; 31 | var bob = bob + 1; 32 | console.log(bob); 33 | 34 | // In here we declare a variable called bob that holds the number 7. Then we 35 | // declare that bob is equal to bob plus one. The declaration of the new 36 | // variable is self-referential, it evaluates the previous value of itself and 37 | // then it adds one. 38 | 39 | var bobPlus = 7; 40 | var bobPlus = bobPlus++; 41 | console.log(bob); 42 | 43 | // This example I'm showing you here does exactly the same. The plus plus is a 44 | // shorthand way to add one to a variable, since in mutable style this is a 45 | // task that happens relatively often to control loop states 46 | // Let's see what happens to increaseFunky when I pass it the value 2 47 | // 48 | 49 | var increaseFunky = function(num) { 50 | var x = num; 51 | while (x < 10) {x++}; 52 | return x; 53 | } 54 | 55 | var increaseFunky = function(2) { 56 | var x = 2; // Two gets stored here 57 | while (x < 10) {x++}; 58 | return x; 59 | } 60 | 61 | // And then we enter the while loop 62 | 63 | while (x < 10) {x++}; 64 | // So the body of the while loop gets executed, which adds one to x. Then x < 10 65 | // gets evaluated (in this case 3 < 10) and it returns true. Since it 66 | // returns true, the while body get executed again, that is 3++. Then the 67 | // condition gets executed again, until we reach a point where 10 < 10 returns 68 | // false and we break out of the while loop. When that happens, we're left with 69 | // x that is equal to 10 70 | 71 | 72 | // ____________________________________________ 73 | var WhenWeWillSeeEachOtherAgain = function (days) { 74 | if (days<=14) { 75 | return "( ˘⌣˘)♡(˘⌣˘ )" 76 | }else{ 77 | return "(╥﹏╥) No. fuck it. we are stronger than reality. Anyway, it will be less than 14" 78 | } 79 | } 80 | 81 | // Mi amor <3 what a lovely function ^^ 82 | // Be conscious of indentation, which is how you use whitespace to organize your code. 83 | // Indentation is like comments, the computer doesn't need it; but code is 84 | // created and read by humans and so indentation and comments help us 85 | // understand what we write. 86 | // To get a feel of the indentation you should use, you can copy paste whatever code you write in here to the left: 87 | // https://prettier.io/playground/ 88 | // and on the right you'll see the code with a more standard indentation 89 | 90 | var WhenWeWillSeeEachOtherAgain = function(days) { 91 | if (days <= 14) { 92 | return "( ˘⌣˘)♡(˘⌣˘ )"; 93 | } else { 94 | return "(╥﹏╥) No. fuck it. we are stronger than reality. Anyway, it will be less than 14"; 95 | } 96 | }; 97 | 98 | // Always try to write code properly from the first time, but learning this 99 | // takes time so at the beginning just write code that works, and after you see 100 | // that it works copy it in the link above and make the necessary changes to 101 | // the code you wrote previously. The more you do this the more your brain will 102 | // pattern match how to do it properly in the future :D 103 | 104 | // ____________________________________________ 105 | //Ok, the first try was failed: 106 | 107 | var GuessNumber = function (guess, reference) { // I was so happy when I saw,that we have the same name of the variable :3 108 | if (guess>reference) { 109 | return "It's bigger. Try again" 110 | }else{ 111 | return "It's less. Try again" 112 | if (guess===reference) { // But now I see the right solution and I wanna slap my forhead 113 | return "That's it" 114 | } 115 | } 116 | 117 | // One syntax error with this example is you missed one closing } 118 | 119 | var GuessNumber = function(guess, reference) { // I was so happy when I saw,that we have the same name of the variable :3 120 | if (guess > reference) { 121 | return "It's bigger. Try again"; 122 | } else { 123 | return "It's less. Try again"; 124 | } 125 | if (guess === reference) { // But now I see the right solution and I wanna slap my forhead 126 | return "That's it"; 127 | } 128 | }; 129 | 130 | // One problem with this implementation is that the first if will encompass all 131 | // the possible states. In the first condition you say "is guess bigger than 132 | // reference" and if it is, something will happen. And _else_ (meaning anything 133 | // else that is not the first condition) then execute the second branch. The 134 | // second if will never have an opportunity to be executed, the functio returns 135 | // and then any other code continues to execue 136 | 137 | // ____________________________________________ 138 | //then I cheated a little and searched in google a possible options for working with several conditions 139 | 140 | //aaand.... 141 | 142 | //I failed again ¯\_(ツ)_/¯ 143 | 144 | var guessnumber = function(guess, reference) { 145 | let message = (guess>reference) ? "It's less. Try again" : 146 | (guess reference 159 | ? "What you guessed is too big" 160 | : (guess < reference ? "What you guessed is too small" : "You guessed right!") 161 | }; 162 | 163 | 164 | // _____________________________________________ 165 | //Only the third time I got the right solution 166 | 167 | var guessnumber = function(number, reference) { 168 | if (number > reference) 169 | {return "It's bigger. Tyr again"} 170 | else if (number < reference) 171 | {return "It's less. Try again"} 172 | else 173 | {return "that''s it!"}} 174 | 175 | // Yes! You got it :D and you did very well in also showing me how you got to 176 | // the right solution, since I can give you intermediate feedback 177 | // With nicer indentation it looks like this: 178 | 179 | var guessnumber = function(number, reference) { 180 | if (number > reference) { 181 | return "It's bigger. Tyr again"; 182 | } else if (number < reference) { 183 | return "It's less. Try again"; 184 | } else { 185 | return "that''s it!"; 186 | } 187 | }; 188 | 189 | // Compare it with the version above with the two ifs (the one where I told you 190 | // the code never reaches the second if) and see what the difference is 191 | 192 | 193 | 194 | 195 | // ________________________________________________ 196 | 197 | // Refactoring of the securityRobot: 198 | 199 | //For the client who wants to let people in who are equal or older than 21: 200 | 201 | var securityRobot = function(age) { //perhaps I didn't understand the task correctly 202 | if (age >= 21) { 203 | return "Ok you can enter" 204 | } else { 205 | return `Sorry, come back in ${21-age} years` 206 | } 207 | } 208 | 209 | //For the other clients: 210 | 211 | var securityRobot = function(age) { 212 | if (age >= 18) { 213 | return "Ok you can enter" 214 | } else { 215 | return `Sorry, come back in ${18-age} years` 216 | } 217 | } 218 | 219 | // So, in this excercise what I wanted you to do is to add an extra parameter 220 | // to the securityRobot function. The magic of programming is configuration. We 221 | // can have a function that handles 18 year old and another one that handles 21 222 | // year old; but we can also have a single function that handles n years old. 223 | // How could we do this? Instead of hardcoding (remember the concept) the 224 | // value, we can pass it as a parameter. Check this version: 225 | 226 | var securityRobot = function(age, maxAge) { 227 | if (age >= maxAge) { 228 | return "Ok you can enter"; 229 | } else { 230 | return `Sorry, come back in ${maxAge - age} years`; 231 | } 232 | }; 233 | 234 | // With this ^ implementation we can have a securityRobot that takes two parameters. 235 | // We can do even fancier things like this: 236 | 237 | var securityRobotBuilder = function(maxAge) { 238 | return function(age) { 239 | if (age >= maxAge) { 240 | return "Ok you can enter"; 241 | } else { 242 | return `Sorry, come back in ${maxAge - age} years`; 243 | } 244 | }; 245 | }; 246 | 247 | var securityRobot18 = securityRobotBuilder(18); 248 | 249 | securityRobot18(16) 250 | // "Sorry, come back in 2 years" 251 | 252 | securityRobot18(19) 253 | // "Ok you can enter" 254 | 255 | var securityRobot21 = securityRobotBuilder(21); 256 | 257 | securityRobot21(18) 258 | // "Sorry, come back in 3 years" 259 | 260 | securityRobot21(21) 261 | // "Ok you can enter" 262 | 263 | // securityRobotBuilder is a function that takes a number and returns a new 264 | // function. This function will also take another number, and eventually will 265 | // return a string. So you can assign the calling of securityRobotBuilder to a 266 | // variable that now contains another function, this function will keep the 267 | // value given to it by the surrounding function (concept called closure). 268 | // This is more advanced, but it's nice for you to know that things like this exist. 269 | 270 | 271 | // _________________________________________________ 272 | // Arrow function expression 273 | var myname = "Tatiana" 274 | var Hello = `Hello, ${myname}` // I think I'm a little broken. It's 4:13 a.m. I'll try again in the morning 275 | 276 | // Function expression 277 | var HelloName = function (myname) 278 | { 279 | var myname = readline(); 280 | return 'Hello, ${myname}'; 281 | } 282 | // __________________________________________________ 283 | // You said, that the third parameters is the difference between the numbers. Should it be a random number or is it really the difference between the numbers? 284 | // If the third parameters is the difference between the numbers then the first number and the second number are always "pretty far appart" 285 | bc the difference between the numbers can't be smaller than the third parameter. 286 | So I was solving this task taking the third parameters as a random number. 287 | 288 | var threeParameters = function(TheFirstNum, TheSecondNum, Difference) { 289 | if (Math.abs(TheFirstNum-TheSecondNum) < Difference) { 290 | return "Yup this two numbers are close to each othe" 291 | } else { 292 | return "No they are pretty far apart" 293 | } 294 | } 295 | 296 | // Yes, this is the desired implementation :) everything that you pass as a 297 | // parameter to a function is something to configure. You would never pass to a 298 | // function something that you can calculate with the given parameters. I 299 | // mean... you can, but why would you :) let the computer do it for you. 300 | 301 | 302 | // You did great mi amor! <3 303 | // 304 | // Some extra tips: When you save a gist you can add an extension to the 305 | // filename. If you go like "homework4.js" it will infer you're writing 306 | // JavaScript and will syntax highlight the code for you -------------------------------------------------------------------------------- /003b/solution-comments-01.js: -------------------------------------------------------------------------------- 1 | // Thank you for doing that for me. 2 | //_________________________________________________________________________________________ 3 | //What is that?))) http://prntscr.com/pyx5af It says " Who are you? I didnt't invite you" 4 | // 5 | // Some sites will serve you comments in the developer console. 6 | // https://www.console.love/ 7 | // 8 | //_________________________________________________________________________________________ 9 | 10 | //Refactoring getRandomNumber: 11 | 12 | var getrandomnumber = function(min,max) { 13 | return min+Math.floor(Math.random()*(max-min+1)) 14 | } 15 | 16 | _________________________________________________________________________________________ 17 | //In the beginning I did it like: 18 | 19 | var getrandomnumber = function(min,max) { 20 | return min+Math.floor(Math.random()*(max-min)) 21 | } 22 | 23 | // But it's never given me 10: http://prntscr.com/pytmug 24 | // 25 | // An alternative is to use round instead of floor 26 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round 27 | // 28 | // This function after I pass it down https://prettier.io/playground/ 29 | 30 | var getrandomnumber = function(min, max) { 31 | return min + Math.floor(Math.random() * (max - min)); 32 | }; 33 | 34 | // The function in arrow style: 35 | 36 | var getrandomnumber = (min, max) => 37 | min + Math.floor(Math.random() * (max - min)); 38 | 39 | 40 | 41 | //_________________________________________________________________________________________ 42 | 43 | 44 | // Hm. The second task's very interesting. I should think of it more. 45 | // The draft: 46 | 47 | 48 | var Count = 0; 49 | 50 | var getRandomNumber = function(n) { 51 | return Math.floor(Math.random() * n) 52 | } 53 | 54 | var guessNumber = function(number, reference) { 55 | if (number > reference) { 56 | Count++ 57 | return "The number you guessed is bigger, try again" 58 | } else if (number < reference) { 59 | Count++ 60 | return "The number you guessed is smaller, try again" 61 | } else { 62 | return "You guessed the number! You're the best!" 63 | } 64 | } 65 | 66 | var myRandomNumber = getRandomNumber(100); 67 | if (Count > 10) { 68 | return('You lost'); 69 | } 70 | } 71 | // ____________________________________________________________________________________________________________ 72 | 73 | // Good morning. Ok, it doesn't work, but I'm not going to give up. I've been thinting of it all night andmorning and it starts to drive me crazy 74 | 75 | 76 | 77 | var Count = 0; 78 | 79 | var getRandomNumber = function(n) { 80 | return Math.floor(Math.random() * n) 81 | } 82 | 83 | var guessNumber = function(number, reference) { 84 | if (number > reference) { 85 | Count = Count + 1 86 | return "The number you guessed is bigger, try again" 87 | } else if (number < reference) { 88 | Count = Count + 1 89 | return "The number you guessed is smaller, try again" 90 | } else { 91 | return "You guessed the number! You're the best!" 92 | } 93 | } 94 | 95 | var myRandomNumber = getRandomNumber(100); 96 | if (Count > 10) { 97 | return('You lost'); 98 | } 99 | } 100 | 101 | // Alright! Let's massage this code a bit. First, let's indent it properly 102 | // I went to https://prettier.io/playground and I got this back: 103 | // (while it also warned me of a floating } that shouldn't be there) 104 | 105 | 106 | var Count = 0; 107 | 108 | var getRandomNumber = function(n) { 109 | return Math.floor(Math.random() * n); 110 | }; 111 | 112 | var guessNumber = function(number, reference) { 113 | if (number > reference) { 114 | Count = Count + 1; 115 | return "The number you guessed is bigger, try again"; 116 | } else if (number < reference) { 117 | Count = Count + 1; 118 | return "The number you guessed is smaller, try again"; 119 | } else { 120 | return "You guessed the number! You're the best!"; 121 | } 122 | }; 123 | 124 | var myRandomNumber = getRandomNumber(100); 125 | 126 | if (Count > 10) { 127 | return "You lost"; 128 | } 129 | 130 | // And not let's remove capitalization on the count variable. Variables that 131 | // start with a capital letter are associated with classes, and this is not a 132 | // class 133 | // 134 | // Read more about variable naming: 135 | // https://javascript.info/variables#variable-naming 136 | 137 | var count = 0; 138 | 139 | var getRandomNumber = function(n) { 140 | return Math.floor(Math.random() * n); 141 | }; 142 | 143 | var guessNumber = function(number, reference) { 144 | if (number > reference) { 145 | count = count + 1; 146 | return "The number you guessed is bigger, try again"; 147 | } else if (number < reference) { 148 | count = count + 1; 149 | return "The number you guessed is smaller, try again"; 150 | } else { 151 | return "You guessed the number! You're the best!"; 152 | } 153 | }; 154 | 155 | var myRandomNumber = getRandomNumber(100); 156 | 157 | if (count > 10) { 158 | return "You lost"; 159 | } 160 | 161 | // So what we have so far is a variable count that holds a number, and then 162 | // inside guessNumber we're increasing this variable for some branches in the 163 | // conditional. So far so good! 164 | // 165 | // But, how do we actually play the game? By running the guessNumber function, 166 | // like this: 167 | 168 | guessNumber(50, myRandomNumber) 169 | 170 | // So the problem we see here is that 171 | 172 | if (count > 10) { 173 | return "You lost"; 174 | } 175 | 176 | // Is code that somehow got lost. We don't really reach this code anywhere. I 177 | // have to keep executing guessNumber(50, myRandomNumber) with a different 178 | // number, and it is the responsibility of this function to tell me at some 179 | // point I have tried too many times. Let's see what else we can do 180 | 181 | var count = 0; 182 | 183 | var getRandomNumber = function(n) { 184 | return Math.floor(Math.random() * n); 185 | }; 186 | 187 | var guessNumber = function(number, reference) { 188 | if (count > 10) { 189 | return "You lost"; 190 | } 191 | 192 | if (number > reference) { 193 | count = count + 1; 194 | return "The number you guessed is bigger, try again"; 195 | } else if (number < reference) { 196 | count = count + 1; 197 | return "The number you guessed is smaller, try again"; 198 | } else { 199 | return "You guessed the number! You're the best!"; 200 | } 201 | }; 202 | 203 | var myRandomNumber = getRandomNumber(100); 204 | 205 | guessNumber(50, myRandomNumber) 206 | 207 | 208 | // What I did here is move the count check to the beggining of the body of the 209 | // function. 210 | // What happens now is that when I run guessNumber it first checks the amount 211 | // of times. If the predicate (count > 10) is false, then nothing happens and 212 | // the code after it gets exectuted. This is a statement, it does not return 213 | // any value, it's just a way to decide whether to run some code or not. 214 | // 215 | // Now, if count IS bigger than 10, then the code inside gets executed; that is 216 | // the return statement. A function declaration can have many return statements 217 | // inside, but only one will return. At the moment the function reaches the 218 | // return statement, the function returns and it stops execution. When a 219 | // function reaches its return statement, it just washes its hands and says "my 220 | // job here is done" 221 | // 222 | // So with this knowledge, we can have an early return that just short-circuits 223 | // the game logic. 224 | // 225 | // Cool! So, this should work. We put the previous code in the console, and 226 | // then we run 227 | 228 | guessNumber(50, myRandomNumber) 229 | 230 | // Several times. Try it out! So... did you see anything in particular? It 231 | // seems I had to run guessNumber(50, myRandomNumber) 12 times instead of 10 232 | // for it to tell me I lost... let's try to understand what is going on... code 233 | // is running and things are happening... it would be cool if we could 234 | // understand how the state of the code is changing through time 235 | // 236 | // The developer console is quite useful for us because it allows us several 237 | // ways of debuggging our code. One of these ways is with console.log() 238 | // 239 | // https://developer.mozilla.org/en-US/docs/Web/API/Console/log 240 | // https://developers.google.com/web/tools/chrome-devtools/console/api?utm_campaign=2016q3 241 | // 242 | // Basically we feed console.log with something, and then we will see that in the console. 243 | // 244 | // Let's put it to the test! 245 | 246 | var count = 0; 247 | 248 | var getRandomNumber = function(n) { 249 | return Math.floor(Math.random() * n); 250 | }; 251 | 252 | var guessNumber = function(number, reference) { 253 | console.log("count") 254 | console.log(count) 255 | 256 | if (count > 10) { 257 | return "You lost"; 258 | } 259 | 260 | if (number > reference) { 261 | count = count + 1; 262 | return "The number you guessed is bigger, try again"; 263 | } else if (number < reference) { 264 | count = count + 1; 265 | return "The number you guessed is smaller, try again"; 266 | } else { 267 | return "You guessed the number! You're the best!"; 268 | } 269 | }; 270 | 271 | var myRandomNumber = getRandomNumber(100); 272 | 273 | guessNumber(50, myRandomNumber) 274 | 275 | // If we use guessNumber(50, myRandomNumber) we can see extra output on the 276 | // console. first we see the text "count" and then we see a number, which is 277 | // the contents of the variable count. After this, we see the return value of 278 | // the function. 279 | // 280 | // The first thing we can conclude is that when we do the first try, the count 281 | // is at 0. Perhaps we should initiate the variable with the number 1 282 | 283 | 284 | var count = 1; 285 | 286 | var getRandomNumber = function(n) { 287 | return Math.floor(Math.random() * n); 288 | }; 289 | 290 | var guessNumber = function(number, reference) { 291 | console.log("count") 292 | console.log(count) 293 | 294 | if (count > 10) { 295 | return "You lost"; 296 | } 297 | 298 | if (number > reference) { 299 | count = count + 1; 300 | return "The number you guessed is bigger, try again"; 301 | } else if (number < reference) { 302 | count = count + 1; 303 | return "The number you guessed is smaller, try again"; 304 | } else { 305 | return "You guessed the number! You're the best!"; 306 | } 307 | }; 308 | 309 | var myRandomNumber = getRandomNumber(100); 310 | 311 | guessNumber(50, myRandomNumber) 312 | 313 | // Now when we use guessNumber(50, myRandomNumber) several times, we can see 314 | // that count represents the number of tries we did. But we still need to try 315 | // 11 times to fail, it should be 10! Our predicate right now is count > 10, 316 | // which means that count has to be 11 for the predicate to return true. We can 317 | // also use >= comparison operator 318 | 319 | 320 | var count = 1; 321 | 322 | var getRandomNumber = function(n) { 323 | return Math.floor(Math.random() * n); 324 | }; 325 | 326 | var guessNumber = function(number, reference) { 327 | console.log("count") 328 | console.log(count) 329 | 330 | if (count >= 10) { 331 | return "You lost"; 332 | } 333 | 334 | if (number > reference) { 335 | count = count + 1; 336 | return "The number you guessed is bigger, try again"; 337 | } else if (number < reference) { 338 | count = count + 1; 339 | return "The number you guessed is smaller, try again"; 340 | } else { 341 | return "You guessed the number! You're the best!"; 342 | } 343 | }; 344 | 345 | var myRandomNumber = getRandomNumber(100); 346 | 347 | guessNumber(50, myRandomNumber) 348 | 349 | // Now we try it in our console, and we see that we got what we wanted! Are we 350 | // done now? Not yet! The console statements are just for us to debug, now that 351 | // we reached a certain state of finished, we have to remove them 352 | 353 | 354 | var count = 1; 355 | 356 | var getRandomNumber = function(n) { 357 | return Math.floor(Math.random() * n); 358 | }; 359 | 360 | var guessNumber = function(number, reference) { 361 | if (count >= 10) { 362 | return "You lost"; 363 | } 364 | 365 | if (number > reference) { 366 | count = count + 1; 367 | return "The number you guessed is bigger, try again"; 368 | } else if (number < reference) { 369 | count = count + 1; 370 | return "The number you guessed is smaller, try again"; 371 | } else { 372 | return "You guessed the number! You're the best!"; 373 | } 374 | }; 375 | 376 | var myRandomNumber = getRandomNumber(100); 377 | 378 | guessNumber(50, myRandomNumber) 379 | 380 | // And now yeah, we're done! 381 | // 382 | // We can get a little deeper and explain what is going on further. 383 | // 384 | // If we take a look at getRandomNumber we can see that it is a function that 385 | // takes a number and returns a number. Nothing else is going on. Although it 386 | // is not deterministic, it is "pure" in the sense that the function takes a 387 | // value, does some stuff with that and returns a value. Nothing else is 388 | // changed 389 | // 390 | // Now if we take a look at guessNumber, we use an external variable to affect 391 | // the flow of our program. In some cases we're mutating the variable. This is 392 | // a function that takes two numbers and returns a string, but it is not pure 393 | // since it involves code outside of the body of the function. This function is 394 | // affecting the surrounding system. Is this "bad"? It just is. For this use 395 | // case, it's a good enough solution. For more complex systems, we try to avoid 396 | // this since keeping track of how our code works can get very tricky. 397 | // 398 | // https://dev.to/ysael/functional-programming-basics-part-1-pure-function-e55 399 | 400 | // _________________________________________________________________________________ 401 | //I often see things like 402 | let x = 1; 403 | alert( +x ); // 1 404 | 405 | // Could you explain me how to use it? 406 | // 407 | // The let is like the var 408 | let x = 1; 409 | // is pretty similar to 410 | var x = 1; 411 | // and the difference between the two is not such an important concept for us 412 | // right now. They both hold a value. 413 | // 414 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var 415 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let 416 | // 417 | // the alert is actually a method of the globally accessible window object 418 | // https://developer.mozilla.org/en-US/docs/Web/API/Window/alert 419 | // 420 | // you can go right now to the console and run 421 | 422 | alert("Tanyusha is not only sexy but also super smart") 423 | 424 | // And you'll see a little window popping and showing the message 425 | // Alerts used to be used for very simple user interaction and for debugging 426 | // Nowadays console.log is preffered for debugging, which we discussed earlier 427 | // 428 | // 429 | // now by +x I imagine you mean ++x. +x is the + operator and an x, it's 430 | // missing something before to do something. ++x is like x++ but the difference 431 | // is when is the addition done. It's not so important for us to understand at 432 | // this point, but you can read about it nontheless: 433 | // https://dev.to/somedood/the-difference-between-x-and-x-44dl 434 | // 435 | // <3 --------------------------------------------------------------------------------