4

Dashboard simple en NodeJS x ExpressJS 🍋

 3 years ago
source link: https://dev.to/syntaxter/dashboard-simple-en-nodejs-x-expressjs-57a7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Cover image for Dashboard simple en NodeJS x ExpressJS 🍋

Dashboard simple en NodeJS x ExpressJS 🍋

Aug 14

・3 min read

Este fue uno de mis primeros diseños enfocados en el aprovechamiento de un backend que gestionaba el envío masivo a través de un hosting basado en PHP para obtener un archivo CSV, transformarlo a JSON y luego decodificarlo.

Abajo te explico como utilizar este diseño en tu web o relacionarlo con otros mencionandote las clases principales.

Veamos como se ve el diseño final 🍋

🍋 Y también tiene un campo para introducción de datos

Esto lo puedes reciclar como un componente para un framework o simplemente usarlo como JS simple para gestionar peticiones para almacenar datos en una db, json o cualquier lugar donde lo utilices de forma recurrente.

¿Conocimiento importantes para el desarrollo?

  • CSS / Variables 
:root {
    --main-bg-color: #0E0E0E;
    --secondary-bg-color: #161616;
    --blue-color: #4E54FF;
    --yellow-color: #F4E236;
    --bg-cards: rgba(255, 255, 255, 0.103);
}
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Display grid 
element {
    display: grid;
    grid-template-columns: 30% 70%;
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Display Flex 
.contenedorLogo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Mixing CSS Hover Parent to Child 
.contenedorPerfil img:hover~span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateX(7px);
    background: var(--blue-color);
    transition: 0.5s;
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Postion Fixed 
.pencil {
    position: fixed;
    width: 75px;
    height: 75px;
    background-color: var(--yellow-color);
    left: 50px;
    bottom: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Postion reset styles (inputs) 
.formularioArchivo input {
    width: 80%;
    height: 40px;
    border: none;
    border-bottom: 3px solid var(--yellow-color);
    margin: 20px;
    padding: 10px;
    background: transparent;
    outline: none;
    font-size: 1.3rem;
    color: #fff;
}
Enter fullscreen modeExit fullscreen mode
  • CSS / Microinteraction for close button 
#closeOpen::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(45deg);
    transition: .4s;
}

#closeOpen:hover::after {
    transform: rotate(0deg);
    transition: .4s;
}

#closeOpen::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: var(--yellow-color);
    transform: rotate(-45deg);
    transition: .4s;
}

#closeOpen:hover::before {
    transform: rotate(0deg);
    transition: .4s;
}
Enter fullscreen modeExit fullscreen mode

Sí no conoces CSS te costará mil veces .

El código en Javascript que permite mostrar/ocultar el formulario de carga de contenido

Este formulario solo contiene datos importantes para completar la funcionalidad de carga del elemento principal, este elemento permite que puedas enviar una petición, put, post, delete, get para renderizar los datos desde el servidor tienes el botón principal para procesar todos estos.

  • Código en js / Frontend 
closeOpen.addEventListener('click', () => {
    contenedorPopUp.style.display = "none";
})

pencil.addEventListener('click', () => {
    contenedorPopUp.style.display = "grid";
})
Enter fullscreen modeExit fullscreen mode

Es el encarga de cambiar la propiedad de display none a block y viceversa, puedes animar la transición del elemento contenedor como práctica o simplemente dejarlo como está actualmente.

Este es mi correo profesional [email protected], si me escribes te aseguro que tendrás una respuesta.

Atentamente,


Link al repo

Link a la demo

Siguemente en las redes como @syntaxter

José A. Amaya


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK