Home >Web Front-end >JS Tutorial >Right angle pattern printing using html css js

Right angle pattern printing using html css js

Patricia ArquetteOriginal: 2024-10-09 20:34:28864browse

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>

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!

css html using JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Combining Repository and Event-Driven PatternsNext article：Combining Repository and Event-Driven Patterns

See more

Right angle pattern printing using html css js

CODE IS:

Related articles