DEV Community

Cover image for JavaScript Developer Heart Messages
Chris Jarvis
Chris Jarvis Subscriber

Posted on • Edited on

JavaScript Developer Heart Messages

#javascript #beginners #codepen

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.

A heart made to two overlapping circles on a square that rotated 45 degrees.

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.

a heart.

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"
]
Enter fullscreen mode Exit fullscreen mode

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";  
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

That puts the message on the heart.

screen shot: A heart next to text that read

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)