< Back to My Work

Tarot Card Generator

Web Development

Project Overview

This project was originally a random card generator for a classic deck of 52 cards. This revised version uses the same concept, but with added functionality of user input and data.

Tools

  • HTML⁄CSS
  • JavaScript
Tarot Generator Overview

Gathering Images

I started with looking for vectors of illustrated tarot cards. In the final product I used ones I found from Adobe stock images, converting all standard AI files to SVG to increase loading speed of a page as PNGs would cause it to render slowly.

tarot img

Building HTML/CSS

With any coding projects, I like to work in chunks to stay organized that way it's easier to debug along the way. First, I would create the root directory and upload it to GitHub. From there I would build out all the HTML then styled the elements with CSS afterwards.

Writing Vanilla JavaScript

Finally, the JavaScript. I began with writing out my variables then the click event function that would replace the card back image with a new one from the array and output all the user input data onto the page. I made sure that the user wouldn't be able to have more than a single reading per session.

Live Demo

Jump To Top