Explore

JavaScript jQuery Lab Workbook Exercise to show the code for a web page about cats.

In this lab, we will create a webpage about cats, including images, names, and a brief description for each cat. We will use jQuery to create interactive elements and animations to enhance the user experience.

Here's the HTML, CSS, and JavaScript code for your webpage:

HTML:

⁠

Replace cat1.jpg and cat2.jpg with the paths to your cat images. Each cat has its own div with the class cat-card. Inside each cat-card, there's an image, an h2 for the cat's name, and a p for the cat's description.

CSS (styles.css):

⁠

JavaScript (script.js):

⁠

In the JavaScript code, we have two interactive elements. The first is a button that toggles the visibility of the cat descriptions when clicked. The descriptions are initially hidden (see the CSS), and they slide into and out of view with a smooth animation provided by jQuery's slideToggle() function.

The second interactive element is the cat cards themselves. When you hover over a cat card, it will light up with a blue glow, and when you stop hovering over it, the glow will disappear. This is done by changing the box-shadow property of the cat cards using jQuery's hover() function, which takes two functions as arguments - one to be executed when the mouse enters the element, and the other to be executed when the mouse leaves the element.

Remember to replace the src attribute of img tag with the correct image path on your local machine or a URL if you are using an online image. Also, make sure all your .js, .css, and .html files are saved in the same directory (or modify the src and href attributes in the script and link tags to point to the correct paths if they are saved in different directories).

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.