Generate a Random Birthday Wishes using JavaScript

Last Updated : 02 Jun, 2021

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

Approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

HTML Code: In this section, we will create a basic structure of the HTML file i.e. it contain <html>, <head>, <body> tags etc.

HTML

<!DOCTYPE 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 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.

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 Code: Now we want to display the 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 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.

JavaScript

var messages = ["Happy birthday to GFG", 
    "Happy birthday to GeeksforGeeks", 
    "Happy birthday to Geeks"]; 
  
var i = messages.length; 
var s = Math.floor(Math.random() * i); 
  
document.getElementById("msg") 
    .innerHTML = '" ' + messages[s] + ' "'; 

Complete Code: After combining the above three sections of code, it generates a random birthday wishing message.

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
      
    <style> 
        .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; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div class="body-bg"></div> 
    <div class="container"> 
        <div class="container-data"> 
            <div id="msg"></div> 
        </div> 
    </div> 
  
    <script> 
        var messages = ["Happy birthday to GFG", 
            "Happy birthday to GeeksforGeeks", 
            "Happy birthday to Geeks"]; 
  
        var i = messages.length; 
        var s = Math.floor(Math.random() * i); 
          
        document.getElementById("msg") 
            .innerHTML = '" ' + messages[s] + ' "'; 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles

Table of Contents

Generate a Random Birthday Wishes using JavaScript

HTML

CSS

JavaScript