Jorge Leonardo Céspedes Tapia
Árbol de Navidad

Árbol de Navidad

Jorge Leonardo Cespedes Tapia's photo
Jorge Leonardo Cespedes Tapia
·

2 min read

La creación de un árbol de Navidad con JavaScript puro usando asteriscos y la posibilidad de añadir adornos es un proyecto divertido para la temporada festiva. Con la combinación de JavaScript y HTML, puedes crear una representación visualmente atractiva de un árbol de Navidad en tu página web. ¡Felices fiestas!

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Árbol de Navidad</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }

        .container>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }

        .container-arbol>label,
        input,
        button {
            margin: 10px;
        }

        input {
            padding: 5px;
            /* background-color: #4942E4; */
            border: 1px solid #cecece;
            border-radius: 5px;
        }

        button {
            padding: 5px;
            background-color: #4942E4;
            border: 1px solid #4942E4;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }

        .arbol {
            color: #508D69;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Dibuja tu árbol de Navidad</h1>
        <div class="container-arbol">
            <label for="altura">Escoge la altura de tu árbol:</label>
            <input type="number" id="altura" min="1" value="5">
            <button onclick="dibujarArbolConAdornos()">Dibujar Árbol</button>
        </div>
        <pre class="arbol" id="arbol"></pre>
    </div>

    <script>

        function dibujarArbolConAdornos() {
            let altura = document.getElementById('altura').value;
            let arbol = '';
            for (let i = 1; i <= altura; i++) {
                let espacio = ' '.repeat(altura - i);
                let asteriscos = '*'.repeat(2 * i - 1);
                // Agregar adornos a los niveles pares del árbol
                if (i % 2 === 0) {
                    asteriscos = asteriscos.replace(/\*/g, '#');
                    asteriscos = asteriscos.replace(/#/g, i % 4 === 0 ? 'o' : '@');
                }
                arbol += espacio + asteriscos + espacio + '\n';
            }
            document.getElementById('arbol').textContent = arbol;
        }

    </script>
</body>

</html>
TreeJavaScriptjsspanish