{"id":23119015,"url":"https://github.com/vbss-io/simple-pixel-art-tool","last_synced_at":"2026-05-10T06:49:25.781Z","repository":{"id":244780903,"uuid":"509496900","full_name":"vbss-io/simple-pixel-art-tool","owner":"vbss-io","description":"Aplicação para criação de Pixel Arts utilizando HTML, CSS e JavaScript","archived":false,"fork":false,"pushed_at":"2022-08-23T17:01:16.000Z","size":370,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T14:19:34.915Z","etag":null,"topics":["css","css3","html","html5","javascript","linter","pixel-art","pixel-art-maker","trybe"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/vbss-io.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,"publiccode":null,"codemeta":null}},"created_at":"2022-07-01T15:05:33.000Z","updated_at":"2024-11-19T11:27:18.000Z","dependencies_parsed_at":"2024-06-17T12:28:43.557Z","dependency_job_id":null,"html_url":"https://github.com/vbss-io/simple-pixel-art-tool","commit_stats":null,"previous_names":["vitorbss12/pixelarttool-html-css-javascript","vbss-io/simple-pixel-art-tool"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fsimple-pixel-art-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fsimple-pixel-art-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fsimple-pixel-art-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vbss-io%2Fsimple-pixel-art-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vbss-io","download_url":"https://codeload.github.com/vbss-io/simple-pixel-art-tool/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247109797,"owners_count":20885139,"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","css3","html","html5","javascript","linter","pixel-art","pixel-art-maker","trybe"],"created_at":"2024-12-17T05:31:08.374Z","updated_at":"2026-05-10T06:49:20.752Z","avatar_url":"https://github.com/vbss-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pixel Art Tool - HTML, CSS e JavaScript\n\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_PixelArtTool-HTML-CSS-JavaScript\u0026metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vitorbss12_PixelArtTool-HTML-CSS-JavaScript)\n[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_PixelArtTool-HTML-CSS-JavaScript\u0026metric=reliability_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_PixelArtTool-HTML-CSS-JavaScript)\n[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_PixelArtTool-HTML-CSS-JavaScript\u0026metric=security_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_PixelArtTool-HTML-CSS-JavaScript)\n[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=vitorbss12_PixelArtTool-HTML-CSS-JavaScript\u0026metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=vitorbss12_PixelArtTool-HTML-CSS-JavaScript)\n\nEssa é uma ferramenta simples para criar pixel arts, dada uma paleta de cores e um quadro composto por pixels. É possível testar a aplicação aqui: [Pixel Art Tool](https://vitorbss12.github.io/PixelArtTool-HTML-CSS-JavaScript/).\n\n![pixelArtDemo](./pixelartdemo.png)\n\u003cb\u003eDemonstração Pixel Art Tool\u003c/b\u003e\n\n## Conteúdo\n\n- [Pixel Art Tool - HTML, CSS e JavaScript](#pixel-art-tool---html-css-e-javascript)\n  - [Conteúdo](#conteúdo)\n- [**Recursos Pixel Art Tool**](#recursos-pixel-art-tool)\n    - [**Paleta de Cores**](#paleta-de-cores)\n    - [**Tamanho do Quadro**](#tamanho-do-quadro)\n    - [**Limpar Quadro**](#limpar-quadro)\n    - [**Quadro**](#quadro)\n- [**Linguagens**](#linguagens)\n- [**Instruções**](#instruções)\n    - [**Instalação**](#instalação)\n    - [**Execução**](#execução)\n- [**Ferramentas**](#ferramentas)\n    - [**Linter**](#linter)\n- [**Observações**](#observações)\n\n# **Recursos Pixel Art Tool**\n\n### **Paleta de Cores**\n\nA aplicação utiliza uma paleta de cores com quatro cores, a primeira sempre será preta enquanto as demais são geradas aleatoriamente sempre que a aplicação é atualizada.\n\n### **Tamanho do Quadro**\n\nO quadro pode ser customizado de acordo com o usuário através do campo de texto de tamanho do quadro. É possível alterar a dimensão do quadro entre 5x5 e 20x20. O tamanho padrão é 5x5 e alertas de erro são exibidos caso o usuário digite um valor inválido.\n\n### **Limpar Quadro**\n\nO botão de limpar serve apenas para limpar o quadro, mas não altera a paleta de cores ou o tamanho do quadro.\n\n### **Quadro**\n\nO quadro é composto por pixels, cada pixel se inicia com a cor branca, e conforme for clicado, o pixel tem a cor alterada de acordo com a cor selecionada na paleta de cores.\n\n# **Linguagens**\n\n`HTML` é utilizado para estruturar a aplicação, `CSS` é utilizado para estilizar a aplicação e `JavaScript` é utilizado para executar os recursos da aplicação.\n\n# **Instruções**\n\n### **Instalação**\n\nO projeto não necessita instalação para ser executado. A instalação só é necessária para o linter que é opcional. Caso seja do interesse do usuário, o linter pode ser instalado através do comando:\n\n```\nnpm install\n```\n\n### **Execução**\n\nO projeto pode ser executado através do arquivo `index.html` que está na raiz do projeto.\n\n# **Ferramentas**\n\n### **Linter**\n\nEste projeto foi desenvolvido utilizando o linter `ESLint` seguindo as boas práticas definidas na [Trybe](https://www.betrybe.com/).\n\nComando para execução do Lint:\n````\nnpm run lint\n````\n\nCaso algum CSS seja adicionado a aplicação é possível rodar o styleLint com:\n````\nnpm run lint:styles\n````\n\n# **Observações**\n\n- Este é um projeto de estudo desenvolvido durante minha formação na [Trybe](https://www.betrybe.com/). :rocket:\n\n- Este repositório está sendo monitorado pelo [SonarCloud](https://sonarcloud.io/) para avaliação de qualidade.\n\n- Quer saber mais sobre mim? Veja o meu [LinkedIn](https://www.linkedin.com/in/vitorbss/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Fsimple-pixel-art-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvbss-io%2Fsimple-pixel-art-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvbss-io%2Fsimple-pixel-art-tool/lists"}