Skip to content

Latest commit

 

History

History
39 lines (27 loc) · 3.05 KB

README.md

File metadata and controls

39 lines (27 loc) · 3.05 KB

The Pokémon Display Website

A dynamic web application designed to display Pokémon cards based on the user’s input of the number of cards and type of Pokémon. This project uses the PokeAPI to fetch real-time data and presents it in a visually appealing, fully responsive interface.

Main Motive & Personal Twist

The main objective of this assignment, as given by my Harkirat Sir, was to design an application that allows users to select the number and category of Pokémon to display using the PokeAPI. While the core task was to simply fetch and render the data, I wanted to take the challenge further by adding my own touch.

Instead of merely displaying static Pokémon cards, I focused on implementing dynamic components and state management for a more scalable and interactive experience. The assignment encouraged us to explore the power of APIs, but I decided to spice things up by using promises to ensure smooth data fetching, shuffling logic for randomized Pokémon display, and crafting a fully responsive UI using only vanilla CSS.

The goal was not just to fulfill the assignment requirements but to experiment with more advanced techniques and provide a better user experience.

Features

  • State Variable & Component-based Rendering: The application efficiently manages the state using variables to store Pokémon data and dynamically renders the cards using JavaScript components.
  • Custom Design: The entire design has been hand-crafted using vanilla CSS, ensuring a clean and intuitive user interface without the need for external frameworks.
  • Data Fetching with Promises: Pokémon data is fetched asynchronously from the PokeAPI using promises, ensuring smooth and responsive interactions for the user.
  • Fully Responsive UI: The interface is designed to be fully responsive, offering an optimal experience across devices, from desktops to mobile.
  • Enhanced User Experience: The application shuffles the Pokémon data and gracefully handles errors (e.g., image loading failures) by displaying placeholder images until the actual images are ready.
  • Shuffling Logic: Added a shuffle mechanism to randomize the Pokémon displayed, using an efficient algorithm to ensure randomness.

Learnings

This project helped me dive deeper into:

  • State management in JavaScript using variables.
  • Component-based rendering of elements with plain JS.
  • Fetching and handling API responses asynchronously with promises.
  • Building fully responsive layouts using vanilla CSS.
  • Error handling, especially around dynamic image loading.

Screenshots

Screenshot 2024-09-13 at 1 07 52 AM Screenshot 2024-09-13 at 1 08 08 AM Screenshot 2024-09-13 at 1 08 14 AM

Credits