Em 2011 eu fiz essa postagem:
Alguns códigos simples de JavaScript
Baseada nas coisas que eu mais estava utilizando naquela época!
5 anos depois eu fiz essa:
10 códigos úteis de JavaScript #2
Pra facilitar pra mim e pra quem quisesse o famoso: copiar e colar! =)
Hoje, 13 anos depois da primeira, vamos fazer a Parte #3 \o/
01. Converter RGB para Hexadecimal:
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
console.log( rgbToHex(55, 44, 77) ) // #372c4dTeste a veracidade aqui.
02. Copiar para área de tranferência
<button onclick="copyToClipboard('Texto do Botão')">Texto do Botão</button>
<script>
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
</script>Após clicar no botão, quando pressionar
Ctrl + vem qualquer outro lugar possível, aparecerá: ‘Texto do Botão’. Se enviar direto(sem botão para clicar) pro navegador, ele pedirá uma confirmação:
03. Verificar se uma data é válida
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
// Mês / Dia / Ano
console.log( isDateValid("06/06/2024") ) // true
console.log( isDateValid("13/31/2024") ) // falseA segunda é
falsepois, lógico, não existe mês 13 😃
04. Dia do Ano
const dayOfYear = (date) =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
const dayQtd = dayOfYear(new Date());
console.info(dayQtd) // 158De acordo com a data de publicação desse artigo! Se você pesquisar esse tipo de frase no Google, por exemplo, irá confirmar:
05. Capitalizar somente a primeira letra de uma frase
Javascript não possui uma função para esse resultado específico. Apesar de ser fácil, às vezes pode tomar um tempinho até acertar =)
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
let frase = "amanhã será um lindo dia"
console.log( capitalize(frase) )
// Amanhã será um lindo dia06. Descobrir quantos de dias há em um intervalo de datas
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
let qtdDays = dayDif(new Date("2024-05-31"), new Date("2024-06-06"))
console.log(qtdDays) // 607. Gerar número Hexadecimal aleatório
Pode ser útil para backgrounds(body nesse caso) com cores diversificadas!
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
let color = randomHex()
document.body.style.background = color;
// console.log(randomHex());08. Remover elementos duplicados de um array
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// 1, 2, 3, 4, 5, 609. Criar botão de Ir pro Topo da Página facilmente
<body>
<p>=)</p>
<div id="main" style="height:2000px;"></div>
<a onclick="goToTop()">Ir pro topo!</a>
<script>
const goToTop = () => window.scrollTo(0, 0);
</script>
</body>10. Descobrir a média de alguns números
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
let media = average(1, 2, 3, 4);
console.log(media) // 2.511. Inverter uma string
const reverse = str => str.split('').reverse().join('')
console.log( reverse('Terminal Root') )
// tooR lanimreT12. Capturar trechos selecionados pelo mouse
<div id="main">
<p>Isso também pode ser selecionado</p>
<p>Ou partes de qualquer desses trechos</p>
<button onclick="showSelected()">Mostrar o que você selecionou</button>
</div>
<script>
const getSelectedText = () => window.getSelection().toString()
const showSelected = () => console.log(getSelectedText())
</script>13. Embaralhar um array
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
console.log(shuffleArray([1, 2, 3, 4]));
14. Verificar se o usuário está usando o modo Dark no Dispositivo
Ás vezes o navegador pode não está em Dark Mode, mas se o dispositivo estiver, ele detecta
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)No meu caso que uso:
true
Espero daqui a alguns anos fazer a parte 4![brincadeira] 😃.
