Calculator

Lesson 5: Simple Calculator With Text Boxes

S M L XL FS | Slo Reg Fast 2x | Bookmark

In this lesson, we will walk through building a simple calculator program in Visual Basic. I will show you how to create a new project, add text boxes for user input, set their properties, and add a command button to perform the calculation. We will discuss how to write code to process input values as numbers using the val function instead of as text, and I will demonstrate how to display the result in a third text box. We will also briefly talk about control arrays, which we will cover in a future lesson.

Navigation

Prev: Lesson 04
Next: Lesson 06

Keywords

, Visual Basic calculator, simple calculator project, VB6 calculator, create calculator VB, text box control VB, command button VB, VB form controls, control arrays VB, val function VB, adding numbers VB, Visual Basic project

Subscribe to Calculator
Get notifications when this page is updated

Intro

Transcript

Let's take a look at the last couple of lessons and put them together to build a program that actually does something useful. Let's build our own simple calculator. If you still have this project, project 1 open, let's go ahead and close it now. Let's close that and close the form.

Let's come up and click on File. Then New Project. We're going to create a new project. Now, if we had not saved our changes to our last project we just had open, it is going to ask us to save changes to the following files: our VBT, our project file, and our FRM, our form file. Let's go ahead and say yes. Let's save those.

Now we are prompted for the new project. What kind of project do we want to create? Again, we are going to create a standard EXE, standard executable program. Let's click on OK. Here we are with a blank new form and a blank new project.

Now, here is what we are going to do for this project. We're going to build a simple calculator. I want two text boxes where the user can enter in two numbers, a command button that they can then click on, and then a third text box that will have the answer in it.

So let's start out by putting a text box. Let's click on the text box control here and draw a text box. There we go. Let's change this guy's name. Let's call this our first number. I am going to scroll down and find text right here and get rid of that. I hate that by the way. I wish text would start off blank, but it does not.

Now we need to make two more of these guys. We need to make one more for another number to go into, and then one more for the answer. So let's just try copying and pasting this thing. So let's click on the text box and we will hit copy and then paste. Hold on a second. Visual Basic is saying you already have a control named first number. Do you want to create a control array? We have not talked about control arrays yet. Now we are not going to get into them today. So for today let's just say no.

There we go. We should get our text box right up here. Let's click on it and drag it down underneath the first one. A control array is basically a way of grouping similar controls together, like a bunch of text boxes. We are going to talk about them in a future class, but they are a little bit beyond the scope of today's class.

Let's go over here and change the name of this one. Let's change the name of this one to second number. So now we have first number and second number. Notice the benefit of copying and pasting it is that the text field here is blank, because we copied the other one. It will copy over almost any of the properties except, of course, for its name.

Let's make one more copy and paste. Control array and no thank you. We will drag this guy down here in the bottom. That is where our answer will go. So let's name this guy answer. So now we have first number, second number, and answer.

All right, now we need a command button in the middle here that we can click on and add these two values up here and put them down the bottom. So let's click on command button. Draw a button in the middle. So it is command one. Let's change its properties. Let's give it a good name. Let's call it calculate. Now we have the name of the button, calculate button. Let's change its caption to calculate. That is what goes on the button.

Now let's go ahead and run our program. Let's click on the start button. Here we go. It has a value of 5 and 7 and it can calculate. Oh, wait a minute. We forgot to put programming in our button. The program just does not know what we want to do. We have to actually tell it what to do. That is going to work on the program.

Let's go ahead and do the programming in there. Let's close our program. Let's double click on the calculate button to open up the code window. Here we are inside the calculate button click. This is a private subroutine which means only this form can use it.

The private sub and the end sub will run whenever the user clicks on the calculate button on the form. Let's hit enter a couple times here, enter enter, go back up and then tab in. Now let's think what we want to do with this program. I have got two text boxes, first number and second number. I want to then add their values together and put them here in the answer text box.

So here is how we are going to type it in. We are going to say answer equals first number plus second number. Now then press enter. Basically, you do the math backwards. The name of the control goes first, answer. In this case, the answer text box is going to be set equal to the first number text box plus the second number text box.

Let's see how this works now. Let's go ahead and run our program. Let's click on the start button. Here we are. Let's type in 10, and then I will tab down and type in 25, and then I will click on my calculate button. Wait a minute, that is not quite right. We have got 1025. Hmm, what happened?

Well, essentially Visual Basic is going to treat those text boxes as text, not numbers. So anything you type in there is going to be treated like text. I could type in here Richard, and then my last name, or Austin, and then calculate, and that is going to add those two things together. It is going to treat them like text.

So what we have to first do is we have to tell Visual Basic: hey, treat these as numbers, not as text. Give me the value of the numbers in these boxes, and do not treat this stuff as text.

So how do we do that? Well, let's close our program. Here we are back inside of our code. Let's click right here in front of first number, and type in the word val, V-A-L, and then open parentheses, and then just come over here to the end of the word first number, and put a closed parenthesis. That is the val function. Basically, it is going to take that first number field, a text box, whatever is in there, and convert it to a number, the value. Let's do the same thing over here for second number. Val, open parentheses, closed parenthesis.

So answer is going to be set equal to the value of the first number plus the value of the second number.

Let's go ahead now and run our program. Let's see if we got it. Let's type in 10, and then 15, and calculate, and it is a beautiful thing. Again, give yourself a little golf clap, random plus.

But you can see how the val function took the text box, took the text on the box, and converted it to a number. If you have taken my Excel class, for example, you are familiar with the sum function and the average function. Functions take data and give you back some other data. In this case, the val function took the text string 10 and converted it to the number and the value 10.

We will see a lot more functions as we go on with this course. For now, let's go ahead and close our program, and I will close the code window, and now we have made our first simple calculator.

Thank you.

Quiz

Q1. What is the first step after opening Visual Basic to start a new calculator project?
A. Click on File then New Project and choose Standard EXE
B. Click on Run to start coding immediately
C. Click on Help to search for calculator templates
D. Type your code directly in the existing form

Q2. How many text boxes are needed for the simple calculator in this lesson?
A. One
B. Two
C. Three
D. Four

Q3. What is the purpose of the first two text boxes in the calculator form?
A. To display error messages
B. For the user to enter two numbers
C. To show previous calculations
D. To display instructions

Q4. What is the purpose of the third text box in the calculator form?
A. To hold part of the equation
B. To show the calculated answer
C. To display the time
D. To let the user input another number

Q5. Why do we use the Val function when performing the calculation?
A. To validate the controls used
B. To convert text values to numeric form before addition
C. To check if the button was clicked
D. To add text together as strings

Q6. If you try to add the values from two text boxes without using Val, what is likely to happen?
A. You get the sum of the numbers
B. Nothing displays in the answer box
C. The numbers will be concatenated as text
D. Visual Basic will crash

Q7. What happens when the user clicks the Calculate button before adding any code to its click event?
A. The numbers will add correctly
B. The program will display an error
C. Nothing will happen because there are no instructions
D. The answer box will display zero

Q8. If Visual Basic asks about creating a control array when copying text boxes, what should you do for this project?
A. Always accept and use a control array
B. Select Yes to make things easier
C. Select No, as control arrays are not needed for this project
D. Ignore the dialog box

Q9. What property should be changed so that the button displays the text "Calculate" on it?
A. Name
B. Text
C. Caption
D. Value

Q10. What is the purpose of double-clicking on the Calculate button in the form designer?
A. To change its color
B. To open the code window for its Click event
C. To rename the button
D. To add another button to the form

Answers: 1-A; 2-C; 3-B; 4-B; 5-B; 6-C; 7-C; 8-C; 9-C; 10-B

DISCLAIMER: Quiz questions are AI generated. If you find any that are wrong, don't make sense, or aren't related to the video topic at hand, then please post a comment and let me know. Thanks.

Summary

Today's video from Access Learning Zone takes the lessons from the past couple of classes and ties them together by building a simple calculator in Visual Basic. If you're following along and still have Project 1 open in your workspace, make sure to close it before we start this new one.

Begin by creating a brand new project and selecting a standard executable program. This gives us a clean form and a blank project to work with. The goal here is to build a straightforward calculator that takes two numbers from the user, performs a calculation, and displays the result.

Start by placing the first text box on the form. This text box will be used for the first number, so it's a good idea to rename it to something meaningful. Make sure the Text property is set to blank, as it often defaults to a value you may not want.

Next, you'll need two more text boxes: one for the second number and another for the answer. Rather than placing each one individually, you can copy and paste the first text box to duplicate its properties, then move them into place. However, during this process, Visual Basic may ask about creating a control array. We're not dealing with control arrays today, so you can skip that option. Rename each text box appropriately so it's clear which one is the second number and which one is for the answer.

After setting up the text boxes, add a command button to the form. This button will perform the calculation when clicked. Give the button a meaningful name, such as calculateButton, and update its caption so it clearly says "Calculate."

Once the layout is set, try running the program. You'll notice that the button doesn't actually do anything yet because there's no code behind it. Stop the program and open up the code window for the button by double-clicking it. This opens up the click event where you'll put the logic for the calculation.

Think about what the program needs to do next. You want to take the numbers from the first two text boxes, add them together, and display the result in the third text box. If you try to simply add the contents of the text boxes as they are, Visual Basic treats the contents as text, not numbers. This means that rather than getting a numerical sum, you'll end up with the two strings joined together - so 10 and 25 would display as 1025.

This is happening because the input is being handled as text. You have to specifically tell Visual Basic to treat the values as numbers. To fix this, use the Val function, which converts the text from the text boxes into their numerical values. Apply the Val function to both text boxes before adding them, then place the result into the answer text box.

After you've made these changes, run the program again. Now, when you enter numbers and click Calculate, you'll see that the values are being added correctly and the answer appears in the third text box. This demonstrates how the Val function processes the input from the text boxes and ensures the calculation produces a numerical result.

This project is a solid introduction to handling user inputs, using controls, and performing basic mathematical operations in Visual Basic. We'll continue to expand on these concepts throughout the course, discovering more functions and refining our programs.

You can find a complete video tutorial with step-by-step instructions on everything discussed here on my website at the link below. Live long and prosper, my friends.

Topic List

Creating a new Visual Basic project
Saving changes to previous projects
Choosing a standard EXE project
Adding and naming text boxes to a form
Copying and pasting controls on a form
Naming controls for clarity
Adding and naming a command button
Setting button captions
Running and testing the form
Understanding text-to-number conversion in VB
Using the Val function to convert text to numbers
Programming the button click event
Displaying the calculation result in a text box

Article

Let's build a simple calculator program using Visual Basic, which will give you hands-on practice with designing forms, using text boxes, adding command buttons, and writing just a little bit of code to make your program work. If you are starting from a previous project, go ahead and save and close anything you were working on, so you can start fresh.

Begin by starting a new project. In Visual Basic, choose to create a standard executable program. This opens a blank form where you can start adding controls. Our goal for this calculator is to let users input two numbers, click a button, and see the result in a third box.

First, add a text box to the form. Use the toolbox to select the text box control, then draw it onto the form. With the text box selected, find its (Name) property, and give it a clear, meaningful name such as firstnumber. Also, clear out the Text property so the box is blank when the program starts.

You will need two more text boxes: one for the second input number, and one to display the answer. You can quickly create these by copying and pasting the first box. When you try to paste, Visual Basic may ask if you want to create a control array; just choose No for now, as you do not need control arrays for this exercise. After pasting, drag each new text box into place, one under the other. Name the second one secondnumber and the third one answer to help keep things organized. By copying from your first box, it will also start off with a blank Text property.

Next, place a command button between the second input box and the answer box. Select the button control and draw it on the form. With the button selected, set its (Name) property to calculate so you know what it is for, and set its Caption property to Calculate so users see that on the button.

With your form laid out, try running your program. Enter some numbers in the top two boxes and click the Calculate button. You will see that nothing happens, because there is no code yet. Visual Basic needs to be told how to process the input and display the result.

Double-click on the Calculate button to open its code window. This will create an event handler subroutine that runs whenever the user clicks the button. Inside the subroutine, you need to take the numbers from the first two boxes, add them, and display the result in the answer box.

At first glance, you might try writing code like this:

answer.Text = firstnumber.Text + secondnumber.Text

But if you run the program and type 10 in the first box and 25 in the second, clicking Calculate gives you 1025. That is because Visual Basic treats the .Text property as text, so it joins the two text values together instead of adding the numbers. If you type in words instead of numbers, it will just combine them as text.

To make Visual Basic treat the text boxes as numbers, you need to use the Val function, which converts text to a numeric value. Change your code to look like this:

answer.Text = Val(firstnumber.Text) + Val(secondnumber.Text)

Now, when you run the program, typing 10 and 25 and clicking Calculate gives you 35 as expected. The Val function reads whatever the user entered as text, tries to convert it to a number, and uses it in the calculation. The result is placed in the answer text box, as a string.

Functions like Val are useful for converting data types. Here, you turn the text entered by the user into a proper numeric value so your code can process it correctly.

This basic calculator is a good example of how to use text boxes to accept input, process that input with code, and output a result. As you try out this project, you are also learning how controls work, how to write simple Visual Basic statements, and how to troubleshoot problems with text versus numbers. You can expand on this project later by adding more operations, input validation, or even extra features, but for now you have built a working calculator that demonstrates the basics of event-driven programming in Visual Basic.