Mi solucion - interactuando con HTML | Lógica de programación: explorar funciones y listas | Alura Latam

Hola denuevo! Les comparto mi solucion a los desafios planteados en la seccion 01. Interactuando con HTML

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>Challenge</title>
  </head>
  <body>
    <header>
      <h1></h1>
    </header>

    <main class="container">
      <button onclick="" class="btn console-btn">Console</button>
      <button onclick="" class="btn alert-btn">Alert</button>
      <button onclick="" class="btn prompt-btn">Prompt</button>
      <button onclick="" class="btn sum-btn">Sum</button>
    </main>

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

JavaScript

"use strict";

// 1. Change h1's text content
const h1EL = document.querySelector(`h1`);
h1EL.textContent = `Challenge time`;

// 2. Console btn
const consoleBtn = document.querySelector(`.console-btn`);
consoleBtn.addEventListener(`click`, function () {
  console.log(`The button was clicked`);
});

// 2. Prompt btn
const promptBtn = document.querySelector(`.prompt-btn`);
promptBtn.addEventListener(`click`, () => {
  const brazilCountry = prompt(`Type a Brazil's city: `);
  alert(`I was in ${brazilCountry} and I remembered you`);
});

// 3. Alert btn
const alertBtn = document.querySelector(`.alert-btn`);
alertBtn.addEventListener(`click`, function () {
  alert(`I love JS`);
});

// 4. Sum btn
const sumBtn = document.querySelector(`.sum-btn`);
sumBtn.addEventListener(`click`, () => {
  const n1 = +prompt(`Type the first number: `);
  const n2 = +prompt(`Type the second number: `);

  alert(`The sum was ${n1 + n2}`);
});