Digital Tarot Card Reader

Project Overview

The Digital Tarot Card Reader is an interactive web-based experience that allows users to draw a tarot card and receive a personalized reading. Built using HTML, CSS, and JavaScript, the project features custom visual design and an animated card-draw sequence. It combines aesthetic storytelling with real-time data pulled from an external API, offering users a moment of reflection and insight through digital divination.

The Challenge

The main challenge was integrating multiple elements, visual design, animation, and external data, into a seamless user experience. This was my first time working with an API, which meant learning how to fetch, parse, and display dynamic content. I also wanted to maintain a strong visual identity throughout, so creating a cohesive look between the Photoshop-designed cover page and the web interface was key.

Process & Development

The project began with the visual concept. I used Photoshop to design the landing page, drawing inspiration from traditional tarot aesthetics while giving it a modern digital twist. Once the visuals were in place, I built the structure of the site using HTML and CSS, focusing on layout, color, and accessibility. Next, I added interactive functionality in JavaScript. I created an animated card draw interaction that mimics the suspense and ritual of a real tarot reading. When a card is selected, the app fetches data from a tarot card API, displaying the card’s name, image, and meaning dynamically. This required learning how to work with asynchronous JavaScript and JSON data formats.