Archivo de la etiqueta Html

tabla

Tabla de horarios con javascript

Está tabla realizada mayormente con javascript puede ser una forma ordenada y fácil para visualizar horarios de diferentes materias cómo utilicé en este ejemplo aunque puedes aplicarlo a un listado de citas por ejemplo reemplazando las materias por nombres de clientes.

Inicialmente creamos un archivo style.css e index.html con la estructura básica del documento, ambos dentro de la misma carpeta. En el index.html importamos nuestro style.css y escribimos dentro del body las etiquetas de la tabla, con su encabezado y su cuerpo.

Contenido del head:

    <title>Tabla semanal de horarios con javascript</title>
    <link rel="stylesheet" type="text/css" href="style.css">

Contenido del body:

 <table>
     <thead>
        <tr id="thead"></tr>
     </thead>
     <tbody id="tbody"></tbody>
 </table>

Estilos para el cuerpo del documento, la tabla, su encabezado y celdas, también definí una clase “days” para los días de la semana.

body {
    min-height: Calc(100vh - 100px);
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

table {
    margin: auto;
    font-size: 20px;
    width: 80%;
}

td,
th {
    border: 1px solid #c3c3c3;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.days {
    background-color: black;
    color: aliceblue;
    font-family: sans-serif;
    font-weight: 100;
}

También incluí unos estilos al pasar el cursor por cada materia y al pulsar en cada una de ellas.

.bg:hover {
    background: #c1c1c1;
    color: #fff;
}

.shadow:hover {
    box-shadow: 0px 4px 9px -1px rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.shadow:active {
    background: #000;
    color: #fff;
}

Ahora pasemos al código javascript que yo escribí dentro del html ya que no es muy extenso pero tú puedes escribirlo en un archivo js y luego incluirlo dentro del html.

Definí la tabla mediante una función y le agregué las siguientes propiedades:

  function Table() {

            this.thead = document.getElementById("thead")
            this.tbody = document.getElementById("tbody")
            this.dias = ["Hora", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes"]
            this.horas = ["8:00", "9:00", "10:00", "11:00", "12:00"]
            this.clases = [{
                "hora": "8:00",
                "dia": 1,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 1,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "10:00",
                "dia": 2,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "8:00",
                "dia": 3,
                "materia": "Dibujo",
                "bg": "cyan"
            }, {
                "hora": "9:00",
                "dia": 3,
                "materia": "Música",
                "bg": "aliceblue"

            }, {
                "hora": "11:00",
                "dia": 3,
                "materia": "Biología",
                "bg": "darkturquoise"
            }, {
                "hora": "8:00",
                "dia": 4,
                "materia": "Música",
                "bg": "aliceblue"
            }, {
                "hora": "10:00",
                "dia": 4,
                "materia": "Sociología",
                "bg": "darksalmon"
            }, {
                "hora": "8:00",
                "dia": 5,
                "materia": "Filosofía",
                "bg": "antiquewhite"
            }, {
                "hora": "9:00",
                "dia": 5,
                "materia": "Literatura",
                "bg": "darkgray"
            }, {
                "hora": "12:00",
                "dia": 5,
                "materia": "Historia",
                "bg": "cornflowerblue"
            }]

Comenzamos construyendo el encabezado de la tabla para ello recorremos el array de los días para crear los casilleros del encabezado, a los días le agregamos nuestra clase “days” definida en el CSS y al elemento con el texto “Hora” le damos un fondo rojo para diferenciarlo de los días.

this.head = function() {
    // texto de "Hora" y los días
    for (d of this.dias) {
        const th = document.createElement("th")

        // Sí no es el texto "Hora" le ponemos la clase "days" de lo contrario el fondo red
        if (d !== "Hora") th.className = "days"
        else th.style.backgroundColor = "red"
        th.appendChild(document.createTextNode(d))
        this.thead.appendChild(th)
    }
}

Ahora pasamos a construir el cuerpo de la tabla, primero definimos una variable “hora” que necesitaremos para guardar la hora en la que nos encontramos en la fila de la tabla y una variable “horasCount” en la que guardamos la cantidad actual de elementos que contiene, es así que iteramos por cada hora para crear las filas.

Ahora el segundo ciclo que incluimos dentro del primero se encargará de insertar la hora de cada materia con su respectivo nombre y en el día que le corresponde.

Si estamos parados en la primer celda de cada fila pondremos en ella el primer elemento del array de horas para luego guardarlo en la variable hora y luego eliminarlo así al volver a la siguiente fila agregamos la siguiente hora eliminándola nuevamente y pasando a la siguiente. A estas celdas le damos un texto en negrita.

Ahora si no estamos parados en la primer celda de la fila que llevará la clase “shadow”. En este punto tenemos que fijarnos si la hora en que estamos parados coincide con alguna de la lista de clases para ello utilizamos la guardada en nuestra variable hora y si ésta y el número de día coincide con nuestro objeto de clases le damos el color de fondo que tiene y le insertamos el nombre de la materia a la celda para luego agregarla a la fila.

this.body = function() {
    let hora
    let horasCount = this.horas.length
        // en el body tenemos que poner las horas con sus respectivas materias
    for (let f = 0; f < horasCount; f++) {
        // fila
        const tr = document.createElement("tr")
            // celdas, for por la cantidad de días de la semana
        for (let c = 0; c < 6; c++) {
            const td = document.createElement("td")
            if (c == 0) {
                // celdas de las horas tomamos la primera y después la eliminamos así tomamos la siguiente
                td.appendChild(document.createTextNode(this.horas[c]))
                td.style.fontWeight = "bold"
                hora = this.horas[c]
                this.horas.shift()
            } else {
                // celdas de las materias
                td.className = "shadow"
                this.clases.forEach(function(element) {
                    if (element.hora === hora && element.dia === c) {
                        td.style.backgroundColor = element.bg
                        td.appendChild(document.createTextNode(element.materia))
                    }
                })
            }
            tr.appendChild(td)
        }
        this.tbody.appendChild(tr)
    }
}

Finalmente para ver la tabla armada creamos la instancia de la clase Tabla e invocamos a la construcción de su encabezado primero y luego a la de su cuerpo con la información que le proporcionamos.

let table = new Table()
table.head()
table.body()

Video del tutorial

VER DEMO Código en GitHub
Dado 3D

Dado 3D animado con HTML y CSS

Comenzamos creando un archivo index.html y un archivo style.css en la misma carpeta. En nuestro archivo HTML dentro del <body> definimos un <div> con la clase “contenedor”, dentro de éste otro con la clase “cubo” y dentro seis de ellos cada uno con la clase “cara”. Aquí el código html dentro del body:

<div class="contenedor">
    <div class="cubo">
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
        <div class="cara"></div>
     </div> 
</div>

Ahora pasamos a modificar los estilos.

Al cuerpo del documento le apliqué un display y también un fondo oscuro aunque con mejor resultado puedes ponerle una imagen pero te aconsejo que le agregues una sombra al cubo, requiere un trabajo extra pero quedaría genial . A “contenedor” le damos una perspectiva de 1000 píxeles, esta propiedad lo que hace es determinar la distancia entre el plano z=0 y el observador además si no se la configuramos nuestro cubo se verá deforme, también le apliqué un margen.

body {
    background-color: black;
    display: flex;
}

.contenedor {
    perspective: 1000px;
    margin: auto;
}

Para posicionar los hijos dentro de “cubo” en el espacio 3D usamos transform-style, le damos un margen y junto con sus hijos le damos igual alto y ancho. Las caras tendrán una posición absoluta y un borde blanco.

.cubo {
    transform-style: preserve-3d;
    margin: 200px auto;
}

.cubo,
.cubo>div {
    height: 290px;
    width: 290px;
}

.cara {
    position: absolute;
    border: 5px solid #ffffff;
}

Ahora vamos a las imágenes de las caras que coloqué en una carpeta, al final del post tendrás el acceso al repositorio en GitHub:

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
}

Una vez cargadas las imágenes en cada cara, llevamos por el eje z la cara con el tres hacia el frente y la cara con el cinco hacia el fondo. Sobre el eje y trasladamos en sentidos opuestos a la cara con el seis y el cuatro para luego rotarlos 90 grados y dejarlos enfrentados, y lo mismo con las caras dos y uno pero sobre el eje x.

.cubo .cara:nth-child(1) {
    background-image: url("./imagenes/tres.jpg");
    transform: translateZ(150px);
}

.cubo .cara:nth-child(2) {
    background-image: url("./imagenes/cinco.jpg");
    transform: translateZ(-150px);
}

.cubo .cara:nth-child(3) {
    background-image: url("./imagenes/seis.jpg");
    transform: translateX(-150px) rotateY(90deg);
}

.cubo .cara:nth-child(4) {
    background-image: url("./imagenes/cuatro.jpg");
    transform: translateX(150px) rotateY(90deg);
}

.cubo .cara:nth-child(5) {
    background-image: url("./imagenes/dos.jpg");
    transform: translateY(-150px) rotateX(90deg);
}

.cubo .cara:nth-child(6) {
    background-image: url("./imagenes/uno.jpg");
    transform: translateY(150px) rotateX(90deg);
}

Ahora pasemos a la animación que se la aplicamos a la clase “cubo” que contiene nuestras caras ya posicionadas, le damos unos 20 segundos de duración, la llamamos “giro”, se la dejamos de forma infinita y le aplicamos una velocidad lineal de inicio a fin. Para el @keyframes definimos de esta manera las transformaciones:

.cubo {
    animation: giro 20s infinite linear;
}

@keyframes giro {
    0% {
        transform: rotateX(-45deg) rotateY(0deg)
    }
    20% {
        transform: rotateX(0deg) rotateY(00deg)
    }
    40% {
        transform: rotateX(45deg) rotateY(180deg)
    }
    80% {
        transform: rotateX(-90deg) rotateY(360deg)
    }
    100% {
        transform: rotateX(-45deg) rotateY(720deg)
    }
}

Video en Youtube

VER DEMO Código en GitHub