Need a last minute idea for a Valentine's day card? Make something special with your coding skills!
Below is an HTML/Google Apps Script template to get you started! This template allows you to tie in IFTTT to trigger other events when your custom e-card is opened. Scroll to the bottom to see it in action!
Note that this is not a card in itself! It is just meant as a place to get started and spark som ideas :-)
Follow along with the code on Google Apps Script!
body{
background-color: pink;
}
This first block of CSS sets the background to a color of your choice, in this case pink.
#heart{
position: absolute;
width: 30vw;
left: 35vw;
}
This block sets where the #heart image is located. Feel free to play around with thees umbers to get it where you want!
#heart:hover{
transform:scale(1.25);
}
This block makes the #heart image enlarge when the mouse hovers over it.
<img id="heart" src="heart.png" onclick="love()">
This is the actual image object. It creates the #heart ID and tells the browser to run the love() function when the image is clicked on.
<script>
function love () {
alert("Happy V-Day!");
}
</script>
This block defines the love() function. Right now it only shows a shorts message as an alert.
After creating your e-card, it may be a good idea to use TinyURL or Freenom to customize the link you send.
Written with love in StackEdit.