Happy Valentine’s Day, everyone! In honor of the holiday, I am happy to present to you the geekiest valentine ever (click here if the popup link doesn’t work for you).
Each of these Valentine’s messages was lovingly hand-coded in the best of modern web languages, just for you.
Now, how does it work? Let’s look at the XHTML first…
This code block consists of a div that contains an image. The default image is the large heart that says, “Click Here for Your Geeky Valentine”. When a user clicks the image, it triggers the onclick event for the div.
That’s it for the XHTML! Now on to the CSS:
font-size:.8em;
border:1px solid black;
width:178px;
height:221px;
background-color:#FFCCFF;
background-repeat:no-repeat;
background-position:bottom center; }
#valentine p { text-align:left;
padding:5px 5px; }
This CSS code makes everything within the div pretty. It also sets all of the properties related to the background image, even though there is no background image yet.
That comes with the JavaScript:
gv[0] = “You complete me: }”;
gv[1] = “while (i <3 u)\n<br /> return true;”;
gv[2] = “function choose(you) {\n<br /> choose(you);\n<br />}”;
gv[3] = “#heart:hover { beats:4you; }”;
gv[4] = “me { margin:0; }<br />to be closer to you”
gv[5] = “<a href=\”LOVE\” alt=\”my link 2 u\”> <3 </a>”;
gv[6] = “me+you { like:glue; }”;
gv[7] = “<img src=\”w3clove.gif\” />”;
gv[8] = “for (boy=girl;boy <3 girl;love++)”;
gv[9] = “<img src=\”cclove.gif\” />”;
// want to add more? put them here!
function getValentine() {
var rand = Math.floor(Math.random() * gv.length)+0;
document.getElementById(“valentine”).style.backgroundImage = “url(valentine2.gif)”;
document.getElementById(“valentine”).innerHTML = “<p>”+gv[rand]+“</p>”;
}
The JavaScript is really the magical part of the program. It first creates and defines the “geek valentine” (gv) global array, specifying each entry. Note the ones that are images - these were uploaded earlier.
The getValentine() function is called when the user clicks the div. This function generates a random number between 0 and the highest index of the gv array (in this case, 9). Next, it sets the background image of the div to ‘valentine2.gif’, (the small heart that says “Again!”). Finally, it sets the contents of the div tag to <p>valentine here</p>, where ‘valentine here’ holds the message.
Sweet, eh? Let’s just hope your sweetie thinks so…
Post a Comment