Descrição do exercício
[DESAFIO] Desenvolva um programa que leia o primeiro termo e a razão de uma
PA (Progressão Aritmética), mostrando na tela os 10 primeiros elementos da PA e
a soma entre todos os valores da sequência.
Explicação de como funciona
Para você visualizar o exercício funcionando no seu navegador, peço que siga os seguintes passos:
1 – Crie uma pasta no Visual Studio Code, você pode chamá-la de “exercicio-numero-aqui”.
2 – Crie 3 arquivos dentro dessa pasta, um vai ser para o código HTML, CSS e outro para JavaScript. Os nomes que dei para os meus arquivos foram:
- texto.html
- estilo.css
- codigo.js
3 – Depois de criar os 3 arquivos, basta copiar os códigos abaixo para ver funcionando no seu navegador.
Estrutura da página em HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercício de logica de programação</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<section class="design-section">
<h1>PA (Progressão Aritmética)</h1>
<p>Digite o primeiro número da PA: <input type="number" name="termo" id="termo"></p>
<p>Razão da PA: <input type="number" name="razao" id="razao"></p>
<button onclick="contar()" class="btnContar">Mostrar a contagem</button>
<button onclick="recomecar()" class="btnRecomecar">Recomeçar</button>
<div class="resposta"></div>
</section>
<script src="./codigo.js"></script>
</body>
</html>Estilização da página em CSS
* {
box-sizing: border-box;
}
body {
background: #F8F9FA;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.design-section {
width: 50%;
border: 1px solid #d2d2d2;
border-radius: 10px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input[type="button"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 10px;
cursor: pointer;
}
input[type="number"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 5px;
}
input[type="text"] {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 5px;
}
button {
background: #F8F9FA;
border-radius: 50px;
border: 1px solid;
padding: 10px;
cursor: pointer;
margin: 10px;
}
.btnRecomecar {
display: none;
}
Resolução do exercício em JavaScript
const inputTermo = document.getElementById('termo')
const inputRazao = document.getElementById('razao')
// Cria um atalho para adicionar valores usando a tecla "ENTER"
inputRazao.addEventListener('keydown', function (event) {
if (event.key === 'Enter') {
contar()
}
})
const btnContar = document.querySelector('button.btnContar')
const btnRecomecar = document.querySelector('button.btnRecomecar')
const resposta = document.querySelector('div.resposta')
function contar() {
let primeiroTermo = Number(inputTermo.value)
const razaoPA = Number(inputRazao.value)
if (isNaN(primeiroTermo) || isNaN(razaoPA)) {
alert('Insira o valor válido.')
inputTermo.value = ''
inputRazao.value = ''
inputTermo.focus()
return
}
let somaValoresPA = 0
for (let contador = 0; contador < 10; contador++) {
// Se o contador estiver no último indíce que é [9] a vírgula não é adicionada
if (contador === 9) {
resposta.innerHTML += `${primeiroTermo}...`
} else {
resposta.innerHTML += `${primeiroTermo} , `
}
/* Fórmula da PA para descobrir os próximos números:
termo1 + r = termo2
termo2 + r = termo3
termo3 + r = termo4
"r" significa razão, ou seja, a quantidade de passos
*/
somaValoresPA += primeiroTermo
primeiroTermo += razaoPA
}
resposta.innerHTML += `<p>Soma dos valores: ${somaValoresPA}<p>`
inputTermo.disabled = true
inputRazao.disabled = true
btnContar.style.display = 'none'
btnRecomecar.style.display = 'inline-block'
}
function recomecar() {
inputTermo.disabled = false
inputRazao.disabled = false
inputTermo.value = ''
inputRazao.value = ''
inputTermo.focus()
btnContar.style.display = 'inline-block'
btnRecomecar.style.display = 'none'
resposta.innerHTML = ''
}Participe do Desafio de JavaScript
Este exercício faz parte do Desafio de JavaScript, um desafio composto por 100 exercícios para praticar lógica de programação com JavaScript.
Além disso, você poderá participar da nossa comunidade, tirando suas dúvidas, fazendo networking e aprendendo muito!
Caso tenha interesse em participar, basta clicar aqui neste link para saber mais detalhes!
