thiagoa-martins / secure-hash-comparator Goto Github PK

View Code? Open in Web Editor NEW

Aplicação que compara hashs SHA512, SHA256 e MD5 feita com JavaScript puro.

HTML 32.29% CSS 43.12% JavaScript 24.59%

secure-hash-comparator's Introduction

Secure Hash Comparator

Compare facilmente hashs SHA512, SHA256 ou MD5.
O projeto foi desenvolvido com Html, Css e Javascript.

Índice

Visão Geral
Meu processo
- Construído com
- O que eu aprendi
Autor

Visao Geral

A ideia

Você sabe o que é SHA512, SHA256 ou MD5?

Tenho certeza que você já viu essas siglas em algum lugar da internet, haha.

Elas são hashs. Hash é uma pequena função que resume um dado, nesse caso um código usado para verificar se um arquivo permanece intacto, livre de vírus. Pensando nisso para facilitar minha vida na hora de verificar um arquivo desenvolvi essa aplicação, quem quiser usar fique a vontade. :)

Screenshot

Como rodar o projeto

Acesse o site: Site

Meu processo

Construido com

Marcação HTML5 semântica
Propriedades personalizadas de CSS
Flexbox
Primeiro fluxo de trabalho para desktop
JavaScript

O que eu aprendi

Entender melhor como hashs funcionam e trabalhar refatoração de código.

<form id="form" action="#">
    <label>
        Original hash: <input id="hash" type="text" pattern="[0-9A-Za-z].{1,}" title="There is an invalid character or less than 8 characters">
        <label></label>
    </label>
    
    <label>
        File hash: <input id="fileHash" type="text" pattern="[0-9A-Za-z].{1,}">
        <label></label>
    </label>
    
    <button id="btn">To compare</button>
</form>

main .article form label input.error {
    border: 1px solid var(--color-quinary);
    outline-color: var(--color-quinary);
}

main .article form label input.error::placeholder {
    color: var(--color-quinary);
}

main .article form label label.message {
    display: block;
    color: var(--color-quinary);
    font-weight: 400;
    font-size: 0.8rem;
}

btn.addEventListener("click", () => {
    inputs.forEach(input => {
        validateData(input);
    });

    checkHash();
});

inputs.forEach(input => {
    input.addEventListener("keyup", () => {
        validateData(input);
    });
});