“A Valentines Message 4 U” — A simple Valentine’s Website (HTML, CSS, & JS) with a Lego Theme
For the full code check out this GitHub link and to view live/receive your Lego Valentine ❤ click here.
Step 1: Find your style of Valentines ❤! Perhaps peruse Pinterest or Tumblr for ideas and inspiration. I found some Lego pins on Pinterest that suited my needs :).
Next I made sure each image was that same size, not necessary entirely but it will ease the transition on page refresh/button click.
Next start a folder entitled something like ```valentines-proj``` and drag that folder into your code editor of choice. For me that is VS Code.
Create an index.html file and start laying out the basics for your project. You will need a button with the class of “btn” and id=”refreshButton”. And an empty div below with id=”valentines-container”.
<body>
<div class="container">
<button class="btn" id="refreshButton">Receive New Valentine <3</button>
<div id="valentines-container"></div>
<div>
<p><3 lots o'love Claire © 2025</p>
</div>
</div>
<script src="./index.js"></script>
</body>These classes and id’s will come in handy to enable the interactivity with code connect from the index.js you will now need to create. And while making that file why not make a styles.css and link it in the <head></head> of your index.html file.
I also used styling from the library system.css for the background, scroller, and button looks.
After that all… your index.html should look something like this (feel free to edit the <title></title> tag and change the paragraph copy.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Valentines Message 4 U</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unpkg.com/@sakun/system.css" />
</head>
<body>
</body>
</html>
<body>
<div class="container">
<button class="btn" id="refreshButton">Receive New Valentine <3</button>
<div id="valentines-container"></div>
<div>
<p><3 lots o'love Claire © 2025</p>
</div>
</div>
<script src="./index.js"></script>
</body>Now for that interactivity I talked about earlier… first let’s open our JavaScript file (index.js) and make our first variables.
const img1 = "./img/lego-1.jpg";
const img2 = "./img/lego-2.jpg";
const img3 = "./img/lego-3.jpg";
const img4 = "./img/lego-4.png";
const img5 = "./img/lego-5.png";Those are all the variables with the path to the file written out. Next I defined an array and added all of my image path variables within it.
const images = [ img1,img2, img3, img4, img5];From there I created a new variable which chooses a random number from all available image indices. Can you guess how you could do this in JavaScript? This is how I did it:
var randomImage = images[Math.floor(Math.random() * images.length)];Next I made the random image into the image tag and using DOM manipulation I was able to append this image back to our original div with the class name of “valentines-container”.
// make the URL into a proper image tag
var image = "<img src='" + randomImage + "'>";
// append to the div
document.getElementById("valentines-container").innerHTML = image;Now the final step in our interactivity — the button! Let’s make our click event:
const refreshButton = document.getElementById('refreshButton');
refreshButton.addEventListener('click', function() {
location.reload();
});So the final index.js looks like this:
// create variables to store the path to your image files
const img1 = "./img/lego-1.jpg";
const img2 = "./img/lego-2.jpg";
const img3 = "./img/lego-3.jpg";
const img4 = "./img/lego-4.png";
const img5 = "./img/lego-5.png";
// define your images here
const images = [ img1,img2, img3, img4, img5];
// this chooses a random number from all available image indices
var randomImage = images[Math.floor(Math.random() * images.length)];
// make the URL into a proper image tag
var image = "<img src='" + randomImage + "'>";
// append to the div
document.getElementById("valentines-container").innerHTML = image;
const refreshButton = document.getElementById('refreshButton');
refreshButton.addEventListener('click', function() {
location.reload();
});Next in my styles.css I did a bit of styling. Mostly for some spacing and centering:
.container {
padding: 40px;
margin: 0 auto;
text-align: center;
}
.container img {
padding: 20px;
max-width: 100%;
text-align: center;
}
@media screen and (max-width: 480px) {
.container {
padding: 20px;
padding-top: 60px;
max-width: 60rem;
}
.container img {
padding: 0px;
padding-top: 20px;
}
.btn {
font-size: 32px !important;
}
}
Hope you enjoy and create your own possibly virtual, possibly random, and probably very cute Valentines ❤!
