veil's Introduction

Veil

Author: Skyler Burger Version: 1.3.0

Overview

Veil is a tarot-based web oracle. It can currently perform 3-card spreads for Past/Present/Future readings, or you can enter your own categories for a customized 3-card spread.

Architecture

Node.js: A JavaScript runtime environment and package manager.
Express: A web application framework for Node.js.
EJS: Embedded JavaScript, a templating language for embedding JavaScript within HTML files.
Heroku: A cloud platform for web application deployment.

Roadmap:

Python back end with either Flask or Django
New front end with either React or Vue.js
New page allowing a user to determine where the deck is split during a reading
New page for selecting a one-card pull from a spread
Additional tarot spreads

REPL.it Experiments

Change Log

01/26/2019 - 1.1.0

Rendering three cards from a deck with reversals and basic styling

01/27/2019 - 1.2.0

Added option for customizing the name of positions for 3-card spreads

02/02/2019 - 1.3.0

Additional styling and mobile improvements

veil's People

Contributors

Watchers

veil's Issues

Card Rendering

Card images have rounded corners within the div that's providing their border/shadow.
Set 3 breakpoints to separate mobile, tablet, small screen, and wide screen.
Make sure that cards render properly on a mobile that is in landscape mode.
Work on the height:width ratio of cards and it's responsiveness to the screen size.
Adjust placement of card name when card is revealed so it doesn't bump the entire div up as it tries to vertically center. Maybe put it in separate div below the card?
Keep cards from continually inserting the card name if clicked more than once.

Accessibility

The site has an accessibility issue in that it cannot be used completely with a key board and would most likely not work with a screen reader.

Cards should be highly styled buttons
Make sure that your form is properly labelled.
Make sure navigation links are links, not buttons.
Check color palette for contrast issues. There was an online tool mentioned for this in the Accessibility Krav Maga talk.
Try an accesibility audit with axe Chrome extension

Create a Home Page

Create a landing page for users
Inform user of the current capability of the app (3-card reading)
Let them choose a default 3-card reading or to customize the significance of the 3 positions.

Create User Interface

Add a selector or an index to split the deck to shuffle it
Add a minimum of 3 selections before a final split button appears
Add a final split button
Add labels for the 3 card positions
Add keywords or a 2-3 sentence meaning for each card
Add a small moment of reflection into the flow. Maybe some text that slowly fades up the screen before the table is shown?

Recommend Projects