Giter Club home page Giter Club logo

hacktober2022's Introduction

Hacktober2022

Respositório para commits duante a Hacktober2022


Como funciona a aplicação?

A aplicação consiste em um canvas, onde os contribuidores podem especificar alguma forma geométrica para desenharem na tela. Será que juntos conseguimos fazer algum desenho?

Ao passar com o mouse por cima do ponto de origem de alguma forma, o nome do contribuidor daquele ponto aparecerá no topo à direita. Clicando no ponto, irá congelar o canvas, permitindo ir até o nome do contribuidor e clicar para ver seu perfil.

Como desenhar?

Os dados da aplicação estão contidos no arquivo points.json. Para inserir uma forma geométrica adicionar no arquivo um novo JSON com as coordenadas e o usuário do GitHub do contribuidor.

Quais formas tem e como descrever elas no JSON?

Como já diriam desenvolvedores mais experientes: a melhor documentação é o próprio código. Então sinta-se à vontade para verificar o arquivo points.json caso se sinta capaz de aprender apenas o lendo mas, aqui segue uma descrição de como fazer:

Formas implementadas Descrição JSON
Linha
{
  "form": "line",
  "x0": 2,
  "y0": 2,
  "x1": 10,
  "y1": 10,
  "contributor": "Ellyzeul"
}
Quadrilátero
{
  "form": "quadrilateral",
  "x0": 100,
  "y0": 100,
  "x1": 100,
  "y1": 150,
  "x2": 200,
  "y2": 200,
  "x3": 150,
  "y3": 100,
  "contributor": "yingyangtongxue"
}
Circulo
{
  "form": "circle",
  "xc": 500,
  "yc": 200,
  "radius": 100,
  "contributor": "leandrohl"
}
Triângulo
{
  "form": "triangle",
  "x1": 500,
  "y1": 200,
  "x2": 500,
  "y2": 200,
  "x3": 500,
  "y3": 200,
  "contributor": "D-Ono"
}

Padrões de commit

Os padrões para commit nesse repositório seguem as convenções comuns, como encontradas no site conventional commits ou em português podem ser encontradas em sites como o freecodecamp.

Em suma:

  • feat: uma nova feature (recurso) que você está adicionando a uma aplicação específica.
  • fix: a resolução de um bug.
  • style: recurso e atualizações relacionadas à estilização.
  • refactor: refatoração de uma seção específica da base de código.
  • test: tudo o que for relacionado a testes.
  • docs: tudo o que for relacionado à documentação.
  • chore: manutenção regular do código. (Você também pode usar emojis para representar os tipos de commit).

Ex.: feat: adição de nova linha ao canvas, feat: adição de nova 'nome da forma' ao canvas.

Formas de contribuir

A principal forma de contribuir é justamente adicionando formas ao canvas, porém há mais métodos e eles estão descritos na seção de issues

hacktober2022's People

Contributors

b1gabrielaugusto avatar d-ono avatar daviiro avatar ellyzeul avatar henriquequintana avatar igorjr19 avatar jao-couto avatar jarvisabhi avatar lucasgstumpf avatar lukastorresu avatar matheusmdr avatar millenag30 avatar yingyangtongxue avatar

Watchers

 avatar

hacktober2022's Issues

Melhoria na estilização da página

Caso sinta que o estilo da tela não está bom (entendo se achar o tema claro ruim, eu também acho), contribuições que proponham uma alteração para embelezar a página são bem-vindas.

Implementação de novas formas geométricas

No arquivo index.js é onde está todo o código da aplicação.
Na linha 30 é onde está a declaração do objeto com as funções desenhar.
Para adicionar uma nova função basta colocar uma nova entrada no objeto e a lógica da função.
É necessário também indicar no README, na seção Quais formas tem e como descrever elas no JSON? quais os parâmetros necessários para desenhar aquela forma, por exemplo:

Caso a função para desenho de circulo seja implementada o README ficará assim:

Formas implementadas Descrição JSON
Linha
{
  "form": "line",
  "x0": 2,
  "y0": 2,
  "x1": 10,
  "y1": 10,
  "contributor": "Ellyzeul"
}
      
Circulo
{
  "form": "circle",
  "xc": 100,
  "yc": 100,
  "radius": 10,
  "contributor": "yingyangtongxue"
}
      

Algumas ideias de formas para implementação são:

  • Circulo
  • Quadrilátero
  • Triângulo
  • Elipse

Responsividade para mobile

A página como está atualmente funciona bem em navegadores de computador, mas nem pense em abrir no celular...
Contribuições que tornem o design responsivo são bem-vindas.

Adição de informações extras sobre os contribuidores

Ao passar o mouse em cima do ponto de origem de uma forma o nome do contribuidor aparece como link clicável ao topo na direita.
Essas informações são consultadas via API pública do GitHub, na linha 21 do arquivo index.js.
Atualmente apenas a foto e nome de usuário são exibidos. Será que há mais coisa que poderia ser exibida?

Para saber quais informações são retornadas pela API, a documentação entra em detalhes, ou pode-se verificar esse exemplo de consulta: https://api.github.com/users/Ellyzeul

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.