एचटीएमएल आइडिया जेनरेटर

3251 Huzaifa

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

16 July 2023

एचटीएमएल सोशल आइकन्स

23 August 2024

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

16 December 2025

ड्रॉपडाउन और स्टाइलिंग के साथ एचटीएमएल नेविगेशन बार

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>

अनुशंसित

एचटीएमएल सोशल आइकन्स

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

ड्रॉपडाउन और स्टाइलिंग के साथ एचटीएमएल नेविगेशन बार

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS