This project is an interactive web application that displays a rotating selection of Pokémon. Users can click on any small Pokémon image to update the central display, change the background color of the page, and instantly play that Pokémon's unique sound clip.
It is a demonstration of DOM manipulation, CSS transitions/animations, and data attributes for dynamic content loading, structured around a visually appealing circular layout.
arundada9000.github.io/pokemon/
- Circular Layout: Small Pokémon images are dynamically positioned in a circle around the main container using JavaScript and trigonometry.
- Interactive Selection: Clicking a small image triggers three simultaneous actions:
- The central image and its
alttext are updated. - The Pokémon's cry/sound is played using the HTML
<audio>element. - The body background color changes instantly to match the Pokémon's primary type/color (e.g., Electric yellow for Pikachu, Water blue for Piplup).
- The central image and its
- Visual Feedback: The selected small image receives a CSS border highlight, and the main image performs a "zoom-out" animation for visual flair.
- Responsive Design: The layout adapts to fit the size of the viewport on all devices using CSS media queries.
The professional operation of this project relies entirely on combining HTML Data Attributes with JavaScript DOM manipulation and CSS math.
All essential dynamic data for a Pokémon is stored directly in the <img> tag of the small image using custom attributes:
- The
data-musicattribute holds the path to the Pokémon's sound file. - The
data-bgattribute holds the specific Hex color code (e.g.,#FFDE59) for the background change.
<img
class="small-img"
src="./assets/images/pikachu.jpeg"
alt="Pikachu"
data-music="./assets/sounds/pikachu.mp3"
data-bg="#FFDE59"
/>The script.js file calculates the precise position of each small image to create the perfect circular "wheel":
- It determines the total number of images (smallImgs.length).
- It uses trigonometry (specifically Math.cos() and Math.sin()) to calculate the X and Y coordinates on the circle's circumference for each image index (index).
- x = centerX + radius.cos(angle)
- y = centerY + radius.sin(angle)
- The calculated coordinates are then applied to the image's style using
img.style.left and img.style.topin percentage units.
When an image is clicked, the img.addEventListener("click", ...) function executes:
-
It uses
img.getAttribute("data-music")andimg.dataset.bgto quickly retrieve the data from the HTML. -
It updates the
audio.srcand initiates playback(audio.play()). -
It applies the retrieved color directly to the page using
document.body.style.backgroundColor. -
It manages the selection highlight and the main image's transition animation.
You can easily add, remove, or modify the Pokémon in this project by editing only the index.html file.
To add a new creature to the wheel, create a new <img> tag inside the <div class="container"> and ensure you populate the four essential properties:
| Property | Example Value | Description |
|---|---|---|
| src | ./assets/images/snorlax.png |
Path to the Pokémon's image file. |
| alt | "Snorlax" |
The name of the Pokémon. |
| data-music | ./assets/sounds/snorlax.mp3 |
The file path for the sound clip. |
| data-bg | #A8A878 |
The Hex color code for the background when selected. |
Note: The JavaScript will automatically recalculate the position to maintain the perfect circular arrangement.
To modify the look or sound of an existing Pokémon:
-
Open index.html.
-
Locate the relevant
<img>tag. -
Modify the Hex color in the data-bg attribute.
-
Modify the path in the data-music attribute.
To run this project on your local machine:
- Clone the Repository:
git clone github.com/arundada9000/pokemon
- Navigate to the Directory:
cd pokemon
-
Ensure Assets are Present: Verify that all image
(.jpeg, .png)and sound(.mp3)files are correctly placed in the./assets/images/and./assets/sounds/directories, matching the paths defined inindex.html. -
Launch: Open the index.html file directly in your web browser.
-
HTML5: Structure, semantics, and Data Attributes.
-
CSS3: Layout, responsive design, and animations (@keyframes).
-
JavaScript (ES6): Trigonometric positioning, DOM manipulation, and event handling.
-
Author: Arun Neupane
-
Project: Developed for demonstration and educational purposes on the Code With Ease YouTube channel.
-
Inspiration: This project is a playful exploration of interactive web design and DOM manipulation.
Personal Note
Coding should be fun! This project was built to bring back the nostalgia of selection screens and explore how simple JavaScript and CSS can create dynamic, engaging interfaces. Gotta Catch 'Em All! ⚡
I enjoy creating fun and educational web projects. Let's connect!
Any Platform my username is arundada9000
The code provided in this repository is free to use and modify for personal and non-commercial projects.
However, please be aware that the Pokémon imagery, official names, and sound clips are the copyrighted property of Nintendo, Game Freak, and The Pokémon Company.
-
Code: You are free to reuse the HTML, CSS, and JavaScript logic.
-
Assets: The images and sounds are included here for educational demonstration and visual context only (under fair use principles). They are not licensed for reuse or redistribution in a commercial context and must be replaced with original or licensed assets for any commercial deployment.
Channel Link : https://youtube.com/@arundada9000
Tutorial Link : https://youtu.be/
© 2025 Arun Neupane — All rights reserved for original code structure and design.
