This is a web application that allows the user to generate pixel art of a Pokemon by entering the Pokemon name in a text field and clicking a button. The pixel art is retrieved from the PokeAPI and displayed in a container below the text field.
The web application is implemented using HTML, CSS, and JavaScript. The HTML code defines the structure of the web page, while the CSS code defines the styles for the various HTML elements. The JavaScript code handles the user input, retrieves the pixel art from the PokeAPI, and displays it in the container.
The HTML code consists of a text input field, two buttons, and a container for the pixel art. The text input field allows the user to enter the Pokemon name. The first button generates the pixel art and displays it in the container. The second button allows the user to download the generated pixel art.
The CSS code defines the styles for the various HTML elements. It sets the font size, color, and padding for the text input field, and defines the styles for the two buttons. The buttons have a background color that can be customized using CSS variables.
The JavaScript code handles the user input and retrieves the pixel art from the PokeAPI. When the user clicks the "Generate Pixel Art" button, the code retrieves the Pokemon name from the text input field, fetches the pixel art URL from the PokeAPI, creates a new image element with the pixel art URL as the source, and displays the image in the container. The code also enables the download button and sets the appropriate download attributes so that the user can download the generated pixel art.
If the Pokemon name entered by the user is not found in the PokeAPI, an error message is displayed. If the generation of the pixel art fails for any reason, the container is left empty.
Overall, this web application provides a simple and fun way for users to generate and download pixel art of their favorite Pokemon using the PokeAPI.
Here it is in action: https://cdkw2.github.io/pokemon_pixelart/