eloguim
commented
2 weeks ago HTML -
<!DOCTYPE html>
Vamos Contar
Início:
Fim:
Passo:
CSS -
html { height: 100%; width: 100%; }
header { text-align: center; font-size: 20px; font-weight: bold; }
body { background-color: #ffab01; }
section { background-color: whitesmoke; width: 50%; / height: 300px; / padding: 20px; margin: auto; border-radius: 15px; / responsavel por expandir a section para caber todos os dados do resultado: / overflow-y: auto; max-height: 100%; height: auto; }
p { font-size: 18pt; padding-left: 5px; }
.cxtexto { display: block; margin-top: -27px; margin-left: 70px; width: 80%; height: 20px; font-size: 10pt; }
btncontar {
color: #ffffff; background-color: #474747; font-size: 10pt; font-weight: bold; padding: 5px; border-radius: 15px; width: 20%; }
res{
font-size: 15pt; }
footer { text-align: center; font-size: 18px; }
JavaScript -
function contar() {
/ declarando as variáveis / var inicio = document.getElementById('txti'); var fim = document.getElementById('txtf'); var passo = document.getElementById('txtp'); var res = document.getElementById('res');
/ formulários: validando se dados estão inseridos corretamente. /
if (inicio.value.length == 0 || fim.value.lenght == 0 || passo.value.length == 0) {
window.alert(Dados incompletos!);
} else { res.innerHTML = 'Contando: ';
// transformando os dados em númericos.
var i = Number(inicio.value)
var f = Number(fim.value)
var p = Number(passo.value)
// validando se o passo é maior que 0, pois da erro caso seja menor que 0.
if(p <= 0) {
window.alert ('Passo inválido! Considerando o passo 1:')
p = 1
}
// contagem crescente:
if(i < f) { // se o inicio for menor que o fim, ex - de 1 a 100.
// 1. variável (c = i); 2. condição (c <= f); 3. incremento (c+= p).
for (var c = i; c <= f; c += p) {
res.innerHTML += ` ${c} \u{1F449} `;
}
// contagem decrescente:
} else { // se o inicio for maior que o fim, ex - de 100 a 1.
// 1. variável (c = i); 2. condição (c >= f); 3. decremento (c-= p).
for (var c = i; c >= f; c -= p) {
res.innerHTML += ` ${c} \u{1F449} `;
}
}
res.innerHTML += ' \u{1F3F3} Fim!'; // emoji de bandeira branca.
res.style.height = 'auto'; /* ajustando a altura da section, para caber todo volume de dados da res */} }
// '\u{1F3F3}' // bandeira branca // '\u{1F449}' // dedo emoji apontado -> // '\u{23F5}' // seta para direita >
Projeto em JS onde o usuário coloca um numero para início, um para final e um para o passo. Ex - de 10 a 100 pulando 2 casas.