Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] Desafío 5: Hora de practicar Interactuando con HTML

Referente al curso Lógica de programación: explorar funciones y listas, en el capítulo Interactuando con HTML y actividad Desafío: hora de practicar

por Gabriela Fernanda Oviedo
| 26.7k xp | 9 posts

Hola! Les comparto la práctica del desafío "Interactuando con HTML": 2-

//Punto 2: Cambiar la etiqueta h1 con querySelector
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';

3-

//Punto3: Crear función para el botón Console que muestre un mensaje
function mensajeDeEstado () {
    alert ('El botón fue clicado');
}

4-

//Punto 4: Crear una función para el botón Prompt que muestre un mensaje con una ciudad ingresada por el usuario
function ciudadBrasil () {
    let ciudadElegida = prompt ('Elige una ciudad de Brasil: ');
    alert (`Estuve en ${ciudadElegida} y me acordé de ti.`);
}

5-

//Punto 5: Crear una función para el botón Alert que muestre un mensaje
function mensajeAlerta () {
    alert ('¡Yo amo JS!');
}

6-

//Punto 6: Crear una función para el botón Suma que muestre el resultado de la suma de 2 números ingresados por el usuario
function mensajeSuma () {
    let numero1 = parseInt (prompt ('Ingresa un número: '));
    let numero2 = parseInt (prompt ('Ingresa otro número más: '));
    let suma = numero1 + numero2;
    alert (`El resultado de sumar ${numero1} y ${numero2} es ${suma}`);
}

Index.html

<!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="mensajeDeEstado ();" class="button">Console</button>
        <button onclick="mensajeAlerta ();" class="button">Alert</button>
        <button onclick="ciudadBrasil ();" class="button">Prompt</button>
        <button onclick="mensajeSuma ();" class="button">Suma</button>
    </main>

      <script src="app.js"></script>
</body>
</html>

¡Saludos a todos!

1 respuesta
por Tereso Antonio Herrera Punay
| 31.7k xp | 30 posts

Hola yo lo diseñe de esta manera cambio un poco en algunas.

/* 1. Descarga otro proyecto haciendo clic en este enlace y ábrelo en Visual Studio Code.*/

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

let Titulo = document.querySelector('h1');
Titulo.innerHTML = ('Hora del desafio');

/* 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".*/

function FbtmConcole(){
    console.log('El boton ha sido clicado');
}

/* 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".*/

function FbtmPrompt(){
    let ciudad = prompt('Podrias ingresar en nombre de una ciudad de Guatemala:');
    alert(`Estuve en ${ciudad} y me recorde de ti`);

}

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

function FbtmAlert(){
    alert('YO AMO JS');
}

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

function FbtmSuma(){
    let numero1 = parseInt(prompt ('Ingresa un numero: '));
    let numero2 = parseInt(prompt ('Ingresa un segundo numero: '));
    let Resultado = alert(`La suma de los dos numeros ingresados es: ${numero1+numero2}`);
}

HTML

<!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="FbtmConcole();"| class="button">Console</button>
        <button onclick="FbtmPrompt();"| class="button">Prompt</button>
        <button onclick="FbtmAlert();" class="button">Alert</button>
        <button onclick="FbtmSuma();" class="button">Suma</button>
    </main>
      <script src="app.js"></script>
</body>
</html>