Como instalar para usar os codigos

HTML

Certifique-se de que seu código inclua essas chamadas para garantir que irá funcionar corretamente.

Modo Escuro (Dark Mode)

Darkmode button

Modo de Uso

<input type="checkbox" id="darkmode-toggle" class="botao-toggle" />
<label for="darkmode-toggle" class="espaco-toggle">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sun sun" viewBox="0 0 16 16">
<path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5zM4.636 4.636a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 1 1-.707.707L4.636 5.343a.5.5 0 0 1 0-.707zm6.364 6.364a.5.5 0 0 1 .707 0l1.414 1.414a.5.5 0 0 1-.707.707L10.293 11.7a.5.5 0 0 1 0-.707zM0 8a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2A.5.5 0 0 1 0 8zm13 0a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zM4.636 11.7a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 1 1-.707.707L4.636 12.407a.5.5 0 0 1 0-.707zm6.364-6.364a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 1 1-.707.707L10.293 5.343a.5.5 0 0 1 0-.707z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon moon" viewBox="0 0 16 16">
<path d="M6 .278a.77.77 0 0 1 1.08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277a7.277 7.277 0 0 0 2.77-.792.77.77 0 0 1 1.163.69A8 8 0 1 1 6 .278z"/>
</svg>
</label>

Mascaras

Máscara de CPF

Modo de Uso

<input type="text" class="mascara-cpf">

Máscara de CNPJ

Modo de Uso

<input type="text" class="mascara-cnpj">

Máscara de IPv4

Modo de Uso

<input type="text" class="mascara-ipv4">

Máscara de IPv6

Modo de Uso

<input type="text" class="mascara-ipv6">

Máscara de CEP

Modo de Uso

<input type="text" class="mascara-cep">

Máscara monetária

Modo de Uso

<input type="text" class="valor-monetario">

Validadores

Validador de CPF

Modo de Uso

<!--Para chamar o input--> <input type="text" class="valida-CPF" autocomplete="off"> <br> <!--small para mostra menssagem de erro.--> <small id="cpf-message" class="invalid-feedback"></small>

Validador de CNPJ

Modo de Uso

<!--Para chamar o input--> <input type="text" class="valida-CNPJ" autocomplete="off"> <br> <!--small para mostra menssagem de erro.--> <small id="cnpj-message" class="invalid-feedback"></small>

Busca de CEP







Modo de Uso

<!--Para chamar o input--> <label for="cep">Busca por CEP:</label> <input type="text" size="60" class="busca-cep" id="cep" /><br /> <label for="rua">Rua:</label> <input name="rua" type="text" id="rua" class="endereco rua" size="60" /><br /> <label for="bairro">Bairro:</label> <input name="bairro" type="text" id="bairro" class="endereco bairro" size="40" /><br /> <label for="cidade">Cidade:</label> <input name="cidade" type="text" id="cidade" class="endereco cidade" size="40" /><br /> <label for="uf">Estado:</label> <input name="uf" type="text" id="uf" size="2" class="endereco uf" /><br /> <label for="ibge">Codigo Ibge:</label> <input name="ibge" type="text" id="ibge" size="20" class="endereco ibge" /><br /> <br> <!--small para mostra menssagem de erro.--> <small class="cep-message"></small>

Datetime Input

Modo de Uso

<input type="datetime-local" class="data-hora">

Removedor de Mascara de CPF e CNPJ

Modo de Uso

<input type="text" class="apenasNumeros ">

Coloris

Modo de Uso

<link rel="stylesheet" href="./../node_modules/@melloware/coloris/dist/coloris.min.css" /> <script src="./../node_modules/@melloware/coloris/dist/esm/coloris.min.js"></script> <script type="text/javascript"> setInstance('.instance1', { theme: 'pill', formatToggle: true, closeButton: true, clearButton: true, swatches: [ '#067bc2', '#84bcda', '#80e377', '#ecc30b', '#f37748', '#d56062' ] }); </script> <div class="clr-field"> <button type="button" aria-labelledby="clr-open-label"></button> <input id="coloris" class="coloris instance1" type="text" data-coloris> </div>