Megan Finn-Niznik - Web Designer/Developer

Blog Web-Based Thoughts and Project Descriptions

Behind The Project - CharCount Mac Widget

0 Comments / 1 Likes

Thought Process

While strengthening my programming skills in college, I noticed there were several times I needed to know how many characters were in a string of text. Most of the time I would use my fingers to count the characters, since it was faster than opening a Word document, pasting the string, and using the word count function. However, using my fingers wasn't always accurate because there were either too many characters or I would spell it out in my head too quickly. I was using a lot of Mac widgets at the time and decided to make my own widget to solve my issue. Mac widgets are simply HTML pages with JavaScript functionality and methods specific to widget development, such as the info link, glossy native buttons, and transitions.


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.

The Design

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.

Download CharCount

Leave a Comment