DEV Community

HoSheiMa

Posted on • Updated on

welcome in Brex World.

Today will create a Fast Example in Brex library in 3 min

• learn Brex State
• learn color system
• learn Hacks in Javascript
• Create random color in Javascript

step 1

• create empty Brex File.
``````Brex(
Component(function() {

return View({})

})

``````

step 2

• add global variable With split function we split "HELLOWORLD" to array with each letter.
``````    var WORD = "HELLOWORLD!".split("");
``````

step 3

• create a function to create a random colors this function create random number from 0 to 255 and we mines from it a Word length * word length to make it decrease to half a 255 number, you can improve this function by your self. more info about Math.random and Math.floor
``````var random = () => {
return Math.floor(Math.random() * 255 - WORD.length * WORD.length); // ? we minus word.length * 12 because don't make random over than max number(255)
};

``````

step 4

use a random Function to create a random red, blue, green color

``````    var bgred = random();

var bggreen = random();

var bgblue = random();
``````

step 5

add a important custom child, this child should centering a text in body.

``````  var Cover = createNativeElement({
attrs: {
style: `
display: flex;
flex: 1;
transition: 0.8s;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
`
}
});

``````

step 6

add cover child to view, and make loop in it to show each letter with some custom css,
we increase color number in each element to make linear gradient.

`````` return View({
children: [
Cover({
children: [
...WORD.map((v, i) => {
bgred = bgred + 12;
bggreen = bggreen + 12;
bgblue = bgblue + 12;

return Child({
text: v,
type: "span",
attrs: {
style:
`
transition: 0.6s;
background-color:
rgb(\${bgred}, \${bggreen}, \${bgblue});` +
"color: #fff;" +
"text-shadow: 2px 2px 8px #000;" +
"font-size: 46px;" +
}
});
})
]
})
]
});
``````

step 7

add a setTimeout to recreate each second a new color

`````` setTimeout(() => {
this.setState({});
}, 1000); // ? create loop for every one secound will change a colors

``````

full Example

``````Brex(
Component(function() {
setTimeout(() => {
this.setState({});
}, 1000); // ? create loop for every one secound will change a colors

var WORD = "HELLOWORLD!".split("");

var random = () => {
return Math.floor(Math.random() * 255 - WORD.length * WORD.length); // ? we minus word.length * 12 because don't make random over than max number(255)
};

var bgred = random();

var bggreen = random();

var bgblue = random();

var Cover = createNativeElement({
attrs: {
style: `
display: flex;
flex: 1;
transition: 0.8s;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
`
}
});

return View({
children: [
Cover({
children: [
...WORD.map((v, i) => {
bgred = bgred + 12;
bggreen = bggreen + 12;
bgblue = bgblue + 12;

return Child({
text: v,
type: "span",
attrs: {
style:
`
transition: 0.6s;
background-color:
rgb(\${bgred}, \${bggreen}, \${bgblue});` +
"color: #fff;" +
"text-shadow: 2px 2px 8px #000;" +
"font-size: 46px;" +
}
});
})
]
})
]
});
})
);

``````

for more example visit Full example section. with lastest version.
GitHup Blex

Welcome To any One wanna join in our team,
req: good Javascript, any Framework Like (React, Flutter, Angular, etc... )
Contact me at : FB TW GT