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

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="clickBotonConsole()" class="button">Console</button>
        <button onclick="clickBotonAlert()" class="button">Alert</button>
        <button onclick="clickBotonPrompt()" class="button">Prompt</button>
        <button onclick="clicBotonSuma()" class="button">Suma</button>
    </main>

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

//DESAFIOS - INTERACTUADO CON HTML - 29/06/2024

//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';

//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 clickBotonConsole(){
    console.log('El botón fue clicado...');
}

//Crea una función que muestre una alerta con el mensaje: "Yo amo JS" siempre que se presione el botón "Alerta".
function clickBotonAlert(){
    alert("Yo amo JS");
}

//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 clickBotonPrompt(){
    let ciudadBrasil = prompt("Ingresa el nombre de una ciudad de brasil:");
    alert(`Estuve en ${ciudadBrasil} y me acordé de ti.`);
}

//Al hacer clic en el botón "suma", pide 2 números y muestra el resultado de la suma en una alerta.
function clicBotonSuma(){
    let num1 = parseInt(prompt("Ingresa el primer número:"));
    let num2 = parseInt(prompt("Ingresa el segundo número:"));
    alert(`El resultado de la suma es: ${num1+num2}.`);
}

CSS

header {
  text-align: center;
  font-size: 30px;
  color: #279EFF;
}

main, html {
  margin: 0;
  padding: 0;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0C356A;
}

.container {
  text-align: center;
  color: #279EFF;
}

.button {
  padding: 10px 20px;
  margin: 10px;
  font-size: 24px;
  border: none;
  background-color: #3498db;
  cursor: pointer;
  border-radius: 5px;
}

.button:hover {
  background-color: #2980b9;
}