select-pet

##Project Description

This project is a simple and interactive Pet Selector Web Application built using JavaScript. It allows users to choose a pet from a dropdown menu and instantly displays the corresponding pet image.

The application demonstrates dynamic content updating using DOM manipulation and event handling, making it a great beginner-friendly project.

##Features

🐶 Multiple Pet Options Dog, Cat, Parrot, Spider, Rabbit

🔄 Dynamic Image Update Changes pet image instantly based on selection

⚡ Real-time Interaction Uses change event for immediate response

🖼️ User-friendly UI Visual feedback with images for better experience

##Technologies Used

HTML5 – Structure (dropdown & image)

CSS3 – Styling and layout

JavaScript (ES6) – DOM manipulation and event handling

##Installation Steps

  1. Clone the repository git clone https://github.com/PANJAMYNASAIRAM/select-pet.git
  2. Go to project folder “cd select-pet”
  3. Install dependencies “npm install”
  4. Start the project “npm start”

##Live Demo

https://PANJAMYNASAIRAM.github.io/select-pet

##How It Works User selects a pet from the dropdown JavaScript captures the selected value Fetches the corresponding image URL from an object Updates the src of the image element Displays the selected pet image instantly 📂 Project Structure project-folder/ │ ├── index.html ├── style.css └── script.js 📸 Use Case

This project can be used in:

Learning DOM manipulation Interactive UI demos Beginner JavaScript practice projects 💡 Future Enhancements Add more pets 🐢🐍 Add pet descriptions Add animations when switching images Convert into a React app Add sound effects for each pet