centralizar botão
28/03/2020
0
olá galera, fiz um codigo basico em HTML, CSS E JAVASCRIPT para calcular o resto da divisão, porém não consegui centralizar o botão "calcular resto" como eu faço (obs sou novo em programação)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>
<p><button onclick="calc()">Calcular Resto</button></p>
<div id="res"></div>
</section>
<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");
if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);
var resto = valor % valor2;
var divisao = valor / valor2;
res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>
<p><button onclick="calc()">Calcular Resto</button></p>
<div id="res"></div>
</section>
<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");
if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);
var resto = valor % valor2;
var divisao = valor / valor2;
res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}
}
</script>
</body>
</html>
Matheus
Curtir tópico
+ 1
Responder
Posts
28/03/2020
João Rolim
olá galera, fiz um codigo basico em HTML, CSS E JAVASCRIPT para calcular o resto da divisão, porém não consegui centralizar o botão "calcular resto" como eu faço (obs sou novo em programação)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>
<p><button onclick="calc()">Calcular Resto</button></p>
<div id="res"></div>
</section>
<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");
if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);
var resto = valor % valor2;
var divisao = valor / valor2;
res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resto Da Divisão</title>
</head>
<body>
<style>
body {
background: brown;
}
header {
font: 25pt times;
text-align: center;
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 600px;
margin: auto;
}
button {
background: brown;
color: white;
border-radius: 15px;
width: 150px;
height: 30px;
}
div {
width: 400px;
height: 50px;
}
</style>
<header>
Calculadora online de resto da divisão
</header>
<section>
<p>Basta digitar os números e clicar em "Calcular Resto", Lembrando que não funciona para
numeros fracionarios
</p>
<p>Qual é o resto da divisão de
<input type="number" name="" id="txt"> por
<input type="number" name="" id="txt2">
</p>
<p><button onclick="calc()">Calcular Resto</button></p>
<div id="res"></div>
</section>
<script>
function calc() {
var txt = Number(document.querySelector("input#txt").value);
var txt2 = Number(document.querySelector("input#txt2").value);
var res = document.querySelector("div#res");
if (txt == 0 || txt2 == 0) {
alert("[ERRO] verifique os dados e tente novamente");
} else {
var valor = parseInt(document.querySelector("input#txt").value);
var valor2 = parseInt(document.querySelector("input#txt2").value);
var resto = valor % valor2;
var divisao = valor / valor2;
res.innerHTML = `O resto da divisão de $ por $ = $ <br>
O resultado da divisão de $ / $ = ${divisao.toFixed(2)}`
}
}
</script>
</body>
</html>
Fala, Matheus!
Existem várias formas de fazer... Vou exemplificar 1.
Você pode adicionar o seguinte código no seu "css":
section p:nth-child(3) {
text-align: center;
}
Só uma observação: No HTML, as tags "<style> </style>" devem ficar dentro do "<head> </head>".
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Espero ter ajudado! ;)
Responder
Clique aqui para fazer login e interagir na Comunidade :)