This content originally appeared on DEV Community and was authored by Chris Jarvis
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
This content originally appeared on DEV Community and was authored by Chris Jarvis
Chris Jarvis | Sciencx (2022-02-11T14:09:07+00:00) Javascript Dev Heart Messages. Retrieved from https://www.scien.cx/2022/02/11/javascript-dev-heart-messages/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.