Proyecto conversor de divisas usando una API con JavaScript

Añadiendo estilos CSS

  • Creamos los estilos mientras añadimos los identificadores:

index.html

<div class="divisa">
  <div class="nombre">Euros</div>
  <input class="valor" type="number" value="1" />
</div>

<div class="divisa">
  <div class="nombre">Dólares</div>
  <input class="valor" type="number" value="1" />
</div>

<div class="divisa">
  <div class="nombre">Libras</div>
  <input class="valor" type="number" value="1" />
</div>

<div class="divisa">
  <div class="nombre">Yenes</div>
  <input class="valor" type="number" value="1" /> 
</div>

Y para la css dentro de un nuevo tag style antes de cerrar la cabecera head:

body {
  font-family: sans-serif;
  max-width: 280px;
  margin: 25px auto;
}

.divisa {
  display: grid;                    /* cuadrícula */
  grid-template-columns: 50% 50%;   /* 2 columnas iguales */
  margin-bottom: 15px;
  background: rgb(37, 169, 209); 
  color: white;
}

.nombre, .valor{
  padding: 5px;
  font-size: 16px;
  align-self: center;  /* alinear elemento al centro en altura */
  text-align: center;  /* alinear texto al centro en ancho */
}
  • Luego trasladamos los estilos a un fichero styles.css separado y lo importamos en la cabecera:
<link rel="stylesheet" href="styles.css" type="text/css">