Desafio 1 | Lógica de programación: explorar funciones y listas | Alura Latam

/*Desafíos -Descarga otro proyecto haciendo clic en este enlace y ábrelo en Visual Studio Code. -Cambia el contenido de la etiqueta h1 con document.querySelector y asigna el siguiente texto: "Hora del Desafío". -Crea una función que muestre en la consola el mensaje "El botón fue clicado" siempre que se presione el botón "Console". -Crea una función que se ejecute cuando se haga clic en el botón "prompt", preguntando el nombre de una ciudad de Brasil. -Luego, muestra una alerta con el mensaje concatenando la respuesta con el texto: "Estuve en {ciudad} y me acordé de ti". -Crea una función que muestre una alerta con el mensaje: "Yo amo JS" siempre que se presione el botón "Alerta". -Al hacer clic en el botón "suma", pide 2 números y muestra el resultado de la suma en una alerta.*/ let titulo = document.querySelector("h1"); //objeto titulo.innerHTML = "Hora del Desafío"; function clickConsola(){ alert("El botón fue clicado"); } function clickPrompt(){ let pregunta= prompt("Nombre de la ciudad que estuvo en brasil"); alert(`Estuve en ${pregunta} y me acorde de ti`); } function clickAlerta(){ alert("Yo amo JS"); } function clickSuma(){ let valor1= parseInt(prompt("Deme un numero para valor 1")); let valor2=parseInt(prompt("Deme un numero para valor 2"));; let resultado=valor1+ valor2; alert(`La suma entre ${valor1} y ${valor2} es ${resultado} `); }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <header> <h1></h1> </header> <main class="container"> <button onclick="clickConsola();" class="button">Console</button> <button onclick="clickAlerta();" class="button">Alert</button> <button onclick="clickPrompt();" class="button">Prompt</button> <button onclick="clickSuma();" class="button">Suma</button> </main> <script src="app.js"></script> </body> </html>

¡Hola David!

Veamos tus dudas sobre el desafío 1 en JavaScript. Parece que estás trabajando con eventos de clic en botones y manipulación del DOM. ¡Muy bien!

Para resolver el primer punto, debes cambiar el contenido de la etiqueta <h1> utilizando document.querySelector. Puedes hacerlo de la siguiente manera:

let titulo = document.querySelector("h1"); // seleccionas la etiqueta h1
titulo.innerHTML = "Hora del Desafío"; // cambias su contenido por "Hora del Desafío"

En cuanto al segundo punto, debes crear una función que se ejecute cuando se haga clic en el botón "Console" y muestre el mensaje "El botón fue clicado" en la consola. Puedes hacerlo así:

function clickConsola(){
    console.log("El botón fue clicado");
}

Para el tercer punto, debes crear una función que se ejecute cuando se haga clic en el botón "prompt". Esta función debe preguntar el nombre de una ciudad de Brasil y luego mostrar una alerta con el mensaje concatenando la respuesta con el texto "Estuve en {ciudad} y me acordé de ti". Puedes hacerlo de la siguiente manera:

function clickPrompt(){
    let pregunta = prompt("Nombre de la ciudad en la que estuviste en Brasil");
    alert(`Estuve en ${pregunta} y me acordé de ti`);
}

En cuanto al cuarto punto, debes crear una función que se ejecute cuando se haga clic en el botón "Alerta" y muestre una alerta con el mensaje "Yo amo JS". Puedes hacerlo así:

function clickAlerta(){
    alert("Yo amo JS");
}

Por último, para el quinto punto, al hacer clic en el botón "suma", debes pedir dos números y mostrar el resultado de la suma en una alerta. Puedes hacerlo de la siguiente manera:

function clickSuma(){
    let valor1 = parseInt(prompt("Dame un número para el valor 1"));
    let valor2 = parseInt(prompt("Dame un número para el valor 2"));
    let resultado = valor1 + valor2;
    alert(`La suma entre ${valor1} y ${valor2} es ${resultado}`);
}

Recuerda que debes asignar estas funciones a los botones correspondientes en el HTML utilizando el atributo onclick. Por ejemplo:

<button onclick="clickConsola();" class="button">Console</button>
<button onclick="clickAlerta();" class="button">Alerta</button>
<button onclick="clickPrompt();" class="button">Prompt</button>
<button onclick="clickSuma();" class="button">Suma</button>

Espero que esto resuelva tus dudas y te ayude a completar el desafío. ¡Sigue practicando y no dudes en hacer más preguntas si lo necesitas! ¡Buena suerte!

Espero haber ayudado y buenos estudios!