Remember those Valentine's Candy Conversation hearts? For this project I'm recreating them using vanilla JavaScript and CSS. Why, cause I had an idea to do it.
Draw a heart
If we're going to write on a heart we need to build the heart first. This is made with some basic shapes, a square and two circles. To make a CSS Circle you make a square and give it a border radius of 50%.
I added borders so you can see the individual shapes.
Once the shapes are made use transform: rotate(45deg)
to turn the heart so the point is straight down. I added a drop shadow to make the heart standout from the background.
Javascript Messages
Next we need a list of messages. Here's some of the messages used for the project. I didn't them list all to save some space.
var messages = [
"Will you be my variable? ",
"Be the Fizz to my buzz! ",
"This ♥",
"Stickers!",
"if ( (you + date) < 2) { </br> call (me) } ",
"You\”: \“My heart\" ",
"I will always write tests",
"git commit -m \":heart:\" ",
"01101000 01100101 01100001 <br> 01110010 01110100"
]
Next we need a function to pull a random message from the list and put it in the heart Id div that is on top of the Bigheart, the CSS heart.
function sweetHeartMsg() {
var randomNumber = Math.floor(Math.random() * (messages.length));
document.getElementById('heart').innerHTML = messages[randomNumber];
heart.style.display = "block";
}
The function is activated by clicking a button.
<div class="login-screen" >
<h1>"Hello World"</h1>
Click the button for .random(♥) candy heart message.
<input type="submit" value="Dev Hearts." class="btn btn-primary btn-large btn-block" id="submit" onclick="sweetHeartMsg();">
</div>
That puts the message on the heart.
Wrap up
This was a good exercise if I would make a version 2 I'll allow users to enter their own messages to display on the heart. I would also like to thank my friends, Meg and Julia at VirtualCoffee for helping with message suggestions.
Heart shape inspired by this post
Top comments (0)