Skip to content

Commit d674d96

Browse files
hall9zehahall9zeha
committed
instalando dependencias babel webpack y configurando el proyecto
1 parent dacfc05 commit d674d96

14 files changed

Lines changed: 641 additions & 5 deletions

File tree

‎Project/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
package-lock.json

‎Project/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Webpack ESLint y Babel
2+
3+
Iniciar como siempre el proyecto con ```npm init```, luego instalar:
4+
5+
* ```npm i --save-dev @babel/cli @babel/core @babel/preset-env ```
6+
* ```npm i --save-dev webpack webpack-cli``` -> luego crear el archivo "webpack.config.js"
7+
* ``` npm i --save-dev babel-loader ``` -> para instalar el plugin de babel en webpack
8+
9+
# Ejecutar comandos
10+
11+
Para generar un archivo que pueda ser ejecutado en navegadores antiguos o que no soportan ES6 a más, se genera nuevos archivos a partir de un existenete con: ```npx babel entrada.js --out-file salida.js --presets=@babel/preset-env```.
12+
13+
una vez configuarado el archivo webpack.config.js con las direcciones de salida de los archivos transpilados, ejecutar:
14+
* ```npm run webpack```
15+

‎Project/css/bootstrap.css‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Project/css/styles.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
html {
2+
min-height: 100%;
3+
}
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
font-family: sans-serif;
8+
background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%);
9+
min-height: 100%;
10+
padding-bottom: 5rem;
11+
}
12+
.titulo {
13+
font-weight: bold;
14+
font-size: 3rem;
15+
text-transform: uppercase;
16+
color: white;
17+
}
18+
.container {
19+
background-color: white;
20+
}
21+
header {
22+
margin-top: 3rem;
23+
}
24+
header h1 {
25+
color: white;
26+
}
27+
.lista-citas .cita {
28+
border-bottom: 1px solid #e1e1e1;
29+
padding: 2rem;
30+
padding-bottom: 3rem;
31+
32+
}
33+
.lista-citas .cita:last-of-type {
34+
border-bottom: 0;
35+
}
36+
37+
.lista-citas .cita p {
38+
margin:0;
39+
}
40+
.lista-citas .cita button {
41+
margin-top: 1rem!important;
42+
}
43+
.lista-citas .cita span {
44+
font-weight: bold;
45+
}
46+
textarea {
47+
height: 200px!important;
48+
}
49+
50+
svg {
51+
width: 21px;
52+
}

‎Project/index.html‎

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,72 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Proyectos en JavaScript</title>
8-
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Administrador de Pacientes</title>
8+
<link rel="stylesheet" href="css/bootstrap.css">
9+
<link rel="stylesheet" href="css/styles.css">
910
</head>
1011
<body>
11-
12+
<h1 class="text-center my-5 titulo" data-cy="titulo">Administrador de Pacientes de Veterinaria</h1>
13+
<div class="container mt-5 p-5">
14+
<div id="contenido" class="row">
15+
<div class="col-md-6 agregar-cita">
16+
<form id="nueva-cita" data-cy="formulario">
17+
<legend class="mb-4">Datos del Paciente</legend>
18+
<div class="form-group row">
19+
<label class="col-sm-4 col-lg-4 col-form-label">Nombre Mascota:</label>
20+
<div class="col-sm-8 col-lg-8">
21+
<input type="text" id="mascota" name="mascota" class="form-control" placeholder="Nombre Mascota">
22+
</div>
23+
</div>
24+
<div class="form-group row">
25+
<label class="col-sm-4 col-lg-4 col-form-label">Propietario:</label>
26+
<div class="col-sm-8 col-lg-8">
27+
<input type="text" id="propietario" name="propietario" class="form-control" placeholder="Nombre Dueño de la Mascota">
28+
</div>
29+
</div>
30+
<div class="form-group row">
31+
<label class="col-sm-4 col-lg-4 col-form-label">Teléfono:</label>
32+
<div class="col-sm-8 col-lg-8">
33+
<input type="tel" id="telefono" name="telefono" class="form-control" placeholder="Número de Teléfono">
34+
</div>
35+
</div>
36+
<div class="form-group row">
37+
<label class="col-sm-4 col-lg-4 col-form-label">Fecha:</label>
38+
<div class="col-sm-8 col-lg-8">
39+
<input type="date" id="fecha" name="fecha" class="form-control">
40+
</div>
41+
</div>
42+
43+
<div class="form-group row">
44+
<label class="col-sm-4 col-lg-4 col-form-label">Hora:</label>
45+
<div class="col-sm-8 col-lg-8">
46+
<input type="time" id="hora" name="hora" class="form-control">
47+
</div>
48+
</div>
49+
50+
<div class="form-group row">
51+
<label class="col-sm-4 col-lg-4 col-form-label">Sintomas:</label>
52+
<div class="col-sm-8 col-lg-8">
53+
<textarea id="sintomas" name="sintomas" class="form-control"></textarea>
54+
</div>
55+
</div>
56+
<div class="form-group">
57+
<button type="submit" class="btn btn-success w-100 d-block">Crear Cita</button>
58+
</div>
59+
</form>
60+
</div>
61+
<div class="col-md-6">
62+
<h2 id="administra" class="mb-4" data-cy="citas-heading"></h2>
63+
<ul id="citas" class="list-group lista-citas"></ul>
64+
</div>
65+
</div> <!--.row-->
66+
</div><!--.container-->
67+
68+
<!-- una vez compilado con webpack el archivo.js de salida se puede reeemplazar por
69+
nuestro script tradicional, si es que no lo hace automáticamente -->
70+
<script src="public/js/bundle.js" type="module"></script>
71+
1272
</body>
13-
</html>
73+
</html>

‎Project/js/app.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import App from './classes/App.js';
2+
3+
// eslint-disable-nextline
4+
const app = new App();

‎Project/js/classes/App.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { datosCita, nuevaCita } from '../funciones.js';
2+
import {
3+
mascotaInput,
4+
propietarioInput,
5+
telefonoInput,
6+
fechaInput,
7+
horaInput,
8+
sintomasInput,
9+
formulario
10+
} from '../selectores.js';
11+
12+
class App {
13+
14+
constructor() {
15+
this.initApp();
16+
}
17+
18+
initApp() {
19+
mascotaInput.addEventListener('change', datosCita);
20+
propietarioInput.addEventListener('change', datosCita);
21+
telefonoInput.addEventListener('change', datosCita);
22+
fechaInput.addEventListener('change', datosCita);
23+
horaInput.addEventListener('change', datosCita);
24+
sintomasInput.addEventListener('change', datosCita);
25+
26+
// Formulario para nuevas citas
27+
formulario.addEventListener('submit', nuevaCita);
28+
29+
}
30+
31+
}
32+
33+
export default App;

‎Project/js/classes/Citas.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// CLasses
2+
class Citas {
3+
constructor() {
4+
this.citas = []
5+
}
6+
agregarCita(cita) {
7+
this.citas = [...this.citas, cita];
8+
}
9+
editarCita(citaActualizada) {
10+
this.citas = this.citas.map( cita => cita.id === citaActualizada.id ? citaActualizada : cita)
11+
}
12+
13+
eliminarCita(id) {
14+
this.citas = this.citas.filter( cita => cita.id !== id);
15+
}
16+
}
17+
18+
export default Citas;

‎Project/js/classes/UI.js‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import { eliminarCita, cargarEdicion } from '../funciones.js';
2+
import { contenedorCitas, heading } from '../selectores.js';
3+
4+
class UI {
5+
6+
constructor({citas}) {
7+
this.textoHeading(citas);
8+
}
9+
10+
imprimirAlerta(mensaje, tipo) {
11+
12+
const alertaPrevia = document.querySelector('.alert');
13+
14+
if(alertaPrevia) {
15+
alertaPrevia.remove();
16+
}
17+
18+
// Crea el div
19+
const divMensaje = document.createElement('div');
20+
divMensaje.classList.add('text-center', 'alert', 'd-block', 'col-12');
21+
divMensaje.dataset.cy = 'alerta' // NUEVO
22+
23+
// Si es de tipo error agrega una clase
24+
if(tipo === 'error') {
25+
divMensaje.classList.add('alert-danger');
26+
} else {
27+
divMensaje.classList.add('alert-success');
28+
}
29+
30+
// Mensaje de error
31+
divMensaje.textContent = mensaje;
32+
33+
// Insertar en el DOM
34+
document.querySelector('#contenido').insertBefore( divMensaje , document.querySelector('.agregar-cita'));
35+
36+
// Quitar el alert despues de 3 segundos
37+
setTimeout( () => {
38+
divMensaje.remove();
39+
}, 3000);
40+
41+
42+
}
43+
44+
imprimirCitas({citas}) { // Se puede aplicar destructuring desde la función...
45+
46+
this.limpiarHTML();
47+
48+
this.textoHeading(citas);
49+
50+
citas.forEach(cita => {
51+
const {mascota, propietario, telefono, fecha, hora, sintomas, id } = cita;
52+
53+
const divCita = document.createElement('div');
54+
divCita.classList.add('cita', 'p-3');
55+
divCita.dataset.id = id;
56+
57+
// scRIPTING DE LOS ELEMENTOS...
58+
const mascotaParrafo = document.createElement('h2');
59+
mascotaParrafo.classList.add('card-title', 'font-weight-bolder');
60+
mascotaParrafo.innerHTML = `${mascota}`;
61+
62+
const propietarioParrafo = document.createElement('p');
63+
propietarioParrafo.innerHTML = `<span class="font-weight-bolder">Propietario: </span> ${propietario}`;
64+
65+
const telefonoParrafo = document.createElement('p');
66+
telefonoParrafo.innerHTML = `<span class="font-weight-bolder">Teléfono: </span> ${telefono}`;
67+
68+
const fechaParrafo = document.createElement('p');
69+
fechaParrafo.innerHTML = `<span class="font-weight-bolder">Fecha: </span> ${fecha}`;
70+
71+
const horaParrafo = document.createElement('p');
72+
horaParrafo.innerHTML = `<span class="font-weight-bolder">Hora: </span> ${hora}`;
73+
74+
const sintomasParrafo = document.createElement('p');
75+
sintomasParrafo.innerHTML = `<span class="font-weight-bolder">Síntomas: </span> ${sintomas}`;
76+
77+
// Agregar un botón de eliminar...
78+
const btnEliminar = document.createElement('button');
79+
btnEliminar.onclick = () => eliminarCita(id); // añade la opción de eliminar
80+
81+
btnEliminar.dataset.cy = 'eliminar' // NUEVO
82+
83+
btnEliminar.classList.add('btn', 'btn-danger', 'mr-2');
84+
btnEliminar.innerHTML = 'Eliminar <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
85+
86+
// Añade un botón de editar...
87+
const btnEditar = document.createElement('button');
88+
btnEditar.onclick = () => cargarEdicion(cita);
89+
90+
btnEditar.dataset.cy = 'editar' // NUEVO
91+
92+
btnEditar.classList.add('btn', 'btn-info');
93+
btnEditar.innerHTML = 'Editar <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>'
94+
95+
// Agregar al HTML
96+
divCita.appendChild(mascotaParrafo);
97+
divCita.appendChild(propietarioParrafo);
98+
divCita.appendChild(telefonoParrafo);
99+
divCita.appendChild(fechaParrafo);
100+
divCita.appendChild(horaParrafo);
101+
divCita.appendChild(sintomasParrafo);
102+
divCita.appendChild(btnEliminar)
103+
divCita.appendChild(btnEditar)
104+
105+
contenedorCitas.appendChild(divCita);
106+
});
107+
}
108+
109+
textoHeading(citas) {
110+
if(citas.length > 0 ) {
111+
heading.textContent = 'Administra tus Citas '
112+
} else {
113+
heading.textContent = 'No hay Citas, comienza creando una'
114+
}
115+
}
116+
117+
limpiarHTML() {
118+
while(contenedorCitas.firstChild) {
119+
contenedorCitas.removeChild(contenedorCitas.firstChild);
120+
}
121+
}
122+
}
123+
124+
export default UI;

0 commit comments

Comments
 (0)