Javascript Gradient Background in Brex and understand How Colors Works.
Tags: javascript, react, vue, angular
Published: 2019-11-11 11:45:08

#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.
```js
Brex(
  Component(function() {

    return View({})

})

```
##step 2
- add global variable With split function
we split "HELLOWORLD" to array with each letter.
```js 
    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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random) and [Math.floor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)
```js
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
```js
    var bgred = random();

    var bggreen = random();

    var bgblue = random();
```
##step 5
add a important custom child, this child should centering a text in body.
```js 
  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](https://www.w3schools.com/colors/default.asp)
```js
 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
```js
 setTimeout(() => {
      this.setState({});
    }, 1000); // ? create loop for every one secound will change a colors

```
##full Example
```js
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.](https://github.com/HoSheiMa/Brex/tree/master/examples/%40component) with lastest version.
GitHup [Blex](https://github.com/HoSheiMa/Brex)

Welcome To any One wanna join in our team,
req: good Javascript, any Framework Like (React, Flutter, Angular, etc... )
Contact me at : [FB](facebook.com/qandilabdel.fadilawyan) [TW](twitter.com/Qandil_AFA) [GT](github.com/HoSheiMa)