Generate a Random Birthday Wishes using JavaScript

Name: Generate a Random Birthday Wishes using JavaScript
Uploaded: 2024-08-08T11:15:12Z
Duration: 4 min 39 s

Last Updated : 18 Apr, 2025

In this article, we are going to learn how to create a webpage that generates random Birthday wishes using HTML, CSS, and JavaScript.

Approach: To generate a random birthday wish we will follow the below-given steps.

HTML Code: In this section, we will create a basic structure of the HTML file i.e. it contains <html>, <head>, <body> tags, etc.
CSS Code: It is used to set the styles to the HTML document. Here, we set the width, height & position of the document. We will use a CSS media query to set the styles on different sizes of screens.
JavaScript Code: Now we want to display a random birthday message to someone and this can be done through JavaScript. In this section, we store all messages in an array variable and then use an array.length property to check the size of the array. After that use math.random() function to generate a random number to display the random message.

Example: In this example, we are using the above-explained approach.

HTML

<html>
<head>
    <title>Page Title</title>
</head>

<body>
    <div class="body-bg"></div>
    <div class="container">
        <div class="container-data">
            <div id="msg"></div>
        </div>
    </div>
</body>
</html>

CSS

.body-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: radial-gradient(#00E7BD, #013A4E);
    transition: all 0.5s;
}
  
.container {
    width: 80%;
    height: 80%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(#00E7BD, #013A4E);
    box-shadow: 0 0 20px 2px #013A4E;
}
  
.container-data {
    padding: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 3vw;
}
  
@media only screen and (max-width: 763px) {
    .container-data {
        padding: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 6vw;
    }
}
  
@media only screen and (max-height: 423px) {
    .container-data {
        padding: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        color: #fff;
        font-family: Arial;
        font-size: 4vw;
    }
}

JavaScript

let messages = ["Happy birthday to GFG",
    "Happy birthday to GeeksforGeeks",
    "Happy birthday to Geeks"];

let i = messages.length;
let s = Math.floor(Math.random() * i);

document.getElementById("msg")
    .innerHTML = '" ' + messages[s] + ' "';

Output

Generate a Random Birthday Wishes using JavaScript

NavdeepSharma

Improve

Article Tags :

Generate a Random Birthday Wishes using JavaScript

Similar Reads

Thank You!

What kind of Experience do you want to share?