> For the complete documentation index, see [llms.txt](https://caseytechschool.gitbook.io/app-development-using-mit-app-inventor-platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://caseytechschool.gitbook.io/app-development-using-mit-app-inventor-platform/tutorial-1-image-hide-and-seek/building-your-first-mobile-app-app-logic.md).

# Building your First Mobile App: App Logic

The app logic is responsible for toggling the visibility of the image and updating the button text accordingly. Follow these steps to implement the logic:

<figure><img src="https://1663557159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5pNfTQ4i4gxcGBvuQAOz%2Fuploads%2FLDfAQJsm13x42kziOhL3%2Flogic.jpg?alt=media&amp;token=57de7f02-1b3f-4ef2-9a4c-6786c9f724a0" alt="" width="375"><figcaption><p>App logic</p></figcaption></figure>

1. Navigate to the <mark style="color:green;">**`Blocks`**</mark> tab above the <mark style="color:green;">**`Properties`**</mark> panel.
2. Click on <mark style="color:green;">**`Button1`**</mark> in the `Blocks` panel and drag the <mark style="color:green;">**`when Button1.Click`**</mark> block.
3. Drag an <mark style="color:green;">**`if then else`**</mark> block from the <mark style="color:green;">**`Control`**</mark> section into the <mark style="color:green;">**`when Button1.Click`**</mark> block.
4. Drag an equal block from the <mark style="color:green;">**`Logic`**</mark> section and drop it into the if statement.
5. Use the <mark style="color:green;">**`Button1.Text`**</mark> block from the <mark style="color:green;">**`Button1`**</mark> section, placing it in the first section of the equal operation.
6. Drag an empty text block from the <mark style="color:green;">**`Text`**</mark> section into the second part of the equal operation. Type *Hide* in the empty block.&#x20;

<figure><img src="https://1663557159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5pNfTQ4i4gxcGBvuQAOz%2Fuploads%2FichQ4IzNXgHjXTVzW8Zu%2Fblocks1.png?alt=media&amp;token=1b4a1ea0-13ea-4694-bedf-090476f77528" alt="" width="375"><figcaption><p>App condition</p></figcaption></figure>

7. Click on the <mark style="color:green;">**`Image1`**</mark> block and drag and drop <mark style="color:green;">**`set Image1.Visible to`**</mark> on your screen. From the <mark style="color:green;">**`Logic`**</mark> section grab the <mark style="color:green;">**`False`**</mark> block. Connect them together.
8. Similarly, click on the <mark style="color:green;">**`Button1`**</mark> block and drag and drop <mark style="color:green;">**`set Button1.Text to`**</mark> on your screen. From the <mark style="color:green;">**`Text`**</mark> section grab the empty text block and type `S`<mark style="color:green;">**`how`**</mark><mark style="color:green;">**.**</mark> Connect them together.
9. Move these two blocks inside the if statement.&#x20;

<figure><img src="https://1663557159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5pNfTQ4i4gxcGBvuQAOz%2Fuploads%2FMvzAtZi8mBDnECb6LbpQ%2Fblocks2.png?alt=media&amp;token=3e7abac8-b0e4-463e-9693-02c2bd5e620b" alt="" width="375"><figcaption><p>Completed if block</p></figcaption></figure>

10. Right-click on the first set block, choose <mark style="color:green;">**`Duplicate`**</mark>, and move the duplicated block inside the else statement. Change <mark style="color:green;">**`False`**</mark> to <mark style="color:green;">**`True`**</mark> and <mark style="color:green;">**`Show`**</mark> to <mark style="color:green;">**`Hide`**</mark>.
11. Duplicate the other block, move it into the else statement, and change the text to <mark style="color:green;">**`Hide`**</mark>. The final code is as follows:&#x20;

<figure><img src="https://1663557159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5pNfTQ4i4gxcGBvuQAOz%2Fuploads%2FMcDcV3a6qjO6pKcijSjg%2Fblocks3.png?alt=media&amp;token=648d98f9-fcf5-4a87-a513-23869f62dd58" alt="" width="375"><figcaption><p>Final code</p></figcaption></figure>

12. **Congratulations, you are done!** Test your app to see the logic in action.
