This is the Solution for the challenge titled ChallengeSimpleCalculator. Remember, only read as much of this solution as you need to solve the problem you are having. Always do your best to do as much as you can on your own.

Step 1: Setting Up The Project

To begin, create a new Project: C# > Web > ASP.NET Web Application, and call it ChallengeSimpleCaculator. Choose the Empty template, and include references for Web Forms. Once the solution has loaded, add a new Web Form to your project called Default.aspx, then switch to the Designer view.

Step 2: Creating Your Web Form

In the design view for Default.aspx, type on the first line, "Simple Calculator" and hit enter. Remember that the instruction was for this text to be a header, so highlight it and apply the style for Heading 1.

2016-07-23

Underneath your header, type in the text "First Value:" followed by two spaces. Open your toolbox on the left-hand side of Visual Studio and insert a TextBox control by double-clicking it. Press the right arrow to move your cursor past the TextBox, hit enter and follow those same steps to type in "Second Value:" and insert a TextBox next to it. Change the font for both text sections to Arial, Helvetica:

2016-07-23 (1)

Hit enter to move your cursor below your TextBoxes, and insert four buttons, each separated by a space, then hit the enter key twice. Insert a label here:

DesignFinal

Step 3: Editing Properties In Your Web Form

In order to easily work with and programmatically reference these Server Controls within your C# code, you need to edit their properties. To begin with, change the name of each of the TextBoxes by selecting one, scrolling down in the Properties window to ID, and type in any ID you’d like. Remember that it’s often best to give a descriptive, easy to remember name, such as firstTextBox or firstValueTextBox.

TextBoxName

Repeat this step for all the Server Controls you’ve placed on screen. For the Buttons, names like addButton or plusButton would be appropriate.

Next, change the Text property (also found in the Properties window) for the four buttons, setting them to, ‘+’, ‘-‘, ‘*’ and ‘/’ (These symbols should correspond to the appropriately named buttons). Finally, clear the text from your resultLabel:

FinishedDesign

Note: The solution for the bonus challenge concerning the resultLabel will be included at the very end of this document, so that you can solve it on your own, even if you need help in other areas.

Step 4: Working With The Button_Click Events

To begin this step, double-click each of the four buttons so that Visual Studio automatically generates an EventHandler for each of them. Once completed, your Default.aspx.cs file should look like this:

EventHandlers

Next, move your cursor into the addButton_Click event to begin working with that EventHandler. What the Challenge requires is for the two values in the TextBoxes to be added together in this particular case. In order to do that, the values from the TextBoxes must be retrieved and converted into an integer.

Note: They could also be converted into a double or long format, but for this project, we’ll stick with integers for simplicity’s sake.

If you remember back to the lessons detailing data type conversion, there is a helper method designed to help us accomplish this goal: int.Parse(). Int.Parse() requires a value to be passed into it, so that it can output an appropriate integer. To do this, create an integer variable for each TextBox’s Text property, and call them ‘first’ and ‘second’. Set ‘first’ equal to int.Parse(firstTextBox.Text). Repeat this step for ‘second’, but using the appropriate TextBox:

int.Parse

Next, in order to perform the mathematical operation on these integers, create an int variable called ‘result’, and set it equal to ‘first + second’. Finally, set the resultLabel’s Text property equal to ‘result.ToString()’:

addButton

Tip: Remember that ToString() performs essentially the same operation as int.Parse(), only converting to a string format. In this case, we used int.Parse() to convert strings to integers, now we are using ToString() to, in essence, reverse the process and return the value as a string.

Now save and run the code to test that it works. At this point, you should be able to input an integer value into both TextBoxes, press the + button and see the calculation on the resultLabel:

addTest

To speed up the process, copy and paste the code you just created in the addButton_Click event and paste it into each of the other EventHandlers. Then, simply change the operation performed in the ‘result’ line of code to either subtraction, multiplication or division as is appropriate:

otherButtons

Once again, save and run your Project to test the code. All operations should work as expected, except the division button. If you were to divide and get a decimal result, it is truncated. If you were to divide 4 by 5, the result displayed would be 0. Obviously, that isn’t accurate and needs to be fixed:

Truncation

Step 5: Refining Your Division Code

To remedy this problem, go into your divideButton_Click code and change all references to int’s to doubles. i.e. ‘int first’ becomes ‘double first’ and ‘int.Parse()’ becomes ‘double.Parse()’:

divisionButton

Now, if you try to divide 4 by 5, you should get 0.8 as a result.

Tip It would be perfectly appropriate to change all int references to doubles at this point if you so choose. In fact, in a real world example that would be preferable as it accounts for the possibility of the user attempting to add values such as 1.25 and 3.72. However, this homework assignment does not require that.

Step 6: Bonus Challenge

The bonus challenge set out was to stylize the resultLabel to include a larger bolded font, and to set the background color to a light blue. In order to do this, go back to the Default.aspx page and select the resultLabel. Under its Properties window, scroll down to ‘Font’ and click the plus button next to it.

Under the options displayed, you can see the first one is ‘Bold’. Set that equal to true in order for the font to be bold. Then, under the Size property, click the drop-down arrow and choose ‘Larger’:

FontSize

Above the font options inside the Appearance category, you will see the BackColor property. Click the ellipsis next to that to display the color dialog box. Select a light blue color value for this, and click OK:

Colors

Save and run your project one more time, type some numbers into the TextBoxes and perform a mathematical operation and see the result:

FinalTest

Conclusion

This is the final solution to the ChallengeSimpleCalculator project. Hopefully, you were able to solve most or all of it on your own. There were some tricky parts involved, especially in styling the resultLabel, but be assured that you can solve it without any help, given time. So if you didn’t solve this on your own, go back and do it again tomorrow. Cement these concepts in your mind and continue to learn. You’re doing a great job so far, keep it up!


Lessons in this Course