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.
https://www.youtube.com/watch?v=pAmQC5_pfAM
Eai, curtiu?
Link no Github