jQuery is a flexible framework for javascript that I found to be conveniently painless to work with. My goal was to get familiar with jQuery, so I embarked on writing this cute kitty toy to play with some of the functions. I welcome criticism.

I will walk through my code piece by piece before I show the corresponding HTML all at once; the way I have it written is for the design rather than the script, so the HTML might be a tad misleading.

The first thing I thought about was what color I wanted my cute kitty to be, and after much deliberation, I decided that I could not decide. I fixed that problem by making kitty a random color from a set of predefined colors when you click on kitty's picture.

The HTML is pretty straight-forward:

In the script I created a furs variable to define the colors that I want kitty to be. Then I added the jQuery event, .click();, to run a random number generator to extract a value for the choice variable from the furs list. After that has run, I then define #picture div to set the choice value as the background-color property, using .css();.

Kitty changes colors because she is actually transparent! I made a .png so when I define the background-color, it is visible behind her.

Voila, kitty is stylin'.

My next thought was that all kitties need food. I have two images in the #food div because the fish image will have to be dragged away from the kitty icon, and dropped on to the actual kitty to feed her.

Two separate images:

Simple HTML:

I made the kitty image a .droppable(); element so when a .draggable(); element (which will be the fish) is dropped on the kitty, a number of functions will run. It will change the source of the img tag using .attr(); to display an image of the kitty eating a fish. Then I added a class, .eating, to the kitty image for later use. Finally, I used .hide(); to hide the fish during consumption.

Now I need to make my fish mobile so I can give it to the kitty. I select the class .fish, and applied the .draggable(); event. While dragging .fish, the source of the kitty image is switched so kitty is displayed as ready to receive some fish. The revert: true will snap the fish back into place if it is not dropped on a .droppable(); element (the kitty). When .fish has stopped moving, whether it is on kitty, or across the page, an if/else statement will run. The statement searches for a class called .eating (which is added when the fish is given to the kitty). This checks to see if the kitty has received the .draggable(); element (fish), by checking for the .eating class.

Now I was left with an image of kitty eating, and a missing fish image. I wrote this to reset the kitty and fish images, and remove the .eating class. This functions runs at the end of the .draggable(); event.

This function simply changes the kitty image back to normal, removes the .eating class, and positions the fish with CSS using values that are variables of the initial position of the fish on-load (fishLeft, fishTop). The fish will return to it's place by fading in slowly (.fadeIn();), and ready to fed to the kitty again.

At this point I felt a bit awkward that I had been feeding the kitty over and over again, but I had no means of communicating with her. Kitty needs to meow. I wrote a small form that has an id of #user-input.

I took the input from #user-input, and called it variable english. I created another variable that counts the number of characters in the variable english. The if statement checks to see if #user-input was left blank, and if so then the kitty is confused by changing the image source to kitty_confused.png, and adding some text to an h1 tag. I used .text(); to add a text value to the selected header tags. The else statement takes variable english and sets it to h3. It also changes the kitty-image source to kitty_meow.png, so when the kitty replies her mouth opens.

Using another if statement, the kitty responds based off of how many characters the user inputs. The reset_kitty function runs again to revert the cute kitty back to her natural state, but there also a reset_meow function to handle the header tags:

The function simply sets the value of h1,h3, and #user-input back to nothing so the text is no longer displayed after 2000ms.

The HTML for the chat is here:

Divs #kitty-speech, and #user-speech are given a class of .kitty-bubble, and .input-bubble, that specify CSS properties. They bring up the little chat bubbles around h1 and h3, but are removed when reset_meow runs.

Finally I have the kitten fully functional and ready to interact with the world. I hope the internet treats her nicely! If you have a problem with my code, then please email me.