Skip to content
No description, website, or topics provided.
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
favicon
fonts
img
scripts
styles
README.md
index.html

README.md

fortune-cookie

This initally was a simple class project to work with APIs.

I found the cute fortune cookie image and I wanted to have the fortune appear to be on the 'paper.'
After converting the image to SVG and playing around with text on a path, I finally achieved what I was going for.

This also utilizes the user's local storage to store an array of fortunes. Only fortunes that have 1 or 2 lines are kept, AND the length of each line must be less than 70 characters so that it would fit on the paper.

It was a simple project, but I am very interested in the powerful appearances that you can achieve when using SVGs.

"next" and "previous' will only fetch a new fortune from the API if the pointer is at the end of the array. "Random" only selects a random fortune from the established array. There is a seed, starter array, but that will grow for each user in their local storage.

There are some strange happenings in the world of mobile! I had to remove the 'alignment-baseline:baseline" attribute on the text path. For some reason, safari/iphone interpreted that as 'hanging;' removing it completely seemed to fix the problem. And, I added 2 separate paths instead of using baseline and hanging on one path. Mobile doesn't seem to be rendering the path exactly right - which does not make any sense given that it is an SVG... I also had to remove the pre-line code for mobile. "white-space: pre-line; " causes the text to be jumbled up on top of itself. I chnaged this to white-space:nowrap;

You can’t perform that action at this time.