Desafíos

app.js:
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';

let parrafo = document.querySelector('p');
parrafo.innerHTML ='Indica un numero del 1 al 10';

// Función para el botón "Console"
// Muestra un mensaje en la consola del navegador.
function mostrarMensajeEnConsola() {
console.log('El botón fue clicado');
}

// Función para el botón "Alerta"
// Muestra una alerta con el texto "Yo amo JS".
function mostrarAlerta() {
alert('Yo amo JS');
}

// Función para el botón "prompt"
// Pide el nombre de una ciudad y luego muestra una alerta con un mensaje personalizado.
function preguntarCiudad() {
let ciudad = prompt('Por favor, ingresa el nombre de una ciudad de Brasil:');
// Usamos un template string (con las comillas ``) para concatenar la variable.
alert(Estuve en ${ciudad} y me acordé de ti);
}

// Función para el botón "suma"
// Pide dos números, los convierte a enteros, los suma y muestra el resultado en una alerta.
function sumarNumeros() {
// prompt() siempre devuelve un string, por lo que usamos parseInt() para convertirlo en un número entero.
let num1 = parseInt(prompt('Ingresa el primer número:'));
let num2 = parseInt(prompt('Ingresa el segundo número:'));

// Validamos que la entrada sea un número, si es NaN (Not a Number) muestra un error.
if (isNaN(num1) || isNaN(num2)) {
alert('Por favor, ingresa solo números.');
return; // Detenemos la función si la entrada no es un número.
}

let resultado = num1 + num2;
alert(El resultado de la suma es: ${resultado});
}

// Ahora, asignamos las funciones a los eventos de clic de los botones correspondientes.
// Nota: En un proyecto real, necesitarías seleccionar los botones por su clase o ID.
// Asumiendo que tu HTML tiene las clases: .container__boton-console, .container__boton-alerta, etc.
let botonConsole = document.querySelector('.container__boton-console');
botonConsole.onclick = mostrarMensajeEnConsola;

let botonAlerta = document.querySelector('.container__boton-alerta');
botonAlerta.onclick = mostrarAlerta;

let botonPrompt = document.querySelector('.container__boton-prompt');
botonPrompt.onclick = preguntarCiudad;

let botonSuma = document.querySelector('.container__boton-suma');
botonSuma.onclick = sumarNumeros;

index. html:

<div class="container">
    <div class="container__contenido">
        <div class="container__informaciones">
            <div class="container__texto">
                <!-- Los desafíos de h1 y p se manejarán en app.js -->
                <h1></h1>
                <p class="texto__parrafo"></p>
            </div>
            <input type="number" min="1" max="10" class="container__input">
            <div class="chute container__botones">
                <button onclick="mostrarMensajeEnConsola();" class="container__boton">Intentar</button>
                <button class="container__boton" id="reiniciar" disabled>Nuevo juego</button>
            </div>

            <!-- Contenedor para los nuevos botones de los desafíos -->
            <div class="container__desafio-botones">
                <button onclick="mostrarMensajeEnConsola();" class="container__boton">Console</button>
                <button onclick="mostrarAlerta();" class="container__boton">Alerta</button>
                <button onclick="preguntarCiudad();" class="container__boton">Prompt</button>
                <button onclick="sumarNumeros();" class="container__boton">Suma</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Una persona mirando a la izquierda" class="container__imagen-persona" />
    </div>
</div>

<!-- El script con el código para los desafíos debe estar en app.js -->
<script src="app.js" defer></script>

style.css: