Change Background-color Dynamically
Tags: html, css, javascript, codenewbie
Published: 2020-10-21 04:42:30

Hello Everyone,
This is a Quick Tutorial that describes how to dynamically adjust background color when you choose a color from your custom color picker.CSS-variables are the key concept for this tutorial.[Demo](https://youtu.be/kaQit4-xNs8)

`index.html`
```html
<!DOCTYPE html>
<html>
<head>
	
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">

<!--import style sheet-->
<link href="style.css" rel="stylesheet">
    
</head>
```

Here, you can see that I've already added two google fonts and my external stylesheet within my `<head>` tags.
To use google fonts -  https://fonts.google.com/

```html
<body>
<div class="color-picker">
	<div class="picktxt">PICK<br>A<br>COLOR</div>
	    <div class="picker">
	      <input type="color" id="favcolor" class="inputcolor" value="#243441">
	    </div>
	    <div class="color-code" id="c-code">#243441</div>
	</div>
</div>

<script src="main.js"></script>
</body>
```
Within the body tags, you can see four `divs`.They are 

1. `color-picker` - outer most `div`(Main container) 
2. `pictxt` - Sample text
3. `picker` - contains the color-picker(input)
4. `color-code` - Display color-code


```html
 <input type="color" id="favcolor" class="inputcolor" value="#243441">
```
Be sure to set the `type(attribute) of input as the color` and if you need to override the default color of the color picker, you can set your own color value for the `value attribute`.I set the value as `#243441`.

`style.css`
```css
:root{
    --backcol:#243441; 
}
body{
    background-color: var(--backcol);
}
```
The `:root  CSS pseudo-class selector` allows you to target the highest-level parent element in the DOM or document tree. If both the: root and HTML selectors target the same HTML elements, you should know that: root actually has a higher specificity.

:root can be useful for declaring global `CSS variables`(--backcol). Previously, we set the color picker value to `#243441`.So we have to set the initial or default background color as `#243441` as well. Then if we open the index.html, you will see the color picker color and the background color of the page is the same. To achieve this, you must set the --backcol within the var function as the value of the body background-color.

```css
.color-picker{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 50px 50px;
    border-radius: 25px;

}

.picktext{
    font-size: 25px;
    color: black;
    font-weight: 700;
    padding: 0px 10px;
    text-align: center;
    font-family: 'Fredoka One', cursive;
   
}

.picker{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    
}

.inputcolor{
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.color-code{
    width: 100px;
    padding: 10px;
    font-family: 'Montserrat' ,sans-serif;
}
```

`main.js`
```javascript

var inputcolor = document.getElementById("favcolor");
var root = document.documentElement;

inputcolor.addEventListener("input",(e) => {
    document.getElementById("c-code").innerHTML = e.target.value;
    root.style.setProperty("--backcol",e.target.value);
});

```
The color-picker input value set to the `inputcolor(variable)`.
`documentElement` returns an element which is the root element of the document.
addEventListener() method attaches an event handler to the `inputcolor(variable)`.
As a result, color-code and background-color changes.

[Demo](https://youtu.be/kaQit4-xNs8)