Entrar Ainda não tem acesso?
1
resposta

[Projeto] DESAFIO 1 - HORA DA PRATICA CONCLUIDO

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Interagindo com HTML e atividade Desafio: hora da prática

por JOILSON RAMOS DA ROCHA
| 33.2k xp | 7 posts

Segue abaixo minha resolução do exercício proposto:

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="verificarConsole()" class="button">Console</button>
<button onclick="verificarAlert()" class="button">Alert</button>
<button onclick="verificarPrompt()" class="button">Prompt</button>
<button onclick="verificarSoma()" class="button">Soma</button>
</main>
<script src="app.js"></script>
</body>
</html>

Style.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;
  }

App.js

let titulo = document.querySelector('h1');
titulo.innerHTML = 'Hora do Desafio';

function verificarConsole(){
    console.log("O botão foi clicado");
}

function verificarAlert(){
    alert("Eu amo JS");
}

function verificarPrompt(){
    let cidade = prompt("Digite a cidade: ");
    alert("Estive em "+ cidade +" e lembrei de você!");
}

function verificarSoma(){
    let numero1 = Number(prompt("Digite o primeiro numero inteiro: "));
    let numero2 = Number(prompt("Digite o segundo numero inteiro: "));
    let soma = numero1 + numero2;
    alert("A soma dos dois números digitados["+ numero1 + "/" + numero2 +"]"+" e de: "+ soma + "!"); 
}

Só fiquei na dúvida qual a diferença entre o parse int e o number. Grato.

1 resposta
por Sarah Ocy Sousa Medeiros
| 1837.4k xp | 3782 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Joilson! Tudo bem?

Parabéns pelo código, ficou ótimo! Sobre a diferença entre parseInt e Number é um ponto que pode impactar o comportamento do nosso código e que podemos tentar compreender da seguinte forma:

  1. Number:

    • Converte o valor para um número, seja ele um inteiro ou um número de ponto flutuante.
    • Exemplo:
      let num1 = Number("10"); // 10
let num2 = Number("10.5"); // 10.5
    • Se a string não puder ser convertida para um número, retorna NaN (Not-a-Number).

  2. parseInt:

    • Converte a string para um número inteiro.
    • Aceita um segundo parâmetro que define a base (radix) da conversão (por exemplo, base 10 para decimal, base 16 para hexadecimal).
    • Exemplo:
      let num1 = parseInt("10"); // 10
let num2 = parseInt("10.5"); // 10
let num3 = parseInt("10", 16); // 16 (interpreta "10" como hexadecimal)
    • Se a string começar com um número, parseInt vai extrair esse número até encontrar um caractere não numérico.
      let num4 = parseInt("10abc"); // 10
let num5 = parseInt("abc10"); // NaN

No nosso caso, como estamos lidando com números inteiros, tanto Number quanto parseInt podem funcionar, mas parseInt é mais adequado quando queremos garantir que estamos lidando apenas com inteiros.

Espero ter ajudado!

Um forte abraço e bons estudos!