├── README.md
├── images
├── Mejorando.png
├── dos.png
├── fb.ico
├── github.ico
├── icon_page.png
├── instagram.ico
├── linkedin.ico
├── twitter.ico
└── uno.png
├── index.html
├── js
└── crud.js
└── styles
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | ## ¿Que es un CRUD?
2 |
3 | [](https://app.netlify.com/sites/peaceful-volhard-95178f/deploys)
4 |
5 | CRUD hace referencia a un acrónimo de "Create, Read, Update and Delete" que en español significa "Crear, Leer, Actualizar y Borrar" que son las cuatro funciones básicas de la persistencia de Bases de Datos.
6 |
7 | CRUD se usa también a veces para describir convenciones de interfaz de usuario que facilita la vista, búsqueda y modificación de la información; a menudo se usa en programación de formularios (forms) e informes (reports).
8 |
9 | ### Funcionamiento
10 | #### Asi es como se vera al principio, debido a que no hemos ingresado datos
11 | 
12 | Para que luego se ingrese la informacion que ira en nuestra tabla!
13 |
14 | #### Luego cuando ya ingresemos datos, se veran así!
15 | 
16 |
17 | Donde tendremos las opciones de editar y eliminar registros para completar nuestro CRUD con HTML, CSS y JS
18 |
19 | ## Contacto
20 | [Linkedin](https://gt.linkedin.com/in/manuel-flores-abb71a15a/%7Bcountry%3Dno%2C+language%3Dno%7D?trk=people-guest_profile-result-card_result-card_full-click)
21 | [Twitter](https://twitter.com/Gerardo_fq)
22 |
23 |
24 | ###### A pesar de ser una Aplicacion simple, la optimize logrando los siguientes resultados!
25 | 
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/images/Mejorando.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/Mejorando.png
--------------------------------------------------------------------------------
/images/dos.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/dos.png
--------------------------------------------------------------------------------
/images/fb.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/fb.ico
--------------------------------------------------------------------------------
/images/github.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/github.ico
--------------------------------------------------------------------------------
/images/icon_page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/icon_page.png
--------------------------------------------------------------------------------
/images/instagram.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/instagram.ico
--------------------------------------------------------------------------------
/images/linkedin.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/linkedin.ico
--------------------------------------------------------------------------------
/images/twitter.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/twitter.ico
--------------------------------------------------------------------------------
/images/uno.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Geracros13/CRUD-HTML-CSS-JS-/1204c1b329e0d10f1231401a38777b9903e226de/images/uno.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Crud JS
11 |
12 |
13 |
28 |
29 |
55 |
56 |
57 |
58 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/js/crud.js:
--------------------------------------------------------------------------------
1 | var Fila = null
2 | function onSubmit() {
3 | let DataForm = Leer()
4 | if (Fila == null){
5 | InsertarDatos(DataForm)
6 | } else{
7 | Actualizar(DataForm)
8 | Vaciar()
9 | }
10 | }
11 | function Leer() {
12 | let DataForm = {}
13 | DataForm["nom"] = document.getElementById("nom").value
14 | DataForm["ape"] = document.getElementById("ape").value
15 | DataForm["pais"] = document.getElementById("pais").value
16 | return DataForm
17 | }
18 | function InsertarDatos(data) {
19 | let table = document.getElementById("tabla").getElementsByTagName('tbody')[0]
20 | let Fila = table.insertRow(table.length)
21 | columna1 = Fila.insertCell(0).innerHTML = data.nom
22 | columna2 = Fila.insertCell(1).innerHTML = data.ape
23 | columna3 = Fila.insertCell(2).innerHTML = data.pais
24 | columna3 = Fila.insertCell(3).innerHTML = `
25 | `
26 | document.getElementById("nom").focus()
27 | Vaciar()
28 | }
29 | function Vaciar() {
30 | document.getElementById("nom").value = ""
31 | document.getElementById("ape").value = ""
32 | document.getElementById("pais").value = ""
33 | Fila = null
34 | }
35 | function Editarr(td) {
36 | Fila = td.parentElement.parentElement
37 | document.getElementById("nom").value = Fila.cells[0].innerHTML
38 | document.getElementById("ape").value = Fila.cells[1].innerHTML
39 | document.getElementById("pais").value = Fila.cells[2].innerHTML
40 | }
41 | function Actualizar(DataForm) {
42 | Fila.cells[0].innerHTML = DataForm.nom
43 | Fila.cells[1].innerHTML = DataForm.ape
44 | Fila.cells[2].innerHTML = DataForm.pais
45 | document.getElementById("nom").focus()
46 | }
47 | function Borrarr(td) {
48 | if (confirm('¿Seguro de borrar este registro?')) {
49 | row = td.parentElement.parentElement
50 | document.getElementById("tabla").deleteRow(row.rowIndex)
51 | Vaciar()
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/styles/style.css:
--------------------------------------------------------------------------------
1 | /*Header*/
2 | body{
3 | margin: 0;
4 | padding: 0;
5 | }
6 | .header{
7 | display: flex;
8 | justify-content: space-between;
9 | height: 70px;
10 | border-bottom: 1px solid #D5D9D9;
11 | margin-top: 0;
12 | padding-top: 0;
13 | }
14 | .header a{
15 | font-size: 1em;
16 | font-family: 'Quicksand', sans-serif;
17 | color: #00438D;
18 | padding: 0 10px;
19 | height: inherit;
20 | display: flex;
21 | align-items: center;
22 | }
23 | .logo{
24 | display: flex;
25 | margin-block-start: 3px;
26 | margin-block-end: 3px;
27 | margin-inline-start: 0px;
28 | margin-inline-end: 0px;
29 | }
30 | .logo img{
31 | margin: 0px 0px 0px 5px ;
32 | display: flex;
33 | padding: 0;
34 | border: 0;
35 | }
36 | .header ol{
37 | list-style: none;
38 | display: flex; /*Sirve para poner la lista de elementos de la lista horizontalmente*/
39 | height: inherit;
40 | }
41 | .header ol li{
42 | height: inherit;
43 | }
44 | .link:hover {
45 | color: white;
46 | background-color: #00438D;
47 | border: 0.5px solid #D5D9D9;
48 | }
49 | ol{
50 | margin: 0;
51 | padding: 0;
52 | }
53 | /*menu*/
54 | .menu{
55 | height: inherit;
56 | }
57 | .menu li{
58 | display: inline; /*para poner la lista en horizontal*/
59 | }
60 | /*Footer*/
61 | .footer{
62 | display: block;
63 | justify-content: center;
64 | align-items: center;
65 | height: 50px;
66 | border-top: 1px solid #D5D9D9;
67 | margin-top: 0;
68 | padding: 1em;
69 | }
70 | a:link{
71 | text-decoration: none;
72 | }
73 | .social{
74 | width: 32px;
75 | height: 32px;
76 | display: inline-block;
77 | }
78 | .footer-fb{
79 | background-image: url('../images/fb.ico');
80 | }
81 | .footer-twitter{
82 | background-image: url('../images/twitter.ico');
83 | }
84 | .footer-instagram{
85 | background-image: url('../images/instagram.ico');
86 | }
87 | .footer-github{
88 | background-image: url('../images/github.ico');
89 | }
90 | .footer-linkedin{
91 | background-image: url('../images/linkedin.ico');
92 | }
93 | /*End Footer*/
94 | form{
95 | text-align: center;
96 | }
97 | .tablita{
98 | display: inline-block;
99 | }
100 | /*Tablaaaaaa Estilos*/
101 | .tabla{
102 | border-collapse: collapse; /*Esta propiedad hace que parezca mas una tabla*/
103 | font-family: 'Quicksand', sans-serif;
104 | }
105 | table tr th{
106 | border: 1px solid #D5D9D9;
107 | width: 100px;
108 | height: 25px;
109 | color: white;
110 | background-color: #00438D;
111 | }
112 | /* Para el estilo de las nuevas celdas */
113 | td {
114 | border: 1px solid #D5D9D9;
115 | width: 100px;
116 | height: 25px;
117 | }
118 | .caja{
119 | display: block;
120 | }
121 | .caja label{
122 | font-family: 'Quicksand', sans-serif;
123 | }
124 | .caja input{
125 | width: 8em;
126 | height: 2em;
127 | text-align: center;
128 | font-family: 'Quicksand', sans-serif;
129 | }
130 | .submit{
131 | width: 8em;
132 | height: 2em;
133 | font-family: 'Quicksand', sans-serif;
134 | color: white;
135 | background-color: #00438D;
136 | border: 2px solid white;
137 | }
--------------------------------------------------------------------------------
16 |