Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

[Proyecto] 01. Interactuando con html: Desafio

01. Interactuando con html: Desafio

2. Cambia el contenido de la etiqueta h1 con document.querySelector y asigna el siguiente texto: "Hora del Desafío".

Para solucionar esto agregue un id al selector h1

<header>
  <h1 id="asignarTexto"></h1>
</header>

y con innerText asigno el texto

document.querySelector("#asignarTexto").innerText = "Hora del Desafío";

3. Crea una función que muestre en la consola el mensaje "El botón fue clicado" siempre que se presione el botón "Console".

En app.js creo la funcion

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

y en el html hago referencia a la funcion

<button onclick="mensajeConsola();" class="button mensaje">Console</button>

4. 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".

Creo la funcion, valido el texto de entrada y si es una cadena vacia muestro mensaje de alerta y finalizo la ejecucion

function preguntarCiudad() {
  let ciudad = prompt("Ingresa el nombre de una ciudad de Brasil");
  if (ciudad === "") {
    alert("Upss, no ingresaste ciudad");
    return;
  }
  alert(`Estuve en ${ciudad} y me acordé de ti`);
}

En el html hago referencia a la funcion preguntarCiudad

<button onclick="preguntarCiudad();" class="button">Alert</button>

5. Crea una función que muestre una alerta con el mensaje: "Yo amo JS" siempre que se presione el botón "Alerta".

creo la funcion en app.js y hago referencia de ella en el html

function mostrarMensaje() {
  alert("Yo amo JS");
}
<button onclick="mostrarMensaje();" class="button">Prompt</button>

6. Al hacer clic en el botón "suma", pide 2 números y muestra el resultado de la suma en una alerta.

En el app.js creo la funcion suma y valido si es un numero valido, si no lo es muestro un alerta de error y funalizo la ejecucion

function suma() {
  let num1 = prompt("Ingrese el primer número");
  let num2 = prompt("Ingrese el segundo número");

  if (isNaN(num1) || isNaN(num2)) {
    alert("Ingrese un número válido");
    return;
  }

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

y en el html hago referencia de la funcion creada al boton

<button onclick="suma();" class="button">Suma</button>