In this course, you will use block-based programming, like on code.org, to create JavaScript that changes the html on a web page.

This "Introduction" has no tasks, only helpful information. Go to the first exercise whenever you're ready.

• Static html can be written in the html textarea. "Static" means unchanging. In this case, we mean the original state, before the program changes anything).
• Use blocks to create code that changes the html.
• Click "run" to place the html in the space below the textarea and execute the generated code.
• These exercises assume you have tried block based programming already. Do the code.org course before you start. You should at least have done the lessons up to Conditionals and While Loops.
• Unlike code.org, in CYF Blocks you can go to the next exercise when you feel ready.
Grey checkmarks show that your current code doesn't solve the instruction. Green checkmarks show that it does.
• The blocks create JavaScript code. You can view the result in the "Generated code" textarea. You are not expected to understand this code yet. (It's interesting to look at, though!)
• The goal is to use the generated code in your own project. You will copy paste this code into a single .js file and add it, with html and css, to your course project.
• The way the blocks work (and the code they generate) is very like the code you will learn in the long course. There are also some differences that make the code easier for new learners.

Definitions

• static vs dynamic
• block based programming
• html elements
• html attributes
• variable
• array
• function
• function call
• event handler? - not used, but would be convenient

This exercise introduces the Html blocks to find and modify the text of html elements.

1. Let's start with the html below in the static html area. It represents a sentence with holes (also known as Mad Libs).
   1. <p>The <u id="noun1">dog</u> <u id="verb">saw</u> the <u id="adjective">white</u> <u id="noun2">cat</u></p>
   2. you can click "run" to see the output
2. Let's modify the contents of the first <u> element to contain the word "mouse" instead of "dog".
   1. Add an "at the start" block
   2. Inside this block, add a "find the element with id" block using the id of the first <u> element (noun1)
   3. Inside this block, add a "set the text content to" block
   4. Set the value for the text of this block: mouse
   5. Click "run" to check the content has changed.
3. Can you modify the contents of the other three <u> elements? If you can't think of some words, you can use the "get a random word" block from the Values menu

Not only can we modify the contents of html elements, we can also change their properties, such as their colour. Different kinds of Values blocks provide ways of setting texts, numbers and colours.

1. Let's start with an html list of our favourite fruit in the "Static html"
   1. each html list item (<li>) has a different id attribute so that we can refer to it from our program
   2. for example: <ul>
<li id="banana">Banana</li>
<li id="apple">Apple</li>
<li id="strawberry">Strawberry</li>
</ul>
   3. you can click "run" to see the output
2. Color the banana yellow
   1. Add an "at the start" block
   2. Inside this block, add a "find the element with id" block using the id of the <li> element for Banana (banana)
   3. Inside this block, add a "set the attribute" block, pick "color" and set the value to any yellow colour using the colour picker (you can find a color picker block in the "Values" menu).
   4. The colour for a banana is probably not easy to see against a white background. Add a second "set the attribute" block and set a dark color for the background.
   5. Click "run" to check the output looks like
      • Banana
      • Orange
3. Repeat the process above to colour each of the fruit (hint: you can add multiple "find the element with id" blocks one after the other). You can also change the background color if you like

Not only can we modify existing html elements, we can also create new ones and set their text and properties.

1. Let's start with an html list with a single apple in the "Static html"
   1. Note the list has an id ("list") so that we can refer to it from our program.
   2. for example: <ul id="list">
<li>Apple</li>
</ul>
2. Add one more fruit dynamically
   1. Add an "at the start" block
   2. Inside this block, add a "find the element with id" block using the id for the ul element (list)
   3. Inside this block, add a "create a new ... element" block and select "<li>"
   4. Inside this block, add a "set the text content" block and set the value to "Banana"
   5. Click "run" to check the output looks like
      • Apple
      • Banana
3. Repeat the process above to add two more of your favourite fruit (hint: you can add multiple "create a new ... element" blocks one after the other)

This exercise consolidates the use of the blocks we learned about in the previous exercises.

1. Start with an empty unordered html list (<ul id="list"></ul>) in the static html.
2. Dynamically add your favourite links to the html list
   1. Find the URLs of your three favourite websites (they look something like: http://www.codeyourfuture.io)
   2. Use the blocks we have seen so far ("at the start", "find the element with id", "create a new ... element", "set the attribute", "set the text content", and the Values blocks)
   3. Hint: you will need to create an <a> inside of each <li>
   4. Hint: remember that to set the target of an <a> you can use the <href> attribute. Without this attribute, your link will not look like a link
   5. Note about problem solving: The less blocks you add before clicking "run", the more you can be sure the code you have so far does what you expect. How could you break your solution down into small chunks where you can test at each stage by clicking "run"?
   6. Click "run" to check the output looks something like
      • Code your future
      • Google
      • BBC News

JavaScript is often "event-driven". This means it is run in when the user interacts with the page (clicking, typing, etc.). Let's make it so every time we (as a "user") click on an "add an apple" button, it adds an apple to the list.

1. Start with an empty unordered html list (<ul>) and a button to add apples to the list (<button>) in the static html.
   1. for example: <ul id="list"></ul>
<button id="button">add an apple</button>
2. When we click on the "add an apple" button, let's add an apple to the list
   1. Add a "when the element with id ... is clicked" block (it doesn't need to be connected to any other blocks)
   2. Inside this block, add the blocks necessary to find the "list" element, create a new "li" element and set the content to "apple" (you know how to do this from previous exercises)
3. Can you add a second button (in the static html, with a different id) that removes all the apples (you can do this by using the "remove the contents of the element" block).

We can also get user input when a button is clicked. Let's have the browser say a word or sentence that the user enters.

1. Start with a text input box list (<input />) and a button to that says "speak" in the static html.
   1. for example: <input id="text" />
<button id="button">speak</button>
2. We want to do two things in order when the button is clicked. First we get the value entered by the user, then we pass it to a block that will say it out loud. A common strategy in problem solving for programming is to solve the visible (or in this case, audible) thing first: have the browser say something.
   1. Add a "when the element with id ... is clicked" block
   2. Inside this block, add a "say" block from the Values menu
   3. As input to this block, connect a "get a random word" block
   4. Check that a random word gets said when you click "speak"
3. Now that we know a word gets said out loud when we click the button, we can make it be the one from the input box.
   1. Replace the "get a random word" block with a "get the value of <input> with id" block, using the input's id
   2. Check that whatever word you write in the input box gets said when you click "speak"
4. Do you see why it was useful to solve this problem in reverse order?

We're going to create a list of things to do.

1. Start with an empty list, an input, and a button "add Todo Item" in the static html. <p>Things to do:</p>
<ul id="list"></ul>
<input id="text" />
<button id="button">add Todo Item</button>
2. When the button is clicked, we are going to do two things: get the value of the input box and add a new <li> with that value to the list. To do the visible outcome first, we're going to do these in reverse order.
1. Add an "when the element with id ... is clicked" block.
2. First find the list element (id list) and add a new <li> with an arbitrary text value (for example "do cyf homework"). Check that this works.
3. Now, replace the arbitrary content of the new <li> with the value of the input, using the "get the value of <input> with id" block.

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.

The most common something with all the items in an array is to use a loop, as we saw in the previous exercise. Sometimes, a loop just doesn't do what we need, for example if we wanted to make the list of fruit appear gradually.

1. Create an empty unordered html list (as usual) and a "reveal next fruit" button (<ul id="list"></ul>
<button id="button">reveal next fruit</button>)
2. Create an array of your favourite fruit inside an "at the start" block
3. We'll now make it so each click of the button reveals the next fruit.
   • Add a "when the element with id ... is clicked" block. Make it add an <li> with the text "fruit" for now (and check it works)
   • As we did at the start of the previous exercise, we can use the get the first item from the array block instead of the "fruit" text (your fruits array is accessible from inside the "when the element with id ... is clicked" block). Now each time you click the button, a new <li> with the name of the first fruit will appear.
   • Change "get the first item" to "get and remove the first item". This will remove the first item from the array, so that the new first item is the old second item: if it was previously ["apple", "banana", "cherry"], it is now ["banana", "cherry"]
4. As you can see, after all of the elements in the array have been removed, new <li>s with the text "undefined" are created. Let's fix that!
• We want the behaviour to be different once the array is empty. So we use an "if" block from the Logic menu.
• We can check if an array is empty by using the "... is empty" block.
• In fact, we only want to add the <li> element if the array is not empty. So we can add a "not" block in front of the "... is empty" block.
• Now we can move our <li> creating blocks inside the "if" block. In the other case (when the list is empty) we want to do nothing. And that's exactly what will happen.

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