CYF Blocks

Anything that we could do previously as soon as run is clicked, we can now do as a response to clicking buttons or other elements in the static html.

1. Place the sentence from the first exercise in the static html, but this time with <button> elements around the words to be filled in (<p>The <button id="noun1">dog</button> <button id="verb">saw</button> the <button id="adjective">white</button> <button id="noun2">cat</button></p>). Make it so each button's text gets set to a random word when it is clicked?
2. Place two buttons ("day mode" and "night mode") and an html list in the static html. Can you add blocks so that when the buttons are clicked, the html list changes to "day mode" (dark text on a light background) and "night mode" (light text on a dark background)?
3. Place a button in the static html. Can you add blocks so it changes colour when it is clicked?
4. Place an image in the static html. Can you add blocks so it changes when it is clicked?

A variable is a name into which a value can be stored. There are several reasons for which we might want to do this. The first is when we want to keep track of a value that changes over time. Let's keep track of the number of times a button is clicked.

1. Start with a button (<button>) that has been clicked 0 times in the static html. <button id="button">0</button>
2. Add an "at the start" block. Inside we are going to add a variable that will keep track of the number of times the button was clicked.
1. In the Variables menu, click "create variable..." to create a variable called click_count
2. From the Variables menu, create a "set click_count to" block and place it inside the "at the start"
3. Set the value to 0 (from the Values menu)
3. When the button is clicked, we are going to do two things: increase the value of click_count by 1; and change the text of the button to the new value of click_count.
1. Add an "when the element with id ... is clicked" block.
2. Inside this block, add a "change click_count by 1" block from the Variables menu.
3. Add the necessary blocks to set the text content of the button to the value of click_count. (You can get this value by selecting the "click_count" block from the Variables menu)

Note that it will be a common pattern that you first set a variable in the "at the start" block and then modify it in at "when the element with id ... is clicked" block. This first setting of the variable is called "initialisation".

Let's combine our variables to track state with some of the other blocks we have learned about. We would like to track how many times the user adds the word "sheep" and how many times they add any other word.

1. Let's start with the following static html. <p>There have been <span id="sheep_count">0</span> sheep 🐑 and <span id="other_count">0</span> others.</p>
<input id="text" />
<button id="button">add animal</button>
2. The following things should happen (use variables where necessary to keep track of various values, and the blocks you need from the Logic menu). Don't forget to break down your implementation into steps where you first add blocks that make a visible difference and test that it works.
1. When the user clicks "add animal", if the word in the text input is "sheep", the number of sheep displayed in the <span> with id sheep_count should increase by one.
2. When the user clicks "add animal", if the word in the text input is not sheep, the number displayed in the <span> with id other_count should increase by one.

When we did the first Mad Libs exercise, we weren't able to make our own list of words to choose from but could only pick a category (noun, adjective, verb). We will now introduce a data structure called an Array, that represents a list of data (typically numbers or texts) in JavaScript. They can be created and used from the "Arrays" menu. Let's create our own list of words to select from.

1. Start with a Mad Libs sentence similar to before (<p>The <u id="noun">man</u> <u id="verb">saw</u> the <u id="adjective">white</u> <u id="animal">cat</u></p>
2. Add an "at the start" block
3. We'll now create an array of animals and assign it to a variable
   1. From the "Arrays" menu, add a "Set ... to, create array with" block to the "at the start" block
   2. Rename the variable "array" to "animals"
   3. Note, a variable can be used to store any value. In previous exercises, we stored a number. Here we are storing an array, but otherwise it's exactly the same concept.
   4. Add at least 3 animal text values to this array
   5. Note: You can click on the gear icon at the top left of the "create array with" block to add and remove slots for values
4. Let's set the text of the <u id="animal"> to a random animal.
   1. You already know how to do most of the steps (find the element with id animal, set its text content)
   2. The thing we will do differently is to set the text content to a get a random item from array block, selecting the "animals" array in the dropdown.
   3. Click "run" several times to check you get a random animal from your array each time.
5. Create additional arrays from which to select random words for each slot to be filled and share the result with your cohort.

In this series of exercises, we have so far used one "create a new ... element" for each <li> we want to create. Another use for an array is when we want to do the same thing with each element in an array (for example, create a <li>).

1. Start with an empty unordered html list with the id "list" (<ul id="list"></ul>) in the static html.
2. Add an "at the start" block
3. We'll now create an array of fruits and assign it to a variable
   1. From the "Arrays" menu, add a "Set ... to, create array with" block to the "at the start" block
   2. Rename the variable "array" to "fruits"
   3. Add at least 3 fruit text values to this array
4. Let's do the first steps to convert the first entry in this array into <li>
   1. You already know how to do most of the steps (find the element with id list, create an li, set its text content)
   2. The thing we will do differently is to set the text content to a get the first item from the array block, selecting the "fruits" array in the dropdown.
   3. Click "run" to check you are displaying a list with one fruit
5. Let's use this same code to show all the fruits
   1. At the beginning of the "find the element with id" block, insert a "for each item in array" block. Select the fruits array in the dropdown.
   2. Move all of the "create a new ... element" block inside the for "for each item in array" block
   3. As you can see by clicking "run", you now have a list with multiple items - but they are all the first item in the array
   4. Inside the loop, you have a variable available called "item". Each time through the loop, this variable will take on the value of the next fruit in the array
   5. Replace the get the first item from the array block with a "item" variable block (you can find it in the Variables menu)
   6. Check by clicking run that you now have a list with each item of fruit in your array.
   7. If you have an array called "fruits", it's good practice to rename the loop "item" variable to "fruit".
6. Add another fruit to your array and check that all your fruits are still shown.

Using the blocks from the previous exercise and a different kind of loop gives us an alternative way to loop through all the items of an array. Let's see a case where it might be useful.

1. Start with an empty unordered html list with the id "list" (<ul id="list"></ul>) in the static html.
2. As with before, create an array called "fruits" of your favourite fruit inside an "at the start" block.
3. Instead of the "for each item in array" block, we will use the "repeat while" block and the "... is empty" block together
   1. As usual, add a "find the element with id" block to find the html list
   2. Add a "repeat while" block from the Loops menu inside the previous block and change it to be "repeat until" (we are going to keep "get and remove"ing items from the array until it's empty.)
   3. Set the condition value to "... is empty"
   4. Inside the loop, add the blocks to create a new <li> and set the contents to a "get and remove the first item from the array" block, using the "fruits" array
   5. Check that all your fruit are now displaying
4. Next, let's have each <li> contain two things. The name and the emoji of the fruit.
   1. We can only set the text contents of an element once. However, we can add multiple elements inside the same <li>. In html, the <span> element is typically used for such a purpose, because it doesn't add any extra meaning or formatting to the text (unlike others which say "this is a list item" or "this is a link")
   2. Add two "create a new ... element" block, selecting <span>. Set the first's content to the "get and remove the first item from the array".
   3. For now, let's set the second to 🍎 (you can copy paste this into a text block. More can be found here)
   4. Check that all your fruit are now displaying with a 🍎 next to them
5. Finally, let's show the right emoji next to each fruit.
   1. (Before doing this, make sure you have renamed your first array of fruits to "fruits")
   2. Create a second array which will be called "emojis" and will contain each of your emojis (🍎, 🍌, 🍒)
   3. Replace the 🍎 block inside your loop with the appropriate "get and remove the first item from the array" block.
   4. Check that all your fruit are now displaying with a the right emoji next to them

We are now going to learn how to add items to, remove items from, and get the sum of, an array of numbers. We're going to keep a running sum of the last five numbers (this can be a way of keeping track of how a value trends over time, e.g. the last 5 times you weighed yourself, or the last 5 times you went running).

1. Start with an input box, a button to add numbers, and a span to display the total. (<p>Total of the last 5 numbers: <span id="total"></span> </p>
<input id="number" />
<button id="add_number">add value</button>
2. Let's start with an array of elements and show their sum
   1. In an "at the start" block, create a new array called "numbers" with 5 items, all set to the value 0
   2. Find the span with id "total" and set its text content to the sum of the numbers array, using the "get the sum of the numbers in array" block
3. Next, let's take the number in the input element, add it to the array and display the sum again when the button is clicked
   1. You already know how to get the value from the input element is clicked
   2. Let's add that value to the numbers array. From the arrays menu, use the "add ... to the start/end of the array" block, selecting "end", and setting the value to the value of the input element.
   3. You can now display the sum of the array again, in the same way as you already did
   4. Test that this works (and note, that it displays the full sum of the array, not just the last 5 numbers).
4. Last, we need to remove the first (oldest) element from the array.
   1. From the arrays menu take a "get the first item from the array" block.
   2. Change the dropdown to from "get" to "remove", to remove the first item
   3. Where do you need to place this removing so that there are only ever 5 numbers in the list when the sum is calculated?
   4. Test that this works and that the sum is only ever that of the last 5 numbers.

We are now going to use all the array blocks we have learned about. We're going to create a game where you roll dice and your goal is to not total more than 11.

1. Start with an empty list (where we will display our rolls), a place to put a total, and a few buttons (<p>So far you have rolled:</p>
<ul id="list"></ul>
<button id="button_roll">Roll the dice</button>
<p>Total: <span id="total">0</span>. <span id="info">Keep playing!</span></p>
<button id="button_remove">Remove the last roll</button>
<button id="button_restart">Start again</button>
2. The game has the following requirements. Before reading further, how would you break down and implement these requirements into steps? Think through what steps need to happen after each button click. In what order would you implement these steps so as to test each step as early as possible?
   • When "roll the dice" is clicked, a new random number between 1 and 6 should be generated and added
   • If the total of all the dice rolls is exactly 11, display "You won" in the <span id="info">
   • If the total of all the dice rolls is over 11, display "You lost" in the <span id="info">
   • When "remove the last roll" is clicked, we should undo the last roll (this is a cheat button so that we can always win!)
   • The list should display all the rolls so far
   • The total so far should be displayed in the <span id="total">
   • When "start again" is clicked, we should return to the initial state
3. The following steps are needed. Notice that some of them repeat, some of them are similar, and that the game has a "state" which is the array of dice rolls.
   • At the beginning:
     1. Display each roll in the array (there are currently no rolls)
     2. Display the total of all rolls (it is currently 0)
   • When "roll the dice" is clicked:
     1. Pick a random number between 1 and 6
     2. Add that number to the array of rolls
     3. Display each roll in the array
     4. Calculate the total of all rolls
        • If it is greater than 11, display "You lost"
        • If it is equal to 11, display "You won"
     5. Display the total of all rolls
   • When "Start again" is clicked: (this is the same as at the beginning)
     1. Display each roll in the array (there are currently no rolls)
     2. Display the total of all rolls (it is currently 0)
   • When "Remove the last roll" is clicked:
     1. Remove the last roll from the array of rolls
     2. Display each roll in the array
     3. Calculate the total of all rolls
        • If it is greater than 11, display "You lost"
        • If it is equal to 11, display "You won"
        • If it is less than 11, display "Keep playing"
     4. Display the total of all rolls
4. In order to check that anything is working, we need to be able to display an array of rolls and its total, so that's where we will start.
   1. In an "At the start" block, create an array called "rolls" and put 3 numbers in the array (afterwards we will start with an empty array, but for now having numbers helps)
   2. Using a loop, display each of the numbers in the array in the list. Check that your code works.
   3. Set the <span id="total"> to the sum of the numbers in the "rolls" array.
   4. We will put in the "you won"/"you lost"/"keep playing" logic in last (but you could also do it now if you like)
5. Next, let's go with the simplest: the restart button
   1. Add a "When the element with id ... is clicked" block for this button
   2. We want to set the "rolls" variable to an empty list (Use the same blocks as you did to initialise the rolls variable, then use the gear icon to remove all the items from the array)
   3. We now want to remove the displayed rolls from the list (You will need to use the "Remove the contents of the element" block)
   4. And we want to set the text <span id="total"> to 0
6. Slightly more tricky: the "roll the dice" button. Before following the instructions, can you think how we could create a dice?
   1. To create a dice, we'll create a new array in the "At the start" block, called "dice" (be careful to select the "array" variable, not the "rolls" variable before renaming to "dice"), setting the values as the numbers 1, 2, 3, 4, 5, and 6. We can select a random item from this array when we want to roll a dice.
   2. Add a "When the element with id ... is clicked" block for the button
   3. Let's roll the dice and add the result to the list. Use the "add ... to the start/end of the array" block, setting the "end" of the "rolls" array, and using a "get random item from the array" block as the value.
   4. We could now add a new <li> to the list and set the total. Instead, we are going to re-display the whole list from the array - you will see why in the next step
   5. To re-display the whole list (and set the total), we need a combination of the two previous steps: find the list, remove its contents, loop over the items in the array and add them to the list, set the total to the sum of the array.
7. Notice that at this point, we have 3 different versions of the same steps to display the list contents and total. Now imagine we want to change something (like add the "you won"/"you lost"/"keep playing" information). We would have to add it in 3 different places! (And we still have a "remove last roll" button to implement - so it would be 4 places)
   1. We can actually write this code so that is exactly the same all the times (looping over an empty array will do nothing, and it's sum will be 0). When we see a piece of code we would like to use multiple times, we create a function.
   2. From the Functions menu, select a "To do something" block and call it "to display the rolls"
   3. Take all the display code you wrote in the previous step and move it to inside this function.
   4. In the Functions menu, there is now a "display the rolls" block. You can us it as a replacement for the code you just moved. That block will "call" the function you created (this means it will execute all the blocks inside that function)
   5. You can replace the 2 other versions of your display code with the "display the rolls" block.
8. Now you can add the logic that decides what to put into the <span id="info">.
   1. Hint: You can calculate the sum of the array only once and store the result in a variable.
   2. Hint: You can add else if and else conditions to the "if" block by clicking on the gear icon.
   3. To test all the logic, put different values into the initial rolls array. Once this is working, you can set the initial rolls array to an empty list.
9. Last it's time to create our "cheat" functionality, the "Remove the last roll" button.
   1. You already know how to do remove the first item from an array. You can use the same block to remove the last item
   2. Don't forget to call the "display the rolls" function!

For this project, you should provide the user with the ability to input names to an array, and a "select facilitator" button that selects and displays a random name

For this project, you should provide the user with the ability to input earnings and expenses and see the totals

1. Two lists and three totals should be shown: the earnings, the expenses, the total earnings, the total expenses and the total balance overall
2. A positive number is an earning
3. A negative number is an expense
4. If the user inputs 5, -2, 25, -10, -7, the result should look something like:
   Earnings: 30

   • 5
   • 25

   Expenses: -19

   • -2
   • -10
   • -3

   Balance: 11

Repeat the exercise to show a list of your favourite links. Use a loop so that there are only two "create a ... element" blocks (one for the <li>, one for the <a>). Outline what your solution needs to look like, and implement it step by step, clicking "run" at each iteration to check your work

The great thing about story books is that you never know what will happen when you turn the page!

1. Create a simple story book "experience" where you click on a button to "turn the page" and something new happens each time
2. Make the story a bit more complicated. Maybe the user has choices? Maybe an image appears at the end?

An image carousel has an image with two buttons ("previous" and "next") that allow the user to cycle through a list of images.

• A list of at least 3 image URLs should be defined in an array (you can use public URLs from stock photograph websites, or copy the image link from a google search result)
• Clicking on the "previous" button should show the previous image
• Clicking on the "next" button should show the next image
• The images should cycle (the next image after the last image should be the first image, and the previous image before the first image should be the last image)

You should first break down this problem into steps, then outline how each step will probably be solved (and how you can test that it does what you think it does), before creating any blocks

Here are some additional ideas of projects that can be accomplished with the current blocks (some newer blocks haven't been properly introduced yet) and might be suitable/adaptable as landing page enhancements. They all fit generally into the "add some button or event handlers that add or modify some html" category.

• Shopping cart
  1. Create a list of products.
  2. Display each product in an html list with a "add to shopping cart" button next to it
  3. When the button is clicked, add the product to a separate html list that represents the current shopping cart
• List with a hidden 2nd level
  1. Create an html list with a second list inside each li (maybe a list of folders and the files in each folder?)
  2. Hide the inner lists
  3. Clicking the first level item toggles the visibility of the inner list (if it's hidden, show it, if it's visible, hide it)
• Hamburger menu
  1. Can be vaguely inspired by e.g. https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci
  2. Display an ul of nav links as a "closed" hamburger
  3. Clicking on the hamburger makes the ul visible
  4. Clicking on the hamburger transforms the hamburger into an X
  5. Clicking on the X makes the ul invisible (and shows the hamburger)
  6. Clicking on any link makes the ul invisible (and shows the hamburger)
• Create a check list
  1. Display a list of todo items
  2. When each item is clicked, mark it in some way (strike through, invisible)
  3. Note: this is basically a variant of the shopping cart
• Create a todo list
  1. Display an input and an "add todo" button (currently the input and means of accessing the input don't exist, so would have to add some blocks)
  2. When the "add todo" is clicked, add the item to an html list
  3. Stretch goal: combine with the exercise above