¿Quieres calcular el porcentaje? En caso afirmativo, puede hacer una calculadora de porcentaje simple usando HTML, CSS y JavaScript. En este artículo, debe ingresar las calificaciones obtenidas en el primer campo de entrada y las calificaciones totales en el segundo campo de entrada para calcular el porcentaje. Después de ingresar valores y hacer clic en el botón Calcular, se puede obtener un porcentaje. Este proyecto muy útil para calcular notas, descuentos, etc. La calculadora de porcentajes es útil para estudiantes, comerciantes y para resolver problemas matemáticos básicos relacionados con porcentajes.
Estructura de archivos
- índice.html
- estilo.css
- guión.js
Requisitos previos: se necesitan conocimientos básicos de HTML, CSS y JavaScript. El proyecto contiene archivos HTML, CSS y JavaScript. El archivo HTML agrega estructura, seguido del estilo usando CSS y JavaScript agrega funcionalidad y para validar ciertas partes del proyecto.
El diseño HTML se crea utilizando etiquetas div, atributos de identificación, clases, formularios y botones para enviar el formulario. Define la estructura de la página web.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Percentage Calculator</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>Percentage Calculator</h1> <div> <!-- Defines a field for entering a number--> <h2> What is <input type="number" id="percent" />% of <input type="number" id="num" />? </h2> <!-- onclick event is to call the function when user click on the button--> <button onclick="percentage_1()">Calculate</button><br> <!-- Read-only input field to display output and cannot be modified --> <input type="text" id="value1" readonly /> </div> <div> <!-- Defines a field for entering a number --> <h2><input type="number" id="num1" /> is what Percent of <input type="number" id="num2" />? </h2> <!-- onclick event is to call the function when user click on the button --> <button onclick="percentage_2()">Calculate</button></br> <!-- Read-only input field to display output and cannot be modified --> <input type="text" id="value2" readonly /> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
Al usar las propiedades CSS, decoraremos la página web usando las propiedades de color, ancho, alto y posición que se proporcionan según los requisitos del proyecto. CSS diseña la interfaz de la calculadora.
style.css
/* A margin and padding are provided 0
box-sizing border box is used to include
padding and border in the total width
and height of the element, and font-family
can be specified by the user */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
/* The user display allows you to specify the
background colour and height. The
display:flex property, which is aligned at the
centre, is used to fill available free space
or to shrink them to prevent overflow. */
body {
background-color: #f7f7f7;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
/* font-weight Specifies weight of glyphs
in the font, their degree of blackness or
stroke */
h1 {
font-weight: 900;
margin-bottom: 12px;
}
div {
width: 480px;
background-color: #fff;
margin: 12px 0;
padding: 24px;
text-align: center;
box-shadow: 2px 2px 8px 2px #aaa;
}
input[type=number] {
width: 84px;
font-size: 18px;
padding: 8px;
margin: 0px 8px 8px 8px;
}
/* The text-transform:uppercase property
causes characters to be raised to uppercase.
The button's font-weight, font-size, and
cursor type can be customised by the user. */
button {
text-transform: uppercase;
font-weight: 900;
font-size: 20px;
margin: 12px 0;
padding: 8px;
cursor: pointer;
letter-spacing: 1px;
}
/* The font-weight, font-size, background-color,
and border can all be customized by the user.
The border-radius property allows you to give
an element rounded corners.*/
input[type=text] {
font-size: 22px;
padding: 8px 0;
font-weight: 900;
text-align: center;
background-color: #f7f7f7;
border: 2px solid #ccc;
border-radius: 6px;
}
Para agregar funcionalidad a una página web, se utiliza código JavaScript. En este caso, se declaran dos funciones, porcentaje 1() y porcentaje 2(), y se pasan al botón a través del evento onclick. Como resultado, cuando se presiona el botón Calcular, se muestra el resultado. Usamos el método document.getElementById(). Devuelve el elemento con el atributo de ID especificado y devuelve nulo si no existen elementos con el ID especificado.
Fórmula utilizada:
Lo que es X por ciento de Y viene dado por la fórmula:
X por ciento de Y = (X/100)* YY X es qué porcentaje de Y está dado por la fórmula:
X es qué porcentaje de Y= (X/Y)×100%, donde X, Y > 0
script.js
function percentage_1() {
// Method returns the element of percent id
var percent = document.getElementById("percent").value;
// Method returns the element of num id
var num = document.getElementById("num").value;
document.getElementById("value1")
.value = (num / 100) * percent;
}
function percentage_2() {
// Method returns the element of num1 id
var num1 = document.getElementById("num1").value;
// Method returns the elements of num2 id
var num2 = document.getElementById("num2").value;
document.getElementById("value2")
.value = (num1 * 100) / num2 + "%";
}
Producción:
- En primer lugar-
Calculadora de porcentaje
- Después de ingresar algunos datos y hacer clic en el botón Calcular-
Calculadora de porcentaje
Publicación traducida automáticamente
Artículo escrito por kunalbhade y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA