Behind The Project - CharCount Mac Widget
The widget is set to CharCount mode by default. This mode allows the user to either type in or paste (using ⌘ + V) a string of text. The character length of the string is calculated and updated every time a key is pressed. If the user needs to count words instead, they can press the info link and change to WordCount mode. This mode functions the same as CharCount mode, but is calculated by the number of spaces in the string. Every time the user switches modes, the count is updated to reflect either the number of words or the number of characters respectively.
For the main background, I wanted to use the same color scheme as my portfolio website. I added an inner glow to the background and text area to add depth. I also used a CSS text shadow and segmented font to the count to give the illusion of a digital display. To make it look even more realistic, I used shadows on the count box and continued it on the back info panel for a wraparound effect. The text that denotes the mode in the upper left corner is made of manipulated numbers. If you look closely, you can see that CharCount is made up of the numbers 1-8 excluding 5 and WordCount is made up of the numbers 1-8.