Criando um sorteador com JavaScript

Criando um sorteador com JavaScript

O Primeiro passo é criar uma pasta onde você tem preferencia em sua máquina, no meu caso eu crio todos os meu projetos dentro de uma pasta www -> ( user/www ), eu darei o nome da aplicação de contador-js.

Dentro da pasta criaremos 3 arquivos:

  • index.html
  • script.js
  • styles.css

No arquivo index.html nós criaremos uma estrutura básica:

Adicionamos a importação do css dentro da tag <head>

<link rel="stylesheet" href="./styles.css" />

Dentro do <body> adicionaremos o seguinte trecho de código

<div class="container">
  <h2 class="result">0</h2>
  <button onclick="ramdom()">Sortear!</button>
</div>
  
<script src="./script.js"></script>

No <button> estamos utilizando uma função (random()) que logo iremos criar dentro do arquivo script.js

Agora bora para a lógica!

No arquivo script.js iremos adicionar o seguinte trecho de código:

function ramdom() {
  const value = Math.floor(Math.random() * 200);
  document.querySelector('.result').innerHTML = value
}

O que essa função faz:

  • Math.random -> gera um número aleatório, estamos passando * 200 para que ele gere aleatoriamente até 200;
  • Math.floor -> retorna o menor número inteiro que o (Math.random) gerou, evitando de renderizar um número quebrado;
  • document.querySelector('.result') -> está sendo utilizado para selecionar o <h1 class="result"> que criamos na nossa index;
  • innerHTML -> define ou retorna o conteúdo HTML (HTML interno) de um elemento, estamos usando para injetar o valor (value) que é a nossa constantante dentro do <h1> que selecionamos;

No arquivo styles.css, adicionaremos um estilo para nossa página:

body {
  font: 16px sans-serif;
  color: #fff;
  background: #1F2729;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  flex-direction: column;
}
h2 {
  font-size: 5rem;
}

button {
  cursor: pointer;
  border: 0;
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  background: #04D361;
}

Esse é o resultado! cada vez que clicamos no button ele executa nossa função random e gera um novo número aleatório.

Eai, curtiu?

Link no Github