Seguindo o conteúdo da aula me surgiu a vontade de desenvolver um sistema que gerasse um grupo de cores aleatórias em uma matriz de 10 x 10.
Para sua realização, precisei utilizar recursos não vistos neste curso, como o caso do toLocaleLowerCase(), usado para garntir que o input do usuário sempre fosse verificado em minúsculo, evitando problemas com a natureza case sensitive do Javascript.
Mas no geral foi feito uso tanto de canva, quanto de array, quando de condicionais e laços de repetição. O sistema de adicionar se tratou de um adicional interessante, que poderia ser expandido para um input type="radio" contando já as opções de "sim" ou "não". Isso ajudaria tanto na experiência do usuário, quanto a mitigação de erros.
Segue o código final na integra:
<body>
<label for="linha">Adicionar linhas: "sim" ou "não"?</label><br>
<input id="linha" type="text" placeholder="sim"><br><br>
<button>Gerar novo padrão</button><br><br>
<canvas width="500" height="500" style="border: 1px solid black;"></canvas>
<script>
var cores = ["#fff100", "#ff8c00", "#e81123", "#ec008c", "#68217a", "#00188f", "#00bcf2", "#00b294", "#009e49", "#bad80a"];
var input = document.querySelector("input");
input.focus();
var botao = document.querySelector("button");
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
function quadradoColorido(eixoX, eixoY, preenchimento, linha) {
pincel.fillStyle = preenchimento;
pincel.fillRect(eixoX, eixoY, 50, 50);
if(linha == "sim") {
pincel.strokeStyle = "black";
pincel.strokeRect(eixoX, eixoY, 50, 50);
}
}
function geraCores() {
for(let x = 0; x < 500; x += 50) {
for(let y = 0; y < 500; y += 50) {
var corRandom = Math.round((Math.random()*10)-1);
quadradoColorido(x, y, cores[corRandom], input.value.toLocaleLowerCase());
}
}
}
geraCores();
botao.onclick = geraCores;
</script>O reslutado final foi este:
