Fahrenheit to Celsius Converter

IN this lab, you build a simple app that converts from Fahrenheit to Celsius. Follow the steps to build the app.

1. Create a new project called F2C in appinventor.

Step 2. Change Screen tilte to "F2C Converter".

Step 3. Add a "Horizontal Arrangement" to your screen.

Step 4. Add a Label to the "Horizontal Arrangement" box (#1,#2). Change the text to "Fahrenheit" (#3). Rename the label to "labelFahrenheit".

Step 5. Add a TextBox into the "Horizontal Arrangement" Box (#1,#2). Change the hint to "Fahrenheit" (#3). Rename the Textbox to textFahrenheit (#4,#5).

Step 6. Repeate the steps 3,4,5 to add "Horizontal Arrangement" box, a Label called "labelCelsius", and a TextBox called "textCelsius". Your screen shows:

Step 7. Add a Button to your screen (#1,#2). Change text text to "Convert". Rename the Button to "buttonConvert" (#4,#5).

Step 8. Open "Block Editor", Select "My Blocks" (#1) , Click "buttonConvert" (#2), and Drag and drop the "When buttonConvert.Click" block (#3).

Step 9. Click "textCelsius" (#1), drag and drop "set textCelsius to" block into the "when buttonConvert.Click" block (#2).

Step 10. Clicl "textFahrenheit", drag and drop "textFahrenheit.Text" into "When buttonConert.click" block. "textFahrenheit.Text" block connetcs to "set textCelsius.Text" block. When the ""Convert" button is clocked, value of the Celsius block is equal to the vaslue of the Fahrenheit block.

Step 11. Your block editor shows:

Now, you try your app in emulator. Enter a value in the fahrenheit textbox, click the convert, then the entered value will be displayed in the Celsius textbox. This app does not convert the fahrenheit into celsius. We will implement that function in the next lab.

Step 12. Next, we will implement the convertor. The formula to convert from Fahrenheit to Celsius is:

Celsius = 5.0/9.0 * (Fahrenheit - 32)

To write above equation in App Inventor using blocks, we need divison, multiplication and subtraction blocks. They are inside the "Math" drawer. Drag the division and two numbers from the "Math".

Step 13. Now, your blocks look like this:

Step 14. Drag a Multiplication block (#3) from Math drawer (#2). Move the "Divison" block into the first operand slot in the multiplication block (#4).

Step 15. Your blocks look like this now:

Step 16. Now, calculate the second operand (fahrenheit - 32). Drag a Subtraction block from Math drawer. First operand of the subtraction block is the Fahrenheit text box. Second operand is number 32.

Step 17. Use the txtFahrenheit.txt to fill the first operand of the subtraction block

Step 18. Your blocks look like this now.

Move the "textFahrenheit.text" block into Trash Bin that is located at the right bottom corner of the block editor (#1). Move the Multiplication block to attach to the "set textCelsius.Text" block.

Step 19. Your blocks look like this now:

Step 20. Now, create a new Emulator, and run your code on the emulator. Your emulator looks like this now:

Step 21. Now, we add a "Clear" button, which clears the content of Fahrenheit and Celsius text boxes.Add a button, change its text to "Clear".

Step 22. In the Block Edtitor, add the following blocks.

Step 23. When the app starts, we want to display zero at the Fahrenheit and Celsius boxes. Add the following code to do that.

Step 24. Your emulator looks like this now.

Step 25. If you make the Fahrenheit box empty (delete everything, including the zero), then click "Convert" button, the app crashes.

Step 26. It is because there is nothing to subtract 32 from. Now, we add the logic to detect if the Fahrenheit text box is empty.

Step 27. From "Text" drawer, drag "is empty text" block, and attach it to the "test" of the "if-else" block.

Step 28. We want to notify the user when the Fahrenheit is empty and user clicked the convert button. To do that, we need a notifier. Add a notifier.

Step 29. In BlockEditor, add the "NoteMessage" to the "then-do" of the "if-else" block.

Step 30. Add texts to the ShowMessageDialog

Step 31. Move the calculation inside the "when click" block to "else-do" of if-else block, and move the if-else block inside the "when click" block.

Step 32. Your blocks look like this now.

Step 33. Run your app on the emulator, delete the content of the Fahrenheit box, then click "convert". You have this error message now.

Step 34. You have completed the Fahrenheit to Celsius Converter App. Now, you can download the app to your Android device.

Challenge:

Modify your code su that "Celsius" box only display two digits after decimal point.