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

[Sugerencia] Desafío 1: hora de practicar (Lógica de programación: explorar funciones y listas)

Referente al curso Lógica de programación: explorar funciones y listas

por Greccy Sarai Verde Villegas
| 87.1k xp | 3 posts

============================
Archivo: 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="mostrarMensajeConsole()" class="button">Console</button>
        <button onclick="mostrarAlerta()" class="button">Alert</button>
        <button onclick="clickOnPrompt()" class="button">Prompt</button>
        <button onclick="suma()" class="button">Suma</button>
    </main>

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

============================
Archivo: app.js

// 2. Cambia el contenido de la etiqueta h1 con document.querySelector
let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';

// 3. Crea una función que muestre en la consola el mensaje
function mostrarMensajeConsole() {
    console.log('El botón fue clicado');
}

// 4. Crea una función que se ejecute cuando se haga clic en el botón "prompt"
function clickOnPrompt() {
    let nombreCiudad = prompt('¿Escribe el nombre de una ciudad de Brasil?');
    alert(`Estuve en ${nombreCiudad} y me acordé de ti`);
}

// 5. Crea una función que muestre una alerta en botón "Alerta"
function mostrarAlerta() {
    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 suma() {
    let numero1 = parseInt(prompt('Escribe el primer número:'));
    let numero2 = parseInt(prompt('Escribe el segundo número:'));
    let resultado = numero1 + numero2;
    alert(`El resultado de la suma es: ${resultado}`);
}
1 respuesta
por Brenda Souza
| 5793.4k xp | 21034 posts
Instructor

¡Hola Greccy, espero que estés bien!

Parece que estás trabajando en un proyecto interesante donde estás explorando funciones y listas en JavaScript. Tu código HTML y JavaScript está bien estructurado y parece que estás en el camino correcto. Aquí tienes un pequeño resumen de lo que hace cada parte de tu código:

  1. HTML: Has creado un archivo index.html que incluye un título y varios botones que llaman a diferentes funciones de JavaScript cuando se hace clic en ellos.

  2. JavaScript: En tu archivo app.js, has implementado varias funciones:

    • Cambias el contenido del elemento h1 para que muestre "Hora del Desafío".
    • mostrarMensajeConsole(): Muestra un mensaje en la consola cuando se hace clic en el botón correspondiente.
    • clickOnPrompt(): Pide al usuario que ingrese el nombre de una ciudad y luego muestra una alerta con un mensaje personalizado.
    • mostrarAlerta(): Muestra una alerta con el mensaje "Yo amo JS".
    • suma(): Pide al usuario dos números y muestra el resultado de su suma en una alerta.

Todo parece estar en orden, pero si encuentras algún problema o necesitas realizar alguna mejora, asegúrate de revisar los nombres de las funciones y los eventos onclick en los botones para asegurarte de que coincidan correctamente. También puedes verificar que todos los archivos (HTML, CSS, JS) estén correctamente vinculados.

Espero que esta explicación te haya sido útil. ¡Sigue así y disfruta aprendiendo programación!

Espero ter ajudado e bons estudos!