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.
for more info about color visit W3
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;" +
"padding: 8px;"
}
});
})
]
})
]
});
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;" +
"padding: 8px;"
}
});
})
]
})
]
});
})
);
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
Top comments (0)