As a fan of the anime and manga, Cardcaptor Sakura, I wanted to build a project that displays both Clow and Sakura cards for a side-by-side comparison.
Link to project: https://glowing-moonbeam-1668fc.netlify.app/
Tech used: HTML, CSS, JavaScript, API
I built this simple Cardcaptor Sakura cards comparison website by incorporating an API created by JessVel. Using "Clow Card" and "Sakura Card" key-value pairs within the object, I created a website featuring two functions:
- Search for a specific card and see the Clow vs. Sakura cards
- Click on the random card picker button to view any Clow/Sakura card pair.
Once I have more time outside my main projects, I would love to work on making this project stylistically more pleasing. Also, the API often returns with a 404 error, and I would like to create a conditional that edits the DOM to tell the reader to either refresh or click one more time to use the API.
I learned how to access the API key-value pairs in order to obtain the img source link to display the two cards. I also learned how to manipulate and render the DOM so that the img elements do not appear until the user either searched for a card or clicked on the random card button.
Take a look at these couple examples that I have in my own portfolio:
LUNA LOGISTICS: https://github.com/boyeonihn/luna-logistics-website
Dog Wisdoms: https://relaxed-entremet-c40b40.netlify.app/