Solution - ChallengeSimpleCalculator

Tutorial Series: Free C# Fundamentals via ASP.NET Web Apps

Previous Article  |  Next Article

Get GitHub Code

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.


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:


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.


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:


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:


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:


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()':


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:


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:


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:


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()':


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':


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:


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



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!

Related Articles in this Tutorial:

Lesson 1 - Series Introduction

Lesson 2 - Installing Visual Studio 2015

Lesson 3 - Building Your First Web App

Lesson 4 - Understanding What You Just Did

Lesson 5 - Working with Projects in Visual Studio

Lesson 6 - Simple Web Page Formatting in Visual Studio

Challenge 1

Solution 1

Lesson 7 - Variables and Data Types

Lesson 8 - Data Type Conversion

Lesson 9 - Arithmetic Operators

Lesson 10 - C# Syntax Basics

Challenge 2 - ChallengeSimpleCalculator

Solution - ChallengeSimpleCalculator

Lesson 11 - Conditional If Statements

Lesson 12 - The Conditional Ternary Operator

Challenge 3 - ChallengeConditionalRadioButton

Solution - Challenge Conditional RadioButton

Lesson 13 - Comparison and Logical Operators

Lesson 13 Challenge - First Papa Bob's Website

Solution - Challenge First Papa Bob's Website

Lesson 14 - Working with Dates and Times

Lesson 15 - Working With Spans of Time

Lesson 16 - Working with the Calendar Server Control

Challenge 4 - Challenge Days Between Dates

Solution - Challenge Days Between Dates

Lesson 17 - Page_Load and Page.IsPostBack

Lesson 18 - Setting a Break Point and Debugging

Lesson 19 - Formatting Strings

Challenge 5 - Challenge Epic Spies Assignment

Solution - Challenge Epic Spies Assignment

Lesson 20 - Maintaining State with ViewState

Lesson 21 - Storing Values in Arrays

Lesson 22 - Understanding Multidimensional Arrays

Lesson 23 - Changing the Length of an Array

Challenge 6 - Challenge Epic Spies Asset Tracker

Solution - Challenge Epic Spies Asset Tracker

Lesson 24 - Understanding Variable Scope

Lesson 25 - Code Blocks and Nested If Statements

Lesson 26 - Looping with the For Iteration Statement

Challenge 7 - Challenge For Xmen Battle Count

Solution - Challenge For Xmen Battle Count

Lesson 27 - Looping with the while() & do...while() Iteration Statements

Lesson 28 - Creating and Calling Simple Helper Methods

Lesson 29 - Creating Methods with Input Parameters

Lesson 30 - Returning Values from Methods

Lesson 31 - Creating Overloaded Methods

Lesson 32 - Creating Optional Parameters

Lesson 33 - Creating Names Parameters

Lesson 34 - Creating Methods with Output Parameters

Challenge 8 - Challenge Postal Calculator Helper Methods

Solution - Challenge Postal Calculator Helper Methods

Mega Challenge Casino

Solution - Mega Challenge Casino

Lesson 35 - Manipulating Strings

Challenge 9 - Phun With Strings

Solution - Challenge Phun With Strings

Lesson 36 - Introduction to Classes and Objects

Challenge - Hero Monster Classes Part 1

Solution - Hero Monster Classes Part 1

Challenge - Hero Monster Classes Part 2

Solution - Challenge Hero Monster Classes Part 2

Lesson 37 - Creating Class Files Creating Cohesive Classes and Code Navigation

Lesson 38 - Understanding Object References and Object Lifetime

Lesson 39 - Understanding the .NET Framework and Compilation

Lesson 40 - Namespaces and Using Directives

Lesson 41 - Creating Class Libraries and Adding References to Assemblies

Lesson 42 - Accessibility Modifiers, Fields and Properties

Lesson 43 - Creating Constructor Methods

Lesson 44 - Naming Conventions for Identifiers

Lesson 45 - Static vs Instance Members

Challenge 10 - Challenge Simple Darts

Solution - Challenge Simple Darts

Lesson 46 - Working with the List Collection

Lesson 47 - Object Initializers

Lesson 48 - Collection Initializers

Lesson 49 - Working with the Dictionary Collection

Lesson 50 - Looping with the foreach Iteration Statement

Lesson 51 - Implicitly-Typed Variables with the var Keyword

Challenge 11 - Challenge Student Courses

Solution - Challenge Student Courses

Mega Challenge War

Solution - Mega Challenge War

Lesson 52 - Creating GUIDs

Lesson 53 - Working with Enumerations

Lesson 54 - Understanding the switch() Statement

Lesson 55 - First Pass at the Separation of Concerns Principle

Lesson 56 - Understanding Exception Handling

Lesson 57 - Understanding Global Exception Handling

Lesson 58 - Understanding Custom Exceptions

Lesson 59 - Creating a Database in Visual Studio

Lesson 60 - Creating an Entity Data Model

Lesson 61 - Displaying the DbSet Result in an ASP.NET GridView

Lesson 62 - Implementing a Button Command in a GridView

Lesson 63 - Using a Tools-Centric Approach to Building a Database Application

Lesson 64 - Using a Maintenance-Driven Approach to Building a Database Application

Lesson 65 - Creating a New Instance of an Entity and Persisting it to the Database

Lesson 66 - Package Management with NuGet

Lesson 67 - NuGet No-Commit Workflow

Lesson 68 - Introduction the Twitter Bootstrap CSS Framework

Lesson 69 - Mapping Enum Types to Entity Properties in the Framework Designer

Lesson 70 - Deploying the App to Microsoft Azure Web Services Web Apps

Papa Bob's Mega Challenge

Papa Bob's Mega Solution Part 1 - Setting up the Solution

Papa Bob's Mega Solution Part 2 - Adding an Order to the Database

Papa Bob's Mega Solution Part 3 - Passing an Order from the Presentation Layer

Papa Bob's Mega Solution Part 4 - Creating the Order Form

Papa Bob's Mega Solution Part 5 - Adding Enums

Papa Bob's Mega Solution Part 6 - Creating an Order with Validation

Papa Bob's Mega Solution Part 7 - Calculating the Order Price

Papa Bob's Mega Solution Part 8 - Displaying the Price to the User

Papa Bob's Mega Solution Part 9 - Creating the Order Management Page


Please login or register to add a comment