Happy St. Patrick's Day!

Project Details

Date: February 2017 - March 2017

Category: Web Development, Asset Creation

Technology: HTML, CSS, JS, Photoshop, Illustrator

Duty: Ideation, Lead Developer

Purpose

The main objective of this project is to produce a web-based, e-card that is both interactive and user-friendly. The e-card can be a holiday of your choice. It must showcase several facts about the holiday. This project must use SVGs and focus on using events (click, mouse-over, etc.) in JavaScript.

Process / Skills Learned

When starting this project, I initially chose a holiday to base the e-card on. The holiday I chose was St. Patrick's Day. I proceeded to research facts to determine which specific parts I would be able to animate and make interactive. The first major step I took was creating an initial sketch as seen below. Click to view the enlarged image.

At the same time I was drafting the sketches, I noted possible animations and interactions on the sketches themselves. I decided which parts should be clickable, movable, or animated. After the sketches were made, I began carefully creating the visual assets through Adobe Illustrator. I had to make sure each layer was named properly for use when transferring it to code. I exported these assets into a single SVG chunk of code.

I used JavaScript events such as click and mouseover to manage the user interactions. I also utilized the window.onkeydown to create a typing recognizer to create a puzzle where the user was required to type out a sentence.

Lastly, I learned to implement a wide range of simple CSS animations such as rotations, transitions, and transparency.