This is a repost from last year. I'm working on updating the project but won't have a blog post ready before the weekend. So here's your reminder Valentines day is next Tuesday.

Remember those Valentine's Candy Conversation hearts? For this project I'm recreating them using vanilla JavaScript and CSS.

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 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

Reblog: Javascript Dev Heart Message

Draw a heart

Javascript Messages

Wrap up