Générateur d'idées HTML

2853 Huzaifa

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 June 2024

Formulaire de connexion HTML simple et gratuit

23 August 2025

Modèle HTML CSS de formulaire de connexion et d'inscription

11 September 2025

Jeu de tir HTML5 Canvas avec classement

HTML

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random HTML Ideas Generator App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            color: #333;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.container {
            max-width: 500px;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

h1 {
            color: #007bff;
        }

p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

.btn-generate {
            background-color: #28a745;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.btn-generate:hover {
            background-color: #218838;
        }

.idea {
            font-size: 1.5rem;
            margin-top: 40px;
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }

.animated {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Random HTML Ideas Generator App</h1>
        <p>Click the button below to generate a random HTML idea!</p>
        <button class="btn-generate" onclick="generateIdea()">Generate Idea</button>
        <div class="idea" id="idea"></div>
    </div>

function generateIdea() {
            const randomIndex = Math.floor(Math.random() * ideas.length);
            document.getElementById('idea').innerText = ideas[randomIndex];
            document.getElementById('idea').classList.add('animated');
            setTimeout(() => {
                document.getElementById('idea').classList.remove('animated');
            }, 2000);
        }
    </script>

Recommandé

Formulaire de connexion HTML simple et gratuit

Modèle HTML CSS de formulaire de connexion et d'inscription

Jeu de tir HTML5 Canvas avec classement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS