Medallero personalizado runner

En el mundo deportivo, especialmente en el running, siempre es importante tener en cuenta los logros personales que se van alcanzando a lo largo del tiempo. Para ello, una forma de visualización que se ha vuelto cada vez más popular es el llamado medallero personalizado runner. A través de él, se pueden organizar todas las carreras en las que se ha participado, las distancias recorridas y, por supuesto, los tiempos y las posiciones obtenidas.

¿En qué consiste el medallero personalizado runner?

El medallero personalizado runner es una especie de tabla o cuadro que se crea en el que se introducen los datos de cada carrera. Esto se puede hacer de manera manual o, si se prefiere, a través de algunas aplicaciones específicas que ya ofrecen esta funcionalidad. Pero ¿qué datos se deben incluir en el medallero? Sin duda, aunque se pueden personalizar según cada corredor, algunos de los más comunes son:

- Fecha y lugar de la carrera. Es importante para ubicarnos temporalmente y geográficamente.
- Distancia recorrida. Siempre es relevante anotar cuánto hemos corrido en cada carrera, puesto que esto es un factor que se puede mejorar con el tiempo.
- Tiempo realizado. Sin duda, uno de los datos estrella. El tiempo que hemos tardado en completar una carrera es algo que queda como referencia y puede ser muy motivador para esforzarnos y superarnos en próximos retos.
- Puesto obtenido. Por último, siempre es interesante también anotar en qué posición llegamos a la meta. No solo porque esto implica una posición dentro de los inscritos, sino porque es un valor que se puede comparar con otras carreras y ver también la evolución en esta clasificación.

Cómo crear un medallero personalizado runner en HTML

Si eres de los todo terrenos y te gusta la programación, puede ser interesante crear tu propio medallero personalizado runner en HTML. A continuación, se presentan algunos pasos para hacerlo:

1. Lo primero que debemos hacer es crear una tabla en la que, posteriormente, iremos incluyendo los distintos datos. Para ello, utilizamos la etiqueta

y, dentro de ella,

para cada fila y

```

- Utilizando JavaScript, para que sea aún más personalizado y se actualice automáticamente. Para ello, podemos crear una función Javascript que recoja los datos que se quieran incluir y los añada a la tabla.

```
var fecha = document.getElementById("fecha").value;
var distancia = document.getElementById("distancia").value;
var tiempo = document.getElementById("tiempo").value;
var puesto = document.getElementById("puesto").value;
var row = document.createElement("tr");
row.innerHTML = "

";
document.getElementById("tabla-medallero").appendChild(row);
```

3. Por último, podemos darle estilo a la tabla utilizando CSS. Por ejemplo, para que tenga un fondo gris claro, márgenes y borde:

```
table {
border-collapse: collapse;
margin: 20px 0;
background-color: #F6F6F6;
text-align: center;
width: 80%;
margin: auto;
border: 1px solid #C0C0C0;
}

td, th {
border: 1px solid #C0C0C0;
padding: 12px 15px;
}

tr:nth-child(even) td {
background-color: #BDBDBD;
color: #fff;
}
```

Así, habríamos creado nuestro propio medallero personalizado runner en HTML. Ahora solo nos queda seguir actualizándolo con cada carrera y disfrutar de nuestra evolución como corredores.

• Llaveros silicona personalizados
• Llaveros 3d personalizados

para cada columna. ``` Fecha Distancia Tiempo Puesto ``` 2. Después, iremos añadiendo los datos que queramos introducir en el medallero. Podemos hacerlo de 2 formas: - Manualmente, en la tabla: ```
23-09-2021	10 km	00:45:32	35/250
" + fecha+ "	" + distancia + "	" + tiempo + "	" + puesto + "