JavaScript Gradient Background Generator

GitHub

As you known, the way to add linear gradient is linear-gradient().Here I got three thoughts about changing the colors: pick a color, random two colors and auto play random function and stop when click the button.

First,link the stylesheet in head and script file in body.

HTML

html

Assign each button an id name.
Two color picker is input typed color.

CSS

css

The background of body is linear gradient with red and yellow defaut setting.

JS

js1

 Select all the elements would be involved.

js2

 setGradient()---change two picked color value in style background,and show the html in the h3 tag.

 randomColor()---get a random color.

'#' + (Math.random() * 0xFFFFFF << 0).toString(16)

From I searched about this, Math.random() will get a random numbe [0,1). << equal to Math.floor(). toString(16) transfer the integrity to string like "123456789ABCDEF".

randomGradient()---give the random color to color1 and color2 and call the setGradient function.

js3

When select the input color, call setGradient()
When click the random button,call randomGradient()
When click the Auto button,setInterval with random every 2 seconds
When click the Stop button,clearInterval