Instructables https://www.instructables.

com/Visual-Basic-Calculator/

Visual Basic Calculator

By JeremyP2 in CircuitsComputers

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.

1 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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

2 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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

3 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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:

4 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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

5 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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.

6 of 7 08/12/2024, 23:57
Instructables https://www.instructables.com/Visual-Basic-Calculator/

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

7 of 7 08/12/2024, 23:57