Now that we have a basic understanding of conditionals, we can use them in our apps. A common thing on the internet when making accounts is to retype your password in order to confirm that you have haven’t made a typo. We are going to make an app in this lesson that does just that.

To start with, drag a button onto Screen1, followed by two text input components. Make sure Text_Input1 is the one on top. Go to the advanced property settings for both text inputs, scroll down to “SecureTextEntry”, and change it to true. This will mean that anything the user types will be represented by asterisks (*), so people will not be able to see your password when you type it. (note – this feature only works on mobile)

Drag three label components onto the screen, one above both text input components, and one between, and one below the button, so your screen looks like this:

Give the bottom label a 20px top margin.

Change the top label to “Create a password:”, the middle to “Retype password:”, and the bottom to “” (empty string).

Change the button text to “Check similarity”. 

Give both text inputs a 10px bottom margin.

These are all the components we need. Your screen should now look like this:

Go into the Blocks section, where we will begin coding.

Initialise two variables, one named “password” and the other named “retyped_password” by using the “initialise” block under “Variables”. Set these two variables to empty, by using the empty text block under the Text blocks. Your code should look like this:

Grab a “When Button1 clicked” block, and drag it onto the screen. When the button is pressed, we want the text in the text inputs to be stored in the variables. We do this by using the “set [variable-name] to” block, found under variables. At the end of these blocks, use a “from Text_Input get text” to store the text in the variables, shown below:

Now, the variable “password” is set to whatever the user typed in the first input space, and “retyped_password” is set to what they typed in the second space. 

We will now use an “if else” block, discussed earlier in the lesson. These are found under the “Control” tab on the left-hand side of the screen. Drag this into the “When” block, but underneath the “set” blocks.

We want to check if the two variables are equal. We will compare them by using a logic block, that looks like this (found under “Logic” tab):

Drag this so it clicks in beside the word “if”. Go to the “Variables” blocks, grab an “app password” and “app retyped_password” and drag them into the logic block, either side of the equals sign. Your code should now look like this:

If the passwords are the same, we want to change Label3 to “Password confirmed.” Drag a “from Label3 set text to” block, found in the “Label3” tab, and place it beside the word do. Change the text box at the end from “Label” to “Password confirmed.”

If the passwords match, the app will now display “Password confirmed.” But what if they don’t match? This is where the “else” part of the block comes in handy. If they don’t match, we want the app to display “These passwords do not match!”. 

We can do this by using another “from Label3 set text to” block, and dragging it beside the word “else”. Change the text from “Label” to “These passwords do not match!”. 

Your app should now be fully functional. Be sure to give it a go on your app or web browser, but remember the SecureTextEntry only works on mobile.

To see the code from this lesson, visit this link:

https://x.thunkable.com/projects/5ea511c25d88d7defd2b3f37/openProject/designer