{"id":23862883,"url":"https://github.com/larryivc/100_days_of_projects_day8","last_synced_at":"2026-05-04T18:36:42.382Z","repository":{"id":238549344,"uuid":"796727814","full_name":"LarryIVC/100_days_of_projects_day8","owner":"LarryIVC","description":"Results Summary Component] construido con HTML, CSS y JavaScript para mejorar nuestras habilidades de codificación. Este proyecto es el sexto de los desafios #100daysofprojects promovido por Frontend Club.","archived":false,"fork":false,"pushed_at":"2024-05-07T16:29:38.000Z","size":128,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-03T07:33:31.135Z","etag":null,"topics":["css","html","javascript"],"latest_commit_sha":null,"homepage":"https://06-results-summary-component-larry.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LarryIVC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2024-05-06T14:13:30.000Z","updated_at":"2024-05-07T16:34:06.000Z","dependencies_parsed_at":"2024-05-06T17:52:57.956Z","dependency_job_id":"244b5404-6a6e-4724-9b14-9a032d62195f","html_url":"https://github.com/LarryIVC/100_days_of_projects_day8","commit_stats":null,"previous_names":["larryivc/100_days_of_projects_day8"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarryIVC%2F100_days_of_projects_day8","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarryIVC%2F100_days_of_projects_day8/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarryIVC%2F100_days_of_projects_day8/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LarryIVC%2F100_days_of_projects_day8/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LarryIVC","download_url":"https://codeload.github.com/LarryIVC/100_days_of_projects_day8/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240947651,"owners_count":19883030,"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":["css","html","javascript"],"created_at":"2025-01-03T07:28:06.526Z","updated_at":"2026-05-04T18:36:37.354Z","avatar_url":"https://github.com/LarryIVC.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\" style=\"text-align: center\"\u003e\n\u003cimg src = \"./assets/images/logo.webp\" height=\"64\" width=\"auto\"\u003e\n  \u003ch1\u003e\u003cb\u003ePROY06: Results Summary Component\u003cb\u003e\u003c/h1\u003e\n\u003c/div\u003e\n\n[PROY06: Results Summary Component] construido con `HTML`, `CSS` y `JavaScript` para mejorar nuestras habilidades de codificación. Este proyecto es el sexto de los desafios #100daysofprojects promovido por [Frontend Club](https://www.facebook.com/frontendclubfb).\n\n![Screenshot](./assets/images/screenshoot.webp)\n\n### Tabla de contenidos\n\n- [Descripcion](#descripcion)\n  - [El desafio](#el-desafio)\n  - [Capturas](#capturas)\n  - [Enlaces](#enlaces)\n- [Flujo de trabajo](#flujo-de-trabajo)\n  - [Desarrollo](#desarrollo)\n  - [Recursos](#recursos)\n- [Agradecimientos](#agradecimientos)\n- [Contacto](#contacto)\n- [Licencia](#licencia)\n\n## Descripcion\n\n### El desafio\n\nCrear un componente resumen de resultados, usando `HTML` y `CSS`, y lograr que se parezca lo más posible al diseño.\n\n### Los usuarios deberían poder:\n\n1. Ver el diseño óptimo en pantallas `grandes(1200px)` y `pequeñas(375px)`.\n2. Ver un color de fondo `gradiente(hover)` al pasar el mouse sobre el botón.\n3. `Bonus`: Muestra los datos en el diseño desde un archivo JSON JavaScript\n\n\n### Importante:\n\n1. Agrega icono `favicon` al proyecto.\n2. Agrega una `URL` fácil de recordar (ej. `06-results-summary-component`).\n3. Agrega un `título` al proyecto (ej. `Results Summary Component - Frontend Club`).\n4. **Bonus**: Agrega un archivo `README.md` al proyecto.\n\n\n### Capturas\n\n![Captura](./assets/images/mockup.webp)\n\n### Enlaces\n\n- [Proyecto](https://06-results-summary-component-larry.netlify.app/)\n- [Repositorio](https://github.com/LarryIVC/100_days_of_projects_day8)\n\n## Flujo de trabajo\n\n### Desarrollo\n\n**Estructura del proyecto**\n\n```txt\n/\n📂\n├── 📂assets/\n│ └── 📂fonts/\n│   └── HankenGrotesk-VariableFont_wght.ttf\n│ └── 📂images/\n│   └── favicon-32x32.png\n│   └── icon-memory.svg\n│   └── icon-reaction.svg\n│   └── icon-verbal.svg\n│   └── icon-visual.svg\n│   └── logo.webp\n│   └── mockup.webp\n│   └── scrrenshoot.webp\n├── 📂css/\n│ └── styles.css\n├── 📂js/\n│ └── index.js\n└── index.html\n└── LICENSE\n└── README.md\n```\n\n**Tecnologías**\n\n1. `HTML` Semántico\n2. Estilos `CSS`\n3. `Git` y `GitHub`\n4. `Netlify`\n5. `JavaScript`\n\n**Flujo de desarrollo**\n\n1. Análisis del diseño\n2. Configuración inicial\n   - Vincular archivos y librerías\n   - Iniciar proyecto con Git\n3. Marcado HTML\n   - Estructura semántica\n   - Atributos accesibles\n   - Enlaces y rutas\n4. Estilos CSS\n   - De arriba hacia abajo\n   - Estilos reutilizables\n   - Estilos personalizados\n5. Flujo de trabajo `mobile-first`\n\n**Fragmentos de codigo**\n\nEtiquetas `meta` para el SEO.\n\n```html\n\u003cmeta name=\"author\" content=\"Larry Villegas Costas\" /\u003e\n\u003cmeta\n  name=\"title\"\n  content=\"PROY06: Results Summary Component - Larry Villegas Costas - Frontend Club\"\n/\u003e\n\u003cmeta\n  name=\"description\"\n  content=\"PROY06: Results Summary Component - Larry Villegas Costas - Frontend Club\"\n/\u003e\n\u003ctitle\u003eResults Summary Component - Frontend Club\u003c/title\u003e\n```\n\nAnimaciones CSS.\n\n```css\n.summary-container \u003e button:hover {\n  background: linear-gradient(var(--light-slate-blue), var(--light-royal-blue));\n}\n```\n\nJavaScript para cargar datos desde un archivo JSON.\n\n```js\nfunction main() {\n  window.addEventListener(\"load\", () =\u003e {\n    const list = document.getElementById(\"summary-list\")\n    let html = \"\"\n    data.forEach((item) =\u003e {\n      html += `\n      \u003cli style=\"background: ${item.bg};\"\u003e\n      \u003cdiv class=\"literal\"\u003e\n        \u003cimg\n          src=${item.icon}\n          alt=\"Icon relevant of the score ${item.category}\"\n        /\u003e\u003cspan style=\"color: ${item.color};\"\u003e${item.category}\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"numeral\"\u003e\n        \u003cspan\u003e\u003cstrong\u003e${item.score}\u003c/strong\u003e \u003c/span\u003e\u003cspan class=\"light\"\u003e/ 100\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/li\u003e`\n    })\n    console.log(html)\n    list.innerHTML = html\n  })\n}\n```\n\n### Recursos\n\nComparte los recursos que hayas utilizado para completar este proyecto.\n\n1. [Frontend Club](https://www.facebook.com/frontendclubfb) - Comunidad de desarrollo web\n2. [Netlify](https://www.netlify.com/) - Plataforma de alojamiento web\n3. [Multi Device Website Mockup Generator](https://techsini.com/multi-mockup/index.php) - Generador de maquetas\n4. [SVGOMG](https://jakearchibald.github.io/svgomg/) - Optimizador de SVG\n5. [Squoosh](https://squoosh.app/) - Optimizador de imágenes\n6. [Shots](https://shots.so/) - Capturas de pantalla\n7. [Google Fonts](https://fonts.google.com/) - Fuentes gratuitas\n\n## Agradecimientos\n\n- Mi familia que siempre me apoya en mis proyectos\n- Mi streeamer favorito que me inspira a seguir adelante [@midudev](https://www.twitch.tv/midudev)\n\n## Contacto\n\n- [LinkedIn](https://www.linkedin.com/in/larryvillegascostas/)\n- [Facebook](https://www.facebook.com/profile.php?id=1201373751)\n- [GitHub](https://github.com/LarryIVC)\n- [Correo](mailto:larry_villegas@hotmail.com)\n- [Twitter](https://twitter.com/LarryVillegas)\n- [Portfolio](https://portfolio-larry.netlify.app/)\n\n## Licencia\n\nEste proyecto está bajo la Licencia (MIT) - mira el archivo [LICENSE](LICENSE) para detalles\n\n*No dudes en contactarme si crees que te puedo ayudar en algún proyecto o tienes un trabajo para mi.*\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flarryivc%2F100_days_of_projects_day8","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flarryivc%2F100_days_of_projects_day8","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flarryivc%2F100_days_of_projects_day8/lists"}