Healthy Diets

Published on February 22, 2022

In this tutorial, we will create an app that shows nutrition information of three different type of snacks. The user will choose a snack, and then they will see information about that snack.

NOTE: If you didn't, please read this Hello World! tutorial first.

🏷️ Tags: #newbie, #tutorials-and-guides

Step 1. Setting Up Your Project.

  1. Create a project, give it a suitable name.

2. You will see your new created project. Drag out a Spinner (User Interface), an Image (User Interface) and three Labels (User Interface).

2. Rename the 3 labels to 'Protein', 'Carbohydrates' and 'Calories'. This diagram shows you how to rename components.

3. Delete all of the text for the 3 labels. This is how you clear the text for a label.

4. With the same concept, set the ElementsFromString for the Spinner to 'French fries,Oranges,Chocolate'.

Step 2. Blocks editor.

NOTE: All of the block images are draggable. You can directly drag the block images to your workspaces.

  1. Create a variable list that has 3 URLs to pictures of French fries, oranges and chocolate.

2. Create another variable list that has sublists for nutrition information.

3. This event shows the nutrition information and photo on the user's screen.

Full blocks: