Programando uma página que gera estilos · RodrigoSchio

Esse tutorial apresenta conceitos básicos de frontEnd

hello world

Para começar esse projeto usamos javascript.
O código abaixo apresenta a função alert que serve para exibir uma mensagem para o usuário:

<!doctype html>
<html>
<body>
</body>
<script>
alert("hello world"); //exibe mensagem
</script>
</html>

Textos após // são considerados comentários e não são considerados como código.

Função

Essa lição mostra como criar uma função.
E como chamá-la.
Uma função contém uma série de instruções/comandos que são executados um por um.

<script>
//alert("hello world"); //código não executado //comentado para humanos
funcao_exemplo = function() {
	alert("hello function");
}
funcao_exemplo(); //chama a função
</script>

Parâmetros Argumentos

Uma função com parâmetros/argumentos:

<script>
funcao2 = function(p1, p2) {
	alert(p1);
	alert(p2);
}
funcao2("hello parametro", 43); //chama a função (passando dois parametros)
</script>

Parâmetros são valores passados para dentro da função.

return

O código abaixo chama a função que criamos
passando dois argumentos.
Nossa função retorna um valor numérico
para dentro da função alert

<script>
funcao = function(n1, n2) {
	return n1 + n2 + 84;
}
alert(funcao(15, 72));
</script>

random

A função Math.random() retorna um número decimal aleatório entre 0 e 1

<script>
alert(Math.random());
alert(Math.random() * 10);
alert(parseInt(Math.random() * 10));
alert(3 + parseInt(Math.random() * 17)); //um número inteiro aleatório entre 3 e 17
</script>

Layout ou Interface

Essa é a tela por onde o usuário digita a frase

<!doctype html>
<html>
<body>
<input id=frase value="Digite sua frase">
<button onclick="estilo();">estilo</button>
</body>
<script>
estilo = function() {
	fraseDigitada = document.getElementById('frase').value;
	alert(fraseDigitada); //exibe mensagem
}
</script>
</html>

css

Essa lição atribui

text-align, padding, color, margin, border-radius, background-color, font-size,
text-transform e font-family
a algumas divs:

<!doctype html>
<html>
<body>
<input id=frase value="Digite sua frase">
<button onclick="estilo(document.getElementById('frase').value);">estilo</button>
</body>
<script>
estilo = function(parametro1) {
	fraseDigitada = parametro1;
	estiloAleatorio = "text-align:center; height:40px; padding:200px 0px; color:#ffffff; margin:36px auto;";
	estiloAleatorio = estiloAleatorio + "background-color:" + backgroundAleatorio() + ";";
	estiloAleatorio = estiloAleatorio + "font-size:" + tamanhoLetraAleatorio() + ";";
	estiloAleatorio = estiloAleatorio + "font-family:'" + fonteAleatorio() + "';";
	estiloAleatorio = estiloAleatorio + "text-transform:" + transformAleatorio() + ";";
	document.body.innerHTML = "<div style="" + estiloAleatorio + ""><span style='border-radius:14px; " + frameAleatorio() + "'>" + fraseDigitada + "</span></div><button style='position:absolute; bottom:12px; right:158px; padding:20px 50px;' onclick="estilo(fraseDigitada);">outro</button>" + "<button style='position:absolute; bottom:12px; right:12px; padding:20px 50px;' onclick="location.reload();">voltar</button>";
}
backgroundAleatorio = function(){
	return ["#264653", "#2a9d8f", "#f4a261", "#e76f51", "#606c38", "#bc6c25", "#7f5539"][parseInt(Math.random() * 7)];
}
tamanhoLetraAleatorio = function(){
	return ["20px", "28px", "38px", "46px"][parseInt(Math.random() * 4)];
}
fonteAleatorio = function(){
	return ["Segoe Ui", "Courier", "Verdana", "Georgia"][parseInt(Math.random() * 4)];
}
transformAleatorio = function(){
	return ["lowercase", "uppercase", "capitalize", "none"][parseInt(Math.random() * 4)];
}
frameAleatorio = function(){
	estiloFrame = "padding:" + paddingAleatorio() + ";";
	if(Math.random() > .4) estiloFrame += "background-color: #000000;";
	else estiloFrame += "border:" + borderAleatorio() + ";";
	return estiloFrame;
}
paddingAleatorio = function(){
	return ["30px", "38px", "46px", "54px"][parseInt(Math.random() * 3)];
}
borderAleatorio = function(){
	return ["4px solid #ffffff", "4px dashed #ffffff"][parseInt(Math.random() * 2)];
}
</script>
</html>

Stylish-Gen

Os conceitos que esse tutorial apresenta estão implementados no software stylish-gen (com novidades atualizadas recentemente)