Tuesday, February 3, 2015

Reflection of a string using Javascript and CSS

What I wanted to do was reflect a string in the same way CSS can be used to reflect an image. I didn't readily find a way to do this, although it is fairly easy. My code is here.

First, I have 2 divs wrapped in a container div. This is simply for convenience of moving the inner divs around since they need to stay "stuck" together for the effect of reflection.

Second, I used transform in CSS to rotate the original image to make it upside down but only applied this to the second div where the reflection occurs. At the end of the Javascript function, I make this upside down image the value of the second div which is otherwise empty.

Third, the Javascript code first stores the original value ("Heather") in a variable. This string is then broken up into a char array using charAt and stored in another variable. I then use reverse() to reverse the order of the chars.

Finally, my last task is to get rid of the commas separating the chars, so I use join("") and store the new string in a third variable. (Hint: Don't forget to use a separator or join won't get rid of the commas.)