# Session Plan * Recap of js basics * Variables * Types * Conditionals * Functions * For loop * scope * Arrays * Objects * Ask the trainees what they need to get repeated. Or figure it out by doing some code example. * Solving problems * * [Code inspiration](#fibonacci-sequence) * [Exercises](#exercises) This session is about getting the basics hammered down. We have had a lot of trainees who think the js module is too difficult. That is why this session is here, to ease the steepness of the js learning curve. Focus on * Recapping what the trainees struggle with * Letting the trainees learn a framework for solving problems * Lots and lost of exercises 💪 ## Typical misconceptions * Difference between return and console.log * What console.log does and what it is made for ## Code inspiration ### Fibonacci Sequence Given a specific position in the Fibonacci sequence, return the Fibonacci number. ```js // 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 fib(5); // 3 fib(10); // 34 ``` Try not to just solve the problem, but explain what you are doing and thinking! Try using this as a framework for solving the problem: ## Exercises ### Fizz buzz This is a classic programming task. 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`. When that works. Make the two number for multiples into parameters. So it can be called like this: `fizzBuzz(4, 12);` ### Build a sentiment analyser A sentiment analyser is some functionality that figures out how positive/negative a sentence is. For example, the sentence \`I am mega super awesome happy" Should have a high score The sentence "I hate doing boring stuff" should have a low score. 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. Here is an example of using the function: ```js const sentimentScoreObject = getSentimentScore("I am mega super awesome happy"); console.log(sentimentScoreObject); /* { score: 3, positiveWords: ['happy', 'awesome', 'super'], negativeWords: [], } */ ``` ### Credit card number formatter 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 separated with a space. e.g. inputting 123456789 would show 1234 5678 9. ![Credit card formatter](/files/bZMtqaq1LiiVBAgg6I0N) Create a function that takes a number as parameter. The function should return the following object: ```js const formattedCreditCardObject = formatCreditCardNumber(123456789); console.log(formattedCreditCardObject); /* { original: 123456789, formatted: "1234 5678 9", } */ ``` Thins to consider: * What should happen if the function is called with an argument that is not a number? ### Character frequencies Write a function that counts the frequency of characters in a string: ```js console.log(getCharacterFrequencies("happy")); /* { h: 1, a: 1, p: 2, y: 1 } */ ``` The expected output above allows for a relatively simple solution mechanism. Hint: Think about using object property accessors. For a bigger challenge, you can try to write the same function for a different expected output as seen below. It will require implementing some additional logic. ```js /* { characters: [ { character: 'a', count: 1 }, { character: 'h', count: 1 }, { character: 'p', count: 2 }, { character: 'y', count: 1 } ], length: 5 } */ ``` ### Palindromic substring Write a function that finds the longest palindromic substring of a given string. ### Credit card info Similar to the format credit card number, now we need to identify the credit card type. ```js console.log(getCardInfo(4781321334789876)); // 'visa' ``` How can we find out what rules there are for credit cards? Programmers best friend is always available :) ### Tic Tac Toe Draw a tic tac toe game. Write a function called `getRenderedGame(position)` that takes `position` as parameter. `position` is a two dimensional array that shows the position of a game. Here is an example: With the following two dimensional array ```js const position = [ ["x", "o", " "], [" ", "o", " "], [" ", "o", "x"], ]; const renderedGame = getRenderedGame(position); console.log(renderedGame); /* ******* *x*o* * * *o* * * *o*x* ******* */ ``` Create a new function called `getGameInfo(position)`. Calling the function should return an object with `winner` key, `loser` key, `hasEnded` and `nextPlayer`. EXAMPLES!!!! ```js const position = [ ["x", "o", " "], [" ", "o", " "], [" ", "o", "x"], ]; const gameInfo = getGameInfo(position); console.log(gameInfo); /* { winner: 'o', loser: 'x', hasEnded: true } */ ``` ```js const position = [ ["x", "o", " "], [" ", " ", " "], [" ", "o", "x"], ]; const gameInfo = getGameInfo(position); console.log(gameInfo); /* { winner: undefined, loser: undefined, hasEnded: false } */ ``` Try and make the game playable! *optional* ### Conway's game of life *optional* And finally, feel free to fill out the form to help us improve the module and the exercises. The [survey](https://forms.gle/irckYkBdvSb6Tdz57) here is addressed to the session lead and session assistant, while this [survey](https://forms.gle/ttdDLcSJ88ksz6xe7) is for assignment helpers. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://program.hackyourfuture.dk/course-content/foundation/intro-to-javascript/week4/session-plan.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.