Right angle pattern printing using html css js-JS Tutorial-php.cn

Right angle pattern printing using html css js

Patricia Arquette

Release： 2024-10-09 20:34:28

Original

789 people have browsed it

Right angle pattern printing using html css js

CODE IS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Right-Angled Star Triangle</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #1c1c1c;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 20px;
        }

        .container {
            text-align: center;
            background-color: #333;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        h1 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #f0f0f0;
        }

        label {
            margin-bottom: 10px;
            display: block;
            font-size: 18px;
        }

        #rows {
            padding: 10px;
            border-radius: 5px;
            border: none;
            font-size: 18px;
            width: 60%;
            background-color: #444;
            color: #fff;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            background: linear-gradient(45deg, #ff416c, #ff4b2b);
            color: white;
            box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
            transition: box-shadow 0.3s ease;
        }

        button:hover {
            box-shadow: 0 0 30px rgba(255, 65, 108, 0.8);
        }

        #pattern {
            margin-top: 20px;
            text-align: right; /* Right-align the triangle */
        }

        .star {
            display: inline-block;
            font-size: 40px; /* Bigger stars */
            margin: 2px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Right-Angled Star Triangle</h1>
        <label for="rows">Enter number of rows:</label>
        <input type="number" id="rows" placeholder="Number of rows">
        <button onclick="generatePattern()">Create Pattern</button>
        <button onclick="clearPattern()">Clear Pattern</button>
        <div id="pattern"></div>
    </div>

    <script>
        // Function to generate a random color in hexadecimal
        function getRandomColor() {
            let letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        // Function to create the triangle pattern
        function generatePattern() {
            let numRows = document.getElementById('rows').value;
            let patternDiv = document.getElementById('pattern');
            patternDiv.innerHTML = '';  // Clear previous pattern

            if (numRows <= 0) {
                alert("Please enter a valid number of rows!");
                return;
            }

            // Loop through rows
            for (let i = 1; i <= numRows; i++) {
                let row = document.createElement('div');

                // Loop through each star in the row
                for (let j = 1; j <= i; j++) {
                    let star = document.createElement('span');
                    star.textContent = '❤️';
                    star.classList.add('star');
                    star.style.color = getRandomColor();  // Set random color to the star
                    row.appendChild(star);
                }

                // Append the row to the pattern div
                patternDiv.appendChild(row);
            }
        }

        // Function to clear the pattern
        function clearPattern() {
            document.getElementById('pattern').innerHTML = '';
            document.getElementById('rows').value = '';
        }
    </script>
</body>
</html>

Copy after login

The above is the detailed content of Right angle pattern printing using html css js. For more information, please follow other related articles on the PHP Chinese website!