Day 11 – Greeting Card Maker

It’s Christmas Eve!

I had plans for most of the day so I wanted to do a more simple project. Well, I think today’s website turned into one of the hardest so far! The plan was to let the user enter a message and display the message on a “card” with a set image. I was able to get the message input and display set up without trouble and then I decided to let the user upload their own image. This is when I spent a long time reading about uploading images to the server and got very confused. Ajax? Image resizing functions? Multiple image selections? Previews?

1.FileReader(), reader.onload, attr()
Thank goodness for sites like stack overflow and the goodness of programmers in sharing their code! I used FileReader(), reader.onload and attr() to show a preview of the user’s image on the page. Oh that moment when the image showed for the first time.. glorious!

Snoopy Dance!!
Snoopy Dance!!

With programming, it seems even when I expect things are in order… and the site works, I’m still somewhat surprised!

2. html2canvas()
After finally getting the picture preview to work, I was ready to call it a night until my sister said “you can’t let people make cards without saving them!” Right. html2canvas() is a really nifty way to take screenshots of page elements with Javascript. I added a ‘save card’ button that would let the user save their card as an image in a popup window.
download

3. flat UI colors
One of the problems I’ve had since starting my daily website is the styles! I don’t have any experience in design and often get overly zealous with using contrasting colours. At one point my sister walked by and said “eww that’s gross” (I think the background was mint with colours of fuchsia, blue, and green on the page…). I spent a lot of time trying to tone everything down. This page of flat UI colors was very useful in choosing colors to use: http://flatuicolors.com/. But of course, you can see how I can get overly excited with some of the fun colors on there.

I wanted the page to look flat but had trouble getting the “choose file” button to fit with the rest of the page. In the end I left it the way it was. I think the end product looks okay, although not as festive as you’d think it would be as something built on Christmas Eve.

I think today’s website was a little too difficult for me at this point. There are a lot of concepts I barely understood even though I was able to build this. There’s a lot to learn!

I think the buttons are cute!
I think the buttons are cute!

Make your own card and send it to a friend!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s