This project uses the Animal Crossing New Horizon API. I'm receiving info on a random villager from the API, and then displaying that info on a pokemon style playing card. This is my updated version of this site, where I fixed issues with styling on smaller screen sizes.
Live Site: https://animal-crossing-app.netlify.app/
Tech used: HTML, CSS, JavaScript I started this project by setting up my HTML template. I then started with my JavaScript and had to check to see what data I was receiving from the API so that I could choose what I wanted to use for my card. I ended up using the name, image, birth date, catch-phrase, and saying for each villager. Then I started with the CSS for the styling, so that I could display this info on a playing card.
In the original version (https://github.com/leahthompson01/ACNH-Villager-Generator), there was a gap at the bottom or text overflowing when you resized your screen. When trying to fix these issues, I ended up messing up the styling more. So to fix this, I got rid of most of the styling and started from a mobile first design. So I started with the styling for the mobile version, and then added styling from there. This fixed all of the issues I originally had, so if you resize your screen the styling will adapt with it.