|
| 1 | +# Lesson plan |
| 2 | +``` |
| 3 | +> Focus on having lots of in class exercises. |
| 4 | +
|
| 5 | +> DONT teach everything, let the students investigate topics on their own aswell! |
| 6 | +
|
| 7 | +> Focus on how to read documentation, google answers and google errors!! |
| 8 | +
|
| 9 | +> Teach towards the students being able to solve the homework |
| 10 | +``` |
| 11 | + |
| 12 | +Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you dont have access, write to one from the core team. You can see an example below! |
| 13 | + |
| 14 | +To find examples of what teachers have taught before go to the class branches in the classwork folder, Fx [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork) |
| 15 | + |
| 16 | +If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!! |
| 17 | + |
| 18 | +--- |
| 19 | +- Recap of js basics |
| 20 | + - Variables |
| 21 | + - Types |
| 22 | + - Conditionals |
| 23 | + - Functions |
| 24 | + - For loop |
| 25 | + - scope |
| 26 | + - Arrays |
| 27 | + - Objects |
| 28 | + - Ask the students what they need to get repeated. Or figure it out by doing some code example. |
| 29 | +- Solving problems |
| 30 | + - https://dev.to/aprietof/5-steps-to-solving-programming-problems--502d |
| 31 | +- [Code inspiration](#fibonacci-sequence) |
| 32 | +- [Exercises](#exercises) |
| 33 | + |
| 34 | +This class is about getting the basics hammered down. We have had a lot of students who think the js module is too difficult. That is why this class is here, too ease the steepness of the js learning curve. |
| 35 | + |
| 36 | +Focus on |
| 37 | +- Recapping what the students struggle with |
| 38 | +- Letting the students learn a framework for solving problems |
| 39 | +- Lots and lost of exercises 💪 |
| 40 | + |
| 41 | +## Code inspiration |
| 42 | + |
| 43 | +### Fibonacci Sequence |
| 44 | +Given a specific number in the fibonacci sequence return the fibonachi number. |
| 45 | + |
| 46 | +```js |
| 47 | +// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 |
| 48 | + |
| 49 | +fib(5) // 3 |
| 50 | +fib(10) // 34 |
| 51 | +``` |
| 52 | + |
| 53 | +Try not to just solve the problem, but explain what you are doing and thinking! |
| 54 | + |
| 55 | +Try using this as a framework for solving the problem: https://dev.to/aprietof/5-steps-to-solving-programming-problems--502d |
| 56 | + |
| 57 | +## Exercises |
| 58 | + |
| 59 | +### Fizz buzz |
| 60 | + |
| 61 | +This is a classic programming task. |
| 62 | + |
| 63 | +Create a function that prints the numbers from 1 to 100. But for multiples of three print `Fizz` instead of the number and for the multiples of five print `Buzz`. For numbers which are multiples of both three and five print `FizzBuzz`. |
| 64 | + |
| 65 | +When that works. Make the two number for multiples into parameters. So it can be called like this: |
| 66 | + |
| 67 | +`fizzBuzz(4, 12);` |
| 68 | + |
| 69 | +### Build a sentiment analyzer |
| 70 | + |
| 71 | +A sentiment analyzer is some functionality that figures out how positive/negative a sentence is. |
| 72 | + |
| 73 | +Fx the sentence `I am mega super awesome happy" Should have a high score |
| 74 | +The sentence "I hate doing boring stuff" should have a low score. |
| 75 | + |
| 76 | +Create a function that takes a string as a parameter. calling the function will return an object with `score`, `positiveWords` and `negativeWords`. You decide how the score should be implemented and what words are negative and positive. |
| 77 | + |
| 78 | +Here is an example of using the function: |
| 79 | + |
| 80 | +```js |
| 81 | +const sentimentScoreObject = getSentimentScore('I am mega super awesome happy'); |
| 82 | + |
| 83 | +console.log(sentimentScoreObject); |
| 84 | +/* |
| 85 | +{ |
| 86 | + score: 3, |
| 87 | + positiveWords: ['happy', 'awesome', 'super'], |
| 88 | + negativeWords: [], |
| 89 | +} |
| 90 | +*/ |
| 91 | +``` |
| 92 | + |
| 93 | +### Credit card number formatter |
| 94 | + |
| 95 | +This is a very real world example of a problem i got at my previous work. I was tasked to implement one of the smart credit card input fields, where the credit card numbers are seperated with a space. Fx inputting 123456789 would show 1234 5678 9. |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | +Create a function that takes a number as parameter. The function should return the following object: |
| 100 | + |
| 101 | +```js |
| 102 | +const formattedCreditCardObject = formatCreditCardNumber(123456789); |
| 103 | +console.log(formattedCreditCardObject); |
| 104 | +/* |
| 105 | +{ |
| 106 | + original: 123456789, |
| 107 | + formatted: "1234 5678 9", |
| 108 | +} |
| 109 | +*/ |
| 110 | +``` |
| 111 | + |
| 112 | +Thins to consider: |
| 113 | +- What should happen if the function is called with an argument that is not a number? |
| 114 | + |
| 115 | +### Character frequencies |
| 116 | + |
| 117 | +Write a function that counts the frequency of characters in a string: |
| 118 | + |
| 119 | +```js |
| 120 | +console.log(getCharacterFrequencies('happy')); |
| 121 | +/* |
| 122 | +{ |
| 123 | + characters: [ |
| 124 | + { |
| 125 | + character: 'a', |
| 126 | + count: 1 |
| 127 | + }, |
| 128 | + { |
| 129 | + character: 'h', |
| 130 | + count: 1 |
| 131 | + }, |
| 132 | + { |
| 133 | + character: 'p', |
| 134 | + count: 2 |
| 135 | + }, |
| 136 | + { |
| 137 | + character: 'y', |
| 138 | + count: 1 |
| 139 | + } |
| 140 | + ], length: 5 |
| 141 | +} |
| 142 | +*/ |
| 143 | +``` |
| 144 | + |
| 145 | +### Palindromic substring |
| 146 | +Write a function that finds the longest palindromic substring of a given string. |
| 147 | + |
| 148 | + |
| 149 | +### Credit card info |
| 150 | + |
| 151 | +Similar to the format credit card number, now we need to identify the credit card type. |
| 152 | + |
| 153 | +```js |
| 154 | +console.log(getCardInfo(4781321334789876)); // 'visa' |
| 155 | +``` |
| 156 | + |
| 157 | +How can we find out what rules there are for credit cards? Programmers best friend is always available :) |
| 158 | + |
| 159 | +### Tic Tac Toe |
| 160 | + |
| 161 | +Draw a tic tac toe game. |
| 162 | + |
| 163 | +Write a function called `getRenderedGame(position)` that takes `position` as parameter. `position` is a two dimensional array that shows the position of a game. |
| 164 | + |
| 165 | +Here is an example: |
| 166 | + |
| 167 | +With the following two dimensional array |
| 168 | +```js |
| 169 | +const position = [ |
| 170 | + ['x', 'o', ' '], |
| 171 | + [' ', 'o', ' '], |
| 172 | + [' ', 'o', 'x'] |
| 173 | +]; |
| 174 | + |
| 175 | +const renderedGame = getRenderedGame(position); |
| 176 | +console.log(renderedGame); |
| 177 | + |
| 178 | +/* |
| 179 | +******* |
| 180 | +*x*o* * |
| 181 | +* *o* * |
| 182 | +* *o*x* |
| 183 | +******* |
| 184 | +*/ |
| 185 | +``` |
| 186 | + |
| 187 | +Create a new function called `getGameinfo(position)`. Calling the function should return an object with `winner` key, `loser` key, `hasEnded` and `nextPlayer`. |
| 188 | + |
| 189 | +EXAMPLES!!!! |
| 190 | + |
| 191 | + |
| 192 | +```js |
| 193 | +const position = [ |
| 194 | + ['x', 'o', ' '], |
| 195 | + [' ', 'o', ' '], |
| 196 | + [' ', 'o', 'x'] |
| 197 | +]; |
| 198 | + |
| 199 | +const gameInfo = getGameinfo(position); |
| 200 | +console.log(gameInfo); |
| 201 | + |
| 202 | +/* |
| 203 | +{ |
| 204 | + winner: 'o', |
| 205 | + loser: 'x', |
| 206 | + hasEnded: true |
| 207 | +} |
| 208 | +*/ |
| 209 | +``` |
| 210 | + |
| 211 | + |
| 212 | +```js |
| 213 | +const position = [ |
| 214 | + ['x', 'o', ' '], |
| 215 | + [' ', ' ', ' '], |
| 216 | + [' ', 'o', 'x'] |
| 217 | +]; |
| 218 | + |
| 219 | +const gameInfo = getGameinfo(position); |
| 220 | +console.log(gameInfo); |
| 221 | + |
| 222 | +/* |
| 223 | +{ |
| 224 | + winner: undefined, |
| 225 | + loser: undefined, |
| 226 | + hasEnded: false |
| 227 | +} |
| 228 | +*/ |
| 229 | +``` |
| 230 | + |
| 231 | +Try and make the game playable! *optional* |
| 232 | + |
| 233 | + |
| 234 | +### Conway's game of life *optional* |
| 235 | + |
| 236 | +https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life |
0 commit comments