2D - SDG 3 - Calorie Calculator (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

The SDGs are 17 goals adopted by the United Nations in 2015. They are a to-do list for everyone to work on together.

This tutorial is about calories in the food we eat, which is related to the third goal of " good health and well-being".

The users can click on different types of food they have eaten, and the total amount of calories will be calculated automatically.

Step 1 - Prepare A New Project

Please create a new project and remove the 2 sprites in there.

Pick a simple backdrop image, such as “Blue Sky 2”:

Step 2 - Add an Apple Sprite and an “apple” Variable

Now let’s add an apple sprite, and place it on the left top corner of the stage.

Please also add a new variable called “apple”, and move it below the Apple sprite. Change its layout to “large readout” so that only the number value is displayed.

Step 3 - Show Apple’s Calories

Now let’s change the costume to display the calories for eating one apple, which is about 80. You can use the “T” tool to add text to the Apple sprite’s costume, and use the arrow tool to move and resize the text.

Step 4 - Click Animation

The user can click on the apple to add it to the food eaten that day. We can add a simple animation to let the user know he has clicked it correctly.

Switch to the “Code” tab, and add these blocks. They will run when the user clicks on the apple sprite, and reduce its size to 80% of the original size. After waiting a very short time (100 milliseconds), we restore its size back to 100%.

This is how it looks:

Step 5 - Update the “apple” variable

When the user clicks on the apple, we will increase the “apple” variable by 1, so it will show the total number of apples added:

However, we also need to allow the user to restart the counter. We can do that by setting the “apple” variable to 0 when the green flag is clicked:

Now the apple counter is working well:

Step 6 - The “total” Variable for Total Calories

We will also need to keep track of the total calories. Please add a new variable named “total”, and display it at the bottom of the stage.

Step 7 - Update the “total” Variable

The way we update the “total” variable is very similar to how we update the “apple” variable.

Whenever the user clicks on the apple sprite, we would add an apple’s 80 calories to the total.
Whenever the green flag is clicked, we reset the total to 0.

Now the total will update correctly as we add more apples:

Step 8 - Add A Donut Sprite

Now let’s add another sprite for a donut. Since we want to reuse our code for the apple sprite, we have 2 options:

We can duplicate the Apple sprite, then change its costume to a donut;
We can add a new Donut sprite, then copy the code from the Apple sprite.

Let’s use the first method here. Right-click on the Apple sprite to duplicate it, and rename the new sprite as “Donut”:

Next, switch to its “Costumes” tab, and add the “Donut” costume:

Lastly, add the text for calories for a donut, which is about 200. You can pick a different color to make it easy to read.

Step 9 - Add the “donut” Variable

We need a new variable called “donut” to keep track of how many donuts are eaten, and place it below the donut sprite:

Now please change the code for the donut sprite, replacing the “apple” variable with the “donut” variable. Also, the “total” should go up by 200 each time we click the Donut sprite.

Now our calculator works for both sprites:

Step 10 - Add More Food

Please repeat the steps above to add more food. Here are some examples:

If you are working as a team, each of you can work on some of the food items, then you can combine your work by exporting and importing sprites.

Creative Ideas

There are many ways you can extend this project with your own creative ideas. Here are some examples:

Add Exercises: You can add some additional sprites to represent some different forms of exercises. For example, add a running sprite, and whenever the user clicks on it, it means the user has run one more minute, and we can reduce the total calories by 10 calories.
Multiple Pages: We can add 2 b**tons for “page up” and “page down”, so that we can show different food items on different pages. That will allow us to show much more food choices.