‘Tis the festive season at time of writing this, the time of “i hope i remember everyone” and scrambling to get something (hopefully fitting) in time. To go get into the festive spirit i build a tool to create the ultimately lazy and cheap emergency gift so bland it’ll make the reciver whish they just didn’t get anything.
While that might be a bit of an exaggeration the problem persists: Christmas cards are effort (got to go out and fetch ‘em, come up with some whity texts and so on), so i tried to eliminate some of those problems, especially the “contacting the outside world”-part.
I was taking part in the last game of season 4 of DevWars with the following prompt:
Objectives
- Prompt the user to enter who the card is “To” and “From”
- Ability to select 3 different card variations (color and pattern)
- Prompt the user to enter a custom message to display on the card
- Show a preview of the card with a “Send Card” button
- Animate the card sliding into an envelope after clicking “Send Card”
If you don’t know what DevWars is here is their Adcopy:
A live game show for developers
Not very descriptive, eh?
This one is a better description:
It’s like the ESports for Web developers you did not know you needed
This project, like so many others might actually be best summed up with
we stand on the shoulders of giants
… so here is a list of all external dependencies:
Because this was born out of “DevWars” and i wanted to keep it “vanilla” - meaning no CSS-frameworks or Page-Frameworks like Vue or similar.
I took the liberty to use some JS-libraries so I included some that provide self-contained functions:
… oh and some CSS-values may have been stolen liberated from tailwindcss, just like the background patters that I got from heropatterns.com.
In the end pretty much all I had to write was glue code to get those libraries to cooperate and a bit to sync inputs to uneditable elements (input elements to styled H1-tags for example). Linking the ‘from’ and ‘to’ - <input>-elements directly requires a simple onchange-eventListener to copy data while the ext-body one passes through the marked.js lib as currently stated. The background pattern and color is changed by simply setting the correct class on the SVGs and other elements (again one-way bound to change events).
The code can be found in several places:
Have fun with whatever you create using this abomination
