Javascript Gradient Background in Brex and understand How Colors Works.

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