Calculadora Js codepen
El ancho de la pantalla es 100% y el tamaño de la fuente es 3em. El color de fondo de la pantalla es igual al color de fondo de la calculadora (# 223850). Así que la pantalla no se puede ver por separado. Si quieres que esta pantalla se vea diferente entonces puedes cambiar este color de fondo.#input { width: 100%; padding-right: 10px; font-size: 3em; text-align: right; height: 2em; display: flex; justify-content: flex-end; align-items: center; color: #FDFEFE; background-color: #223850; transition: all 0.3s ease-in}
En este caso, déjame decirte que no he predeterminado ninguna altura o anchura en la calculadora. La altura y la anchura de la calculadora se determinará en función del tamaño de los botones aquí.Padding: 20px 30px se ha utilizado para hacerlos más grandes. Cada número está rodeado por un borde: 0.3px solid rgba (251, 253, 255, 0.171) que añade belleza.#buttons-container { display: grid; grid-template-columns: repeat(4, auto); text-align: center; }/* Btn’s */.btn { display: flex; justify-content: center; align-items: center; padding: 20px 30px; font-size: 1.2em; cursor: pointer; transition: all 0.3s ease-in; border: 0.3px solid rgba(251, 253, 255, 0.171); } En este caso, verás que he utilizado dos botones de tamaño mucho mayor. En este caso, se ha creado un botón haciendo coincidir los lugares de los dos números. He utilizado dos columnas para los puntos y dos filas para los iguales..dot { grid-column: span 2;}.equal { grid-row: span 2;}Paso 3: Añadir diferentes colores y efectos hover a los botones
Javascript-calculadora github
}, false);}Cada uno de los atributos de tipo determina qué acción se realizará, o qué llamada a la función se hará.El método Clear()El método Clear() borra la última entrada del usuario y la ecuación, y restablece la pantalla de salida a 0:function Clear() {
output.innerHTML = 0;}El método Operator()El método Operator() añade el operador seleccionado al final de la ecuación y actualiza la pantalla de la calculadora. La variable número también se restablece para mantener la pantalla de la calculadora limpia como se explicó anteriormente:function Operator() {
output.innerHTML = number;}El método Equal()El método Equal() evalúa toda la ecuación hasta este punto y muestra la respuesta en la pantalla. El usuario puede continuar añadiendo más a la ecuación seleccionando operadores y números adicionales:function Equal() {
Calcular con Javascript
Este es el estilo que puedes añadir a tu calculadora. Si lo prefieres de otra manera, no dudes en sugerir algunas ideas.Al principio, selecciona todos los elementos, incluyendo su antes y después, establece la propiedad box-sizing como border-box, y establece la familia de la fuente y el font-weight según tu deseo.*, *::before, *::after{
En el siguiente paso, daremos estilo al div “calculator-grid”. Encierra todos los elementos y botones de la calculadora. Al principio, centraremos la calculadora en el centro de la pantalla estableciendo la propiedad position como absoluta, top como 50%, left como 50%, y la propiedad transform como translate(-50%,-50%). Ahora estableceremos la propiedad display como grid, justify-content como center, y align-center como center, para centrar los contenidos de la calculadora y organizarlos en una rejilla.Los botones serán formateados en la rejilla estableciendo la grid-template-columns como repeat(4, 100px) y grid-template-rows como minmax(120px, auto) repeat(5, 100px). El minmax(120px, auto) es para la pantalla de salida para que crezca tanto como sea necesario para que se acomode a los números grandes.#calculator-grid{
Calculadora Html
1. En primer lugar, cree un elemento div con nombre de clase e id “pantalla” y coloque una etiqueta p en blanco dentro de él. Del mismo modo, cree un elemento div con una clase e id “pantalla”. Crea una lista desordenada de botones y especifica su nombre de clase “number-div”. Envuelve todos estos elementos en un elemento div y define su nombre de clase “main-div”. Así, la estructura HTML completa para una calculadora simple es la siguiente:
2. En el segundo paso, apunta a cada elemento en CSS y define sus estilos como sigue. Puede establecer los valores personalizados para las propiedades CSS con el fin de personalizar la calculadora. Por lo tanto, los siguientes son los estilos CSS para la calculadora.
