igooralm192 / bin2dec

Conversor de números binários para números decimais.

Bin2Dec

🚀 O seu conversor predileto! 💥

Índice

• Sobre
• Demo
• Tecnologias
• O que aprendi
• Como contribuir
• Licença

🔖 Sobre

Binário é o sistema numérico no qual todos os computadores digitais são baseados. Portanto, é importante que os desenvolvedores entendam a matemática binária ou de base 2. O objetivo do Bin2Dec é fornecer prática e compreensão de como funcionam os cálculos binários.

Bin2Dec permite que o usuário digite 0's e 1's e obtenha uma conversão para decimais.

Esta versão vêm com uma funcionalidade extra que também permite a conversão de decimais para binários.

💻 Demo

Essa aplicação foi hospedada pelo Netlify e pode ser encontrada aqui: Bin2Dec.

🚀 Tecnologias

Essa aplicação se utiliza das seguintes tecnologias:

• TypeScript
• ReactJS
• ESLint (Padronização de código)
• Prettier (Formatação de código)

📖 O que aprendi

• Componentização

Foi possível visualizar a repetição de código sobre os componentes dos campos numéricos (inputs). Tendo isso em mente, foi possível componentizar da seguinte forma:

const NumberInput: React.FC<Props> = ({ placeholder, value, onChange }) => {
  function handleChange(newValue: string) {
    if (!Number.isNaN(Number(newValue))) onChange(newValue)
  }

  return (
    <div className="input-container">
      <input
        value={String(value)}
        onChange={e => handleChange(e.target.value)}
        placeholder={placeholder}
      />
    </div>
  )
}

Dessa forma, pode-se respeitar o isolamento de código e criar um componente reutilizável.

• React Hooks

Graças aos conceitos dos Hooks, foi possível respeitar um dos princípios da programação SOLID chamado Single Responsability Principle, onde cada classe/função deve ser especializada em um único assunto.

Neste caso, toda a trativa do campo binário foi isolada no hook useBinary.

const useBinary = (): ReturnType => {
  const [binary, setBinary] = useState<string>()

  const handleBinary = useCallback((value: string | number) => {
    if (value === undefined) return

    const serializedValue = String(value)
      .split('')
      .map(digit => Number(digit))
      .filter(digit => digit <= 1)
      .join('')

    setBinary(oldBinary => {
      if (String(value) === oldBinary) return oldBinary

      return serializedValue
    })
  }, [])

  return {
    binary,
    handleBinary,
  }
}

• Funções Puras

Esse conceito trata-se de que, para uma entrada, uma função irá sempre retornará o mesmo resultado sem efeitos colaterais.

Neste caso, foi possível isolar o cálculo de conversão de binário para decimal, que sempre retornará o mesmo resultado dada a mesma entrada.

export default function binaryToDecimal(binary: string): number {
  const binaryDigits = String(binary)
    .split('')
    .map(digit => Number(digit))

  let convertedDecimal = 0

  for (let i = 0; i < binaryDigits.length; i += 1) {
    const digit = binaryDigits[i]

    convertedDecimal += digit * 2 ** (binaryDigits.length - i - 1)
  }

  return convertedDecimal
}

♻️ Como contribuir

• Crie um fork desse repositório,
• Crie uma branch com o nome da sua feature: git checkout -b my-feature
• Faça um commit das suas alterações: git commit -m 'feat: My new feature'
• Faça um push da sua branch: git push origin my-feature

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

Feito com ❤️ por IguzinhoTV!!