Desafío: hora de practicar

En una carrera de desarrollo de software, la práctica constante de la lógica de programación desempeña un papel fundamental en la construcción de bases sólidas.

La lógica de programación no solo te permite la creación de algoritmos eficientes y soluciones elegantes, sino que también desarrolla la capacidad de pensar de manera estructurada y analítica. Esta habilidad es esencial para enfrentar desafíos complejos y convertir problemas abstractos en implementaciones tangibles.

Con esto en mente, hemos creado una lista de actividades (no obligatorias) centradas en la práctica para mejorar aún más tu experiencia de aprendizaje. ¡Vamos a practicar!

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.

-- AQUI INGRESAMOS LAS RESPUESTAS A LAS PREGUNTAS RECUERDA HACER USO DE LOS COMENTARIOS PARA MEMORIZAR MEJOR

let titulo = document.querySelector('h1'); //estamos sseleccionado la etiqueta con js para agregarle mas dinamismo
//ahora a esa variable que hemos capturado con document le damos un contendio
titulo.innerHTML = "Hora del Desafio";

//ahora usamos la logica para darle vida al html
function cliqueado(){
alert("el boton fue clickeado");
}
//ahora haciendo uso de la funciona vamos a preguntar el nkmbre de la ciudad y luego eso mismo concatenamos e imprimims con un alert asi
function pregunta(){
let pais = prompt("de donde eres? ");
alert(me acorde de ti eres de ${pais} cierto?);
//recuerda que para la concatenacion se usa este tipo de comillas pero para hacia delante ma no para atras
}

//ahora si le damos click que nos mande un alert
function alerta(){
alert("yo amo js")
}

//ahora creamos una funcion que nos pida usa suma
function suma(){
//aqui vamos a pedir al usuari una suma paso a paso si?
//recurda que en las buenas practicas es correcto hacer uso del parseint para cuando preguntas al usaurio
//aqui hemos hecho el uso del parse int para convertir estos strings en numeros enteros
let n1 = parseInt(prompt("ingrese el primer numero"));
let n2 = parseInt(prompt("ingrese el segundo numero"));
let resultado = n1 + n2;
alert(el resultado de la suma es: ${resultado} );
}

¡Hola Jean!

¡Qué emocionante es ver tu entusiasmo por practicar la lógica de programación! Veo que ya has comenzado a trabajar en los desafíos y has hecho un gran progreso. Aquí tienes algunas sugerencias y ejemplos para ayudarte a completar cada uno de los desafíos que mencionaste:

Cambiar el contenido de la etiqueta h1: Ya tienes el código correcto para cambiar el contenido de la etiqueta h1. Usaste document.querySelector y innerHTML de manera adecuada.
```
let titulo = document.querySelector('h1');
titulo.innerHTML = "Hora del Desafío";
```

Función para el botón "Console": Asegúrate de vincular la función al evento de clic del botón. Aquí tienes un ejemplo:

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

let botonConsole = document.querySelector('#botonConsole'); // Asegúrate de que el selector coincide con el botón en tu HTML
botonConsole.addEventListener('click', cliqueado);

Función para el botón "prompt": Tu función pregunta está bien, solo asegúrate de que el evento de clic esté correctamente vinculado.

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

let botonPrompt = document.querySelector('#botonPrompt');
botonPrompt.addEventListener('click', pregunta);

Función para el botón "Alerta": Tu función alerta también está bien. Aquí tienes cómo vincularla:

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

let botonAlerta = document.querySelector('#botonAlerta');
botonAlerta.addEventListener('click', alerta);

Función para el botón "suma": Tu función suma está correctamente configurada. Solo asegúrate de que el evento de clic esté vinculado.

function suma() {
    let n1 = parseInt(prompt("Ingrese el primer número"));
    let n2 = parseInt(prompt("Ingrese el segundo número"));
    let resultado = n1 + n2;
    alert(`El resultado de la suma es: ${resultado}`);
}

let botonSuma = document.querySelector('#botonSuma');
botonSuma.addEventListener('click', suma);

Asegúrate de que los selectores de los botones (#botonConsole, #botonPrompt, #botonAlerta, #botonSuma) coincidan con los IDs de los botones en tu archivo HTML. Espero que estos ejemplos te sean útiles para completar tus desafíos. ¡Sigue practicando!

Espero haber ayudado y buenos estudios!