Objectives

• Apply knowledge of HTML Controls to a project scenario.
• Learn about visibility properties of HTML Controls.
• Connect to a SQL Server database using C# in ASP.NET
• Apply knowledge of the logical operators AND and OR.
• Learn to calculate the decimal (base 10) value of an 8-bit binary (base 2) number.
• Learn to Logical AND and Logical OR two 8-bit binary numbers to enhance cognitive thinking skills.
• Learn to bitwise AND and bitwise OR two 8-bit binary numbers to enhance cognitive thinking skills.
• Demonstrate calculation of hexidecimal (base 16) numbers from decimal (base 10) values.
• Demonstrate ability to generate colors from binary numbers.

Background

Binary numbers are made up of 0 and 1. An example of a binary number would look like: 10010111
This is an example of an 8-bit binary number. A 16-bit binary number would look like: 1001001011011001
This project deals with 8-bit binary numbers. The decimal value of 10010111 is not 10,010,111. It is actually 151 as a base 10 numeric value.
How is it calculated?
Binary numbers count from right to left. Each digit to the left is twice the value of its digit to the right. A graphical representation of this would look like this:

Hence, a 1 in the 128 box gives the binary number a decimal value of at least 128.
Some Examples:

Thus, 0 to 255 offers 256 values within an 8-bit binary number.

Bitwise AND (&)
How to bitwise AND binary values together:

Bitwise AND requires two operands, just like a logical AND. Bitwise AND is represented by a single ampersand, &, whereas a logical and is represented by a double ampersand, &&. How does it work? Use a logical AND to compare each of the bits against each other, starting from the right.

Only when both numbers are a 1, will the result be a 1. Otherwise, the result is 0.

and so on...

Bitwise OR ( | )
How to bitwise OR binary values together:

Bitwise OR is represented by a single | (pipe) whereas a logical OR is represented by a double pipe, ||. How does it work? Use a logical OR to compare each of the bits against each other, starting from the right.

When either bit or both bits are a 1, then the result is a 1.

Bitwise XOR (^)
There is another bitwise operator, XOR, which is an abbreviation for eXclusive OR. XOR works like this: When either bit is a 1, then the result is a 1, but if both bits are a 1 or if both bits are a 0, then the result is a 0.

Requirements

Create an aspx of this general form:

Changing any drop down to a 0 or 1 calculates the Decimal value for that color, the Hex for that color, and changes the color on the right. The bottom bitwise row is either not visible or disabled until all 24 bits have been changed to a 0 or 1.

Upon choosing the eighth and final bit of the third 8-bit number, again, the decimal value of the 8-bit number would be calculated and stored, and a final row of the table would appear (or become enabled). This final row will contain the bitwise selection boxes allowing you to choose two 8-bit numbers. At this point, you would then choose whether to bitwise AND (&) or to bitwise OR ( | ) or to bitwise XOR ( ^ ) these two 8-bit numbers together. Upon changing any of those 3 select boxes, the result would be recalculated.

Database

• Every time the final bitwise calculation is calculated, store the following into the database:
  • Red binary
  • Green binary
  • Blue binary
  • Red decimal
  • Green decimal
  • Blue decimal
  • Hex value
  • Bitwise operation (R & B)
  • Bitwise result
• Create a separate page that displays (neatly and well designed) all of the results.
• Provide a link on each version to the results page for easy navigation.

Second Version

• Use an UpdatePanel to recreate the project so that no postbacks (page refreshes) occur.

Turn In

• Version 1 (project1a.aspx): Use postbacks to call functions in the code behind
• Version 2 (project1b.aspx): Use an UpdatePanel so that there are no page refreshes

Examples

• Example 1: version 1 | version 2
• Example 2: version 1 | version 2

Grading
If the project is not functional (does not work), then your project grade starts at 50%. This is a professional project; our company will not accept partial work. Late work will not be accepted. (In the real world, you would not get paid for a project you did not complete. In our world, you start at 50%)

• 25% Aesthetics & Usability
  • (Professional, effective and easy navigation, common scheme across entire site, use of images, originality, creativity, usability features, intuitive, user friendly, easy to use, etc. -- More than just form elements -- CSS, look 'n' feel, etc.)
• 60% Coding, Logic, Database Integration & Functionality
  • (Does not crash, proper indentation, neatness, free from errors, correct logic, security, follows typical coding standards, apparent planning, etc.)
• 15% Commenting
  • (In general, one line of comment per line of code)
• If only one of versions 1 and 2 is turned in:
  • Automatic deduction of 15% on top of and in addition to any other grade deductions.