Vamos a programar #2

Terminando lo anterior.

El día de hoy vamos a terminar de implementar la calculadora de resistencias, en la entrada anterior puse el código que se encarga de hacer el "cálculo" ademas del código de lo que vendría siendo la interfaz. Quedo pendiente la parte de como implementarlo.

Cómo dije antes esto no es un curso para aprender a programar; así que la creación de la ultima parte del código supongo que ya muchos lo implementaron pero si no, no te preocupes en la entrada de hoy terminaremos de implementar todo el código para que sea funcional y estético.

Luce aburrido, Lo sé.

Un formulario con "estilo"

Para empezar vamos a usar CSS3 para darle un poco de vida al formulario.

Para nuestra calculador usamos los componentes FORM , BUTTON, SELECT LABEL H1. A cada uno hay que darle un poco de estilo y para eso usaremos CSS.
Primero empezaremos con toda el area del formulario, para eso agregamos el siguiente código:

form {
font: 95% Arial, Helvetica, sans-serif;
max-width: 400px;
margin: 10px auto;
padding: 16px;
background: #F9F9F9;
}

Con esto le estamos indicando que nosotros queremos que todo el cuerpo del formulario tenga la fuente ARIAL (Helvetica o sans-serif en su defecto), que el ancho máximo será de 400 píxeles, tendrá un marco de 10 píxeles, un padding de 16 píxeles y que todo el fondo tendrá un color grisáceo (#F9F9F9).
Si lo aplicamos y guardamos lucirá así:

Despues le aplicaremos estilo a las listas, para eso utilizaremos el siguiente código:

select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}

Con el código anterior le estamos diciendo que todas las listas SELECT deberan de tener las siguientes características:

1. Deberan de tener el 100% del ancho del formulario que las contenga.
2. Tendran padding de16 píxeles.
3. No tendran borde.
4. Las esquinas estaran redondeadas con un radio de 4 píxeles
5. El color de fondo sera gris claro (#F1F1F1).

Tras implementar el código, el formulario deberá de tener un aspecto similar al siguiente:

Ahora hay que aplicar el estilo a los botones y para eso utilizaremos el siguiente codigo:

input[type="button"],
input[type="reset"]
{ box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}

El código anterior hace lo siguiente:

1. Hace que el tamaño total del boton sea el especificado, pero que en incluya la suma de el ancho de  los bordes y el padding que se aplique, asi que si se modifica el valor de estos no afectara en el tamaño final.
2. El boton medira 100% del ancho del formulario.
3. Tendra 3% del tamaño como padding.
4. Será de color verde (#43D1AF)
5. La linea del borde inferior sera de color verde oscuro (#30C29E) y medirá 2 píxeles.
6. La linea del borde superior no tendre ningun estilo/color.
7. La linea del borde derecho no tendre ningun estilo/color.
8. La linea del borde izquierdo no tendre ningun estilo/color.
9. Las letras serán de color blanco.

Tras implementar el codigo el formulario lucirá asi:

Si quieres definir un estilo para la etiqueta <H1> puedes hacerlo.
El resultado final lo puedes descargar Aquí

Por ahora es todo, si hay algo en lo que tengan dudas, no duden en preguntar.
Los leo luego.