Category Archives: CodePen

How Much Water Should You Drink?

Share this:  

My dear wife Yvonne has been trying (and rightly so) to get all of us in our household to drink more water. She found a page on the Goodhousekeeping web site that shows you how to calculate the amount and printed a copy out for herself to use.

I thought that this would be a perfect little coding application and preceded to create a Pen on CodePen that you can use to easily figure out how much water that you need to drink daily. You can add the members of your family and it remembers the values on that computer/device for that particular web browser (it saves the input values locally).

Note that when you exercise, you need to drink even more water than the base calculated value. This makes sense when you think about it because your body will be sweating during this time as a way to cool your body. This means more loss of water! But it’s worth it right? We need regular exercise! Just make sure you’re drink enough fluids like water so you can rehydrate!

BTW: You probably already know this, drinking caffeinated beverages is dehydrating since caffeine is a diuretic. For every amount of caffeinated fluid you drink, you should drink an equal amount of fluid without caffeine to balance it out (I learned about this during a running clinic at the Chicago Area Runners’ Association (CARA). When exercising, it probably makes sense to avoid caffeinated beverages altogether.

See the Pen How Much Water Should You Drink? by Orville Chomer (@orvilleChomer) on CodePen.0

Here’s to a happy, healthy life of good choices!

A Fun Experiment with Swirling Text

Share this:  

I’ve had, for awhile, various ideas for doing the animation of text. Imagine (if you will), your user clicks on something on the page, and this cool animation of swirling letters happens, and the letters come together to for some paragraphs of text.

Then your user clicks a DONE button, let’s say, and those same paragraphs explode into a swirl of letters which now fly apart and disappear off the edge of the screen.

A few months back I started working on some code to do this. What I got done was JavaScript code that takes the text in the paragraphs and puts a special SPAN tag around each character in these paragraphs, gives them a special class name, and a unique id.

That is as far as I got.

Well yesterday, I decided to pick up this little project again and I surprisingly got a working example! Usually stuff like this takes a bit of debugging before it starts to cooperate with me!

Below, embedded on this blog post is the Pen that I created in Code Pen to do this.

It is just an experiment. But I think a successful one! Try clicking the buttons in it to see it in action. I designed it on my iMac and made no attempt to make it work perfectly on a mobile device. Again, it is just an experiment.

Anyways, enjoy!

See the Pen Formatting a Paragraph for Text Animation by Orville Chomer (@orvilleChomer) on CodePen.0

Note that the DIV with the red border has overflow set to hidden. This is to keep crazy scroll bars from appearing while letters are flying around.