Générer des souhaits d’anniversaire aléatoires en utilisant JavaScript

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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut