CODEWITHSUNDEEP
javascripthtmlcsscolors
vedankita kumbhar
vedankita kumbhar

Reputation: 1490

Calculate and apply darker background color using javascript

I want to apply darker shades background dynamically using javascript. For that I have written below code.

.event-list .bg{
background:#eee;
padding:5px;
}

.grid .event-list:first-child .bg{
	background: #2aac97
}
.grid .event-list:nth-child(2) .bg{
	background: #29a4ac
}
.grid .event-list:nth-child(3) .bg{
	background: #2a92ac
}
.grid .event-list:nth-child(4) .bg{
	background: #2a7dac
}
.grid .event-list:nth-child(5) .bg{
	background: #2967ac
}
.grid .event-list:nth-child(6) .bg{
	background: #2a55ac
}
<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

I have done this using css, but content coming from backend I want to use javascript. What should I do for this.

Upvotes: 1

Views: 120

Answers (3)

Kirill Simonov
Kirill Simonov

Reputation: 8481

Given two hex or RGB colors, this code will create a gradient with any number of steps depending on the number of div elements in the grid.

Thanks to this answer

let rows = document.getElementById("grid").childNodes;
let colors = interpolateColors(hexToRgb("#2aac97"), hexToRgb("#2a55ac"), rows.length);

for (let i = 0; i < rows.length; ++i) {
    if (rows[i].tagName == "DIV") {
         rows[i].style.background = colors[i];
    }
}

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? "rgb(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ")" : "rgb(0,0,0)";
}

function interpolateColor(color1, color2, factor) {
    if (arguments.length < 3) { 
        factor = 0.5; 
    }
    var result = color1.slice();
    for (let i = 0; i < 3; i++) {
        result[i] = Math.round(result[i] + factor * (color2[i] - color1[i]));
    }
    return "rgb(" + result.join() + ")";
};

function interpolateColors(color1, color2, steps) {
    let stepFactor = 1 / (steps - 1),
        interpolatedColorArray = [];
    color1 = color1.match(/\d+/g).map(Number);
    color2 = color2.match(/\d+/g).map(Number);
    for(let i = 0; i < steps; i++) {
        interpolatedColorArray.push(interpolateColor(color1, color2, stepFactor * i));
    }
    return interpolatedColorArray;
}
.event-list .bg{
    padding:5px;
}
<div class="grid" id="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

Upvotes: 0

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

If you want to generate color hex code dynamically, then you need to create a function which change luminosity of color. Then use this function to get dyanamic hex color.

function ColorLuminance(hex, lum) {

	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;

	// convert to decimal and change luminosity
	var rgb = "#", c, i;
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ("00"+c).substr(c.length);
	}

	return rgb;
}

// apply color to class bg
var grid = document.getElementsByClassName('grid'),
    elements = grid[0].children,
    i;
    
for (i = 0; i < elements.length; i += 1) {
    // do stuff with elements[i] here
    var color = ColorLuminance("#2aac97", -('0.'+i));
    elements[i].children[0].style.background=color;
}
<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

Upvotes: 1

Azeez Kallayi
Azeez Kallayi

Reputation: 2642

You can convert the css code to javascript. Please see the below code, it may help you.

	var colors = new Array('#2aac97','#29a4ac','#2a92ac','#2a7dac','#2967ac');
	var x = document.getElementsByClassName("bg");
var i;
    console.log(x.length);
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = colors[i];
}
	
<div class="grid">
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
  <div class="event-list row">
    <div class="bg">Lorem Ipsum</div>
  </div>
</div>

Upvotes: 0

Related Questions