[Proyecto] ALTERANDO EL DESAFIO | Lógica de programación: explorar funciones y listas

HTML

<!DOCTYPE html>
<html lang="en-es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>EJERCICIO</title>
</head>
<body>
    <header>
        <h1></h1>
    </header>
    <main class="container">
        <button onclick="clickEnBotonConsole()" class="button">Console</button>
        <button onclick="mostarAlerta()" class="button">País</button>
        <button onclick="mensaje()" class="button">"que lenguaje te gusta"</button>
        <button onclick="sumaDosNumeros()" class="button">Suma</button>
    </main>

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

CSS

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

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

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

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

.button:hover {
  background-color: #29b9b9;
}

let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora del Desafío';

function clickEnBotonConsole() {
    console.log = alert('El botón fue clicado');
}

function mostarAlerta(){
    let ciudad = prompt("Por favor, ingresa el nombre de una ciudad de tu país:");
   alert("Estuve en " + ciudad + " y me acordé de ti.");
} 

function mensaje(){
    alert("AMO JS" + " -JavaScript");
} 

function sumaDosNumeros(){
    let primerNumero = parseInt(prompt('Digite el primer numero'));
    let segunNumero = parseInt(prompt('Digite el segundo numero'));
    let resultado = primerNumero + segunNumero;
    alert(`${primerNumero} + ${segunNumero} = ${resultado}`)
}