Introduction: Visual Basic Calculator

We are going to create a “first program” that will be written in Visual Basic (VB). Our project will be a basic calculator that will teach the logic and provide the code for our calculator. Our instructions will be set up so that the user creates one button for addition and writes code for it. From this the user will be able to add more (subtraction, division, etc.) on to their program if desired. Watch video for demonstration.

Programming is becoming more important and it is beneficial to have some understanding of how to code. This instruction will serve to both teach a basic understanding of code as well as teach the logic needed to code. Our instructions are different from others on Instructables.com because there is no calculator made in Visual Basic. Our target readers will be anyone who wants to learn how to program. The instructions will be set up to where someone who has never programmed before will be able to complete the project.

Important Note:

  • These instructions assume you already have Visual Studio installed and open.
  • Your User Interface (where toolbars are placed) my look different from the instructions. These instructions will not address how to make changes to the User Interface. Making your User Interface look like the provided pictures is not necessary, but will be helpful.
  • If you make a mistake, i.e. double click on an object by accident, move to the last step (Troubleshooting) for common mistakes and fixes.

Step 1: Creating a New Project in Visual Studio 2013

    Step 1: Open Visual Studio

    Step 2: Select New Project

    Step 3: Select Windows Form Application

    Step 4: Name the project SimpleCalculator

    Step 5: Set the save location. Desktop is recommended as it is the easiest to find.

    Step 6: Click OK

    Step 7: If needed, click on the view tab then select the Toolbox, Property, and Solutions Explorer window

    Step 2: Design the Graphical User Interface (GUI)

    Helpful Tip:

    • On the properties toolbox set in alphabetical order. Refer to the picture of the Toolbox, green circle.

    Step 1: Click anywhere on the form

    Step 2: In the properties window, under the Text property, type Simple Calculator

    Step 3: In the properties window, under the StartPosition property, select CenterScreen

    Step 4: In the properties window, under FormBorderStyle, select Fixed3D

    Step 5: Click and drag a label from the Toolbox to the form

    Step 6: While the label is selected, in the properties window, under the Text property, type Simple Calculator. Note: Since this label is the main text describing the text, you can change the size and boldness of the text under the Font property in the properties window but is not required for this project

    Step 7: Proceed to do this for the following labels (5) and place them accordingly. Name them: Operators, Operation, Operand 1, Operand 2, and Result (See picture) Note: Objects can either be dragged or double clicked to be placed onto the GUI

    Step 8: Click and drag a button from the Toolbox

    Step 9: Place it under the “Operators” label.

    Step 10: While the button is selected, in the properties window, under the Name property, enter btnAdd

    Step 11: Then under the Text property, enter a + sign

    Step 12: Click and drag a TextBox from the ToolBox beside the “Operand 1” label (See picture)

    Step 13: While the TextBox is selected, in the properties window, under the Name property, enter txtOperand1

    Step 14: Repeat Step 12 but place the second TextBox beside the “Operand 2” label (See picture)

    Step 15: Repeat Step 13 but name it txtOperand2

    Step 16: Click and drag a label between the two text boxes (See picture)

    Step 17: While the label is selected, in the properties window, under the Name property, enter lblOperator

    Step 18: Delete the text property of lblOperator so that it is blank

    Step 19: Under 9the AutoSize property, select False. Note: This lets you resize the label at your desire

    Step 20: Under the BorderStyle property select Fixed3D

    Step 21: Click and drag another label beside the “Result” label

    Step 22: Repeat Step 17, name it lblDisplay

    Step 23: Repeat Step 18 and Step 19

    Step 24: Click and drag a button from the Toolbox below the “Result” label (See picture)

    Step 25: While button is selected, in the properties window, under the Name property, enter btnClear

    Step 26: Change the text property for the Clear button to Clear

    Step 27: Click and drag a button from the Toolbox beside the Clear button (See picture)

    Step 28: While button is selected, in the properties window, under the Name property, enter btnExit

    Step 29: Change the text property for the Clear button to Exit

    Step 30: Enter the following code by double clicking on each button to open the code window:

    Step 3: Coding the Add Button

    Goal: Add to numbers that the user inputs into the text boxes

    Code Explanation

    • Dim Variable As Double declares a variable as a specific data type
    • Whenever the Add button is pressed a + sign will appear in the label between the two text boxes.
    • The Display label is being assigned the Result variable which is Operand1 + Operand2.
    • The “.ToSting(“N”) is to convert back into string from when we converted it to a number using parse

    Step 4: Coding the Clear Button

    Goal: To clear all boxes on the GUI and set the cursor to the top text box (Operand 1)

    Code Explanation:

    • Clear()Function clears a text box. This function can only be used on a text box
    • Label boxes must be cleared by setting the .Text property to nothing
    • Focus() Function sets the cursor to the text box

    Step 5: Coding the Exit Button

    Goal: To exit the program.

    Step 6: Running the Program

    Click the green play button to run the program (Reference the picture above)

    Note: While the program is running, you can test to see if your program is working properly.

    Click either the exit button or the red “X” on the program when done.

    Step 7: Concluding Remarks

    In this project, you have successfully completed how to make a simple calculator in visual basic. We only had you make an addition button but feel free to make other operators at your desire. They follow the same steps that are mentioned above. You can now use this as a calculator to make calculations on anything you want. The purpose of this project was to inform users who have no programming experience how to make a simple program. If you wish to learn more about Visual Basic, there is a lot of information online as well as classes that teach Visual Basic (CNIT 175 if you are a Purdue Student). Thank you for taking the time to make this project.

    Step 8: Troubleshooting

    • When you enter improper code, a blue squiggly line will appear below the word(s). This is an error and the program will not run. If you see a blue line under a piece of your code, hover over it with your mouse and it should give you an explanation of the error. From there you can research the error online to find more information.
    • If you double click on an object, i.e. a label that you are not going to code, you can either delete the code you just created or leave it there.
    • If you are having trouble like errors or if you forgot a keyword, please see Microsoft’s Visual Basic help site (https://msdn.microsoft.com/en-us/library/2x7h1hfk.aspx)
    • Another good reference to look at is the textbook, Step into Programming with Visual Basic.Net, 4th Edition, by Guity Ravai and Ibrahim M. Baggili.

    • If you accidentally double click a tool while moving it from the toolbox Visual Studio will automatically take you to the coding tab, and create a section for coding the element you double clicked. It is recommended to delete this section of code that was accidentally created, as it is junk code that does nothing. To return back to the form design tab, simply click the Form Design tab