{"id":21734479,"url":"https://github.com/pedro-donoso/vanilla-js","last_synced_at":"2026-05-11T09:15:00.449Z","repository":{"id":220168897,"uuid":"750930396","full_name":"pedro-donoso/vanilla-js","owner":"pedro-donoso","description":"CRUD de JavaScript, agrego GiftCard con tipo, tiempo, precio e imagen a un formulario y esos datos se muetran en una tabla, utilizo Bootstrap","archived":false,"fork":false,"pushed_at":"2024-02-19T05:07:17.000Z","size":529,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-25T20:42:20.644Z","etag":null,"topics":["bootstrap","javascript","javascript-library","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pedro-donoso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-31T15:52:27.000Z","updated_at":"2024-02-01T04:18:48.000Z","dependencies_parsed_at":"2024-02-19T06:37:50.048Z","dependency_job_id":null,"html_url":"https://github.com/pedro-donoso/vanilla-js","commit_stats":null,"previous_names":["pedro-donoso/vanilla-js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-donoso%2Fvanilla-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-donoso%2Fvanilla-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-donoso%2Fvanilla-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pedro-donoso%2Fvanilla-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pedro-donoso","download_url":"https://codeload.github.com/pedro-donoso/vanilla-js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244711967,"owners_count":20497418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","javascript","javascript-library","vanilla-javascript","vanilla-js"],"created_at":"2024-11-26T05:09:15.129Z","updated_at":"2026-05-11T09:15:00.415Z","avatar_url":"https://github.com/pedro-donoso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### 1. Comienzo del Proyecto\n\n 1.1. Creo carpeta **vanilla-js** en directorio raíz\n\n 1.2. Abro carpeta con vscode\n\n 1.3. Creo repositorio *vanilla-js* en Github\n \n 1.4. Creo rama develop y la publico\n \n1.5. Agrego Readme, realizo primer commit y lo pusheo al repositorio *vanilla-js*\n\n### 2. Defino los Archivos\n\n2.1. Creo archivo **index.html**\n\n2.2. Agrego *Plantilla con cdn de Bootstrap* al index.html\n\n2.3. Creo *carpeta data* donde almaceno el archivo **data.json**, que contiene los *productos iniciales* en **formato JSON**:\n\n![uno](https://github.com/pedro-donoso/vanilla-js/assets/68760595/0a736058-f2ce-4ac7-82f9-c5baefbc044c)\n\n2.4. Creo *carpeta js* con archivo **app.js** de **tipo módulo** y lo agrego en *index.html* bajo el script de Bootstrap\n\n```\n\u003cscript src=\"./js/app.js type=\"module\"\u003e\u003c/script\u003e\n```\n\n2.5. En el *archivo app.js* importar **data.json** de **tipo JSON**:\n\n```\nimport datos from \"../data/data.json\" assert {type:\"json\"};\n```\n\n### 3. Archivos JS\n\n3.1. En la *carpeta js* creo archivo **clases.js** con el **constructor**, para *exportar al app.js*:\n\n![dos](https://github.com/pedro-donoso/vanilla-js/assets/68760595/eefa2a2a-50b1-41ea-a4b1-4efeaf0d051b)\n\n3.2. En el archivo **app.js**, *Importo el archivo clases.js* con la **clase Gift**\n\n```\nimport {Gift} from './clases.js'\n```\n\n### 4. Creación del Formulario y Tabla dinámica\n\n4.1. En el archivo *index.html* creo **Formulario Bootstrap**:\n\n![tres](https://github.com/pedro-donoso/vanilla-js/assets/68760595/24d88c77-9c47-4bb1-912b-e0065c853f38)\n\n4.2. En el archivo *index.html* creo **Tabla dinámica Bootstrap**:\n\n![cuatro](https://github.com/pedro-donoso/vanilla-js/assets/68760595/9865913e-75cb-4dd2-9982-ccbf726b2e83)\n\n### 5. Cuerpo de la Tabla \n\n5.1 En el archivo *app.js* creo constante **cuerpoTabla** y selecciono el **id #cuerpo-tabla** ubicado en el *index.html*\n\n```\nconst cuerpoTabla = document.querySelector(\"#cuerpo-tabla\");\n```\n\n5.2 Creo Función para *cargar y mostrar los datos en la tabla* HTML:\n\n```\nconst cargarTabla = () =\u003e { ...\n```\n\n5.3 **Mapea cada elemento** de los datos de data.json y *crea filas* de la tabla HTML\n\n```\ndatos.map((item) =\u003e { ...\n```\n\n5.4 Creo una *fila por cada dato*\n\n```\nconst fila = document.createElement(\"tr\");\n```\n\n5.5 *Creo Celdas HTML* para cada propiedad del elemento\n\n![cinco](https://github.com/pedro-donoso/vanilla-js/assets/68760595/41158401-1143-4e24-88a8-51c8b318b8fa)\n\n5.6 Establece el *innerHTML de la fila* y la *agrega al cuerpo de la tabla*\n\n```\nfila.innerHTML = celdas;\n    cuerpoTabla.append(fila);\n```\n\n5.7 *Inicializo la tabla* cuando se carga el script\n\n```\ncargarTabla();\n```\n\n### 6. Función para agregar un nuevo Gift cuando se envía el formulario\n\n```\nconst agregarGift = (event) =\u003e {\n  event.preventDefault();...\n```\n\n6.1. *Extraigo valores de los inputs del formulario*, **at se posiciona en el último elemento del array datos**\n\n![seis](https://github.com/pedro-donoso/vanilla-js/assets/68760595/6b1df33d-4240-4ff6-b840-64efcf3c4024)\n\n6.2 Creo un *nuevo objeto Gift* y lo agrego al *array de datos*\n\n```\ndatos.push(new Gift(id, gift, tipo, tiempo, precio, imagen));...\n```\n\n6.3 **Reseteo el formulario** y *recargo la tabla*\n\n```\ndocument.querySelector(\"#formGift\").reset();\n  cargarTabla();\n};\n```\n\n6.4. Agrego al final del archivo app.js un **eventListener para los envíos**\n\n```\ndocument.querySelector(\"#formGift\").addEventListener(\"submit\", agregarGift);\n```\n\n### 7. Función para borrar un Gift cuando se hace clic en el botón, se agrega metodo al object model con window\n\n```\nwindow.borrarGift = (id) =\u003e { ...\n```\n\n7.1. **FindIndex** obtiene la posición del elemento, se *iguala el id creado con el anterior*\n\n```\nlet index = datos.findIndex((item) =\u003e item.id == id); ...\n```\n\n7.2. Pregunto al usuario si quiere **eliminar la gift card**\n\n```\n let validar = confirm(\n    `Está seguro/a que quiere eliminar la gift card ${datos[index].gift}?`\n  ); ...\n```\n\n7.3. Elimina *1 elemento* de la posición indicada\n\n```\n if (validar) {\n    datos.splice(index, 1); ...\n```\n\n7.4. Se vuelve a llamar a la función para que se *actualicen los datos*\n\n```\n cargarTabla();\n  }\n}; ...\n```\n\n### 8. Agrego modal de Bootstrap al index.html\n\n![siete](https://github.com/pedro-donoso/vanilla-js/assets/68760595/c084ac31-052f-4914-9798-cd9e34196da5)\n   \n8.1. En *app.js* llamo al modal del index.html **mediante su id**\n\n```\nconst myModal = new bootstrap.Modal(document.getElementById(\"modalGift\"));\n```\n\n8.2. Creo método global para mostrar el Modal\n\n![ocho](https://github.com/pedro-donoso/vanilla-js/assets/68760595/d7d607e6-a3cd-4e02-bff6-aba223ed879e)\n\n### 9. Creo variable global para actualizar datos del modal\n\n```\nlet idGiftUpdate = null;\n```\n\n9.1. Variable para actualizar los Datos, e para que no se refresque la pantalla\n\n![nueve](https://github.com/pedro-donoso/vanilla-js/assets/68760595/6fa26845-bf1e-4a43-b094-9583ccdee2a5)\n\n9.2. Se carga la tabla con los datos actualizados\n\n```\ncargarTabla(); ...\n```\n\n9.3. Se oculta el modal\n\n```\n  myModal.hide();\n}; ...\n\n```\n\n9.4. Actualizo el formulario, mediante submit, al final del archivo app.js\n\n```\ndocument.querySelector(\"#formModal\").addEventListener(\"submit\", giftUpdate);\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedro-donoso%2Fvanilla-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpedro-donoso%2Fvanilla-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpedro-donoso%2Fvanilla-js/lists"}