Odtnhj

I would like to change the padding of ten divs using javascript. The divs are used to create a border around the centered main text which changes color, so I can't use box shadows and flex box(already tried it). I am doing this so it works well responsively. This is how I set it up in html:

<span id="title-text" class="head-text center">Tudor Popescu</span>
<div id="[one - ten]" class="center border-ring"></div>

The equation I am using to set the padding of each 'border-ring' is:

N = ring number

CW = content width (text width)

CH = content height(text height)

B = border width

W = window height

W = window width

side padding = N(((0.5 * W) - (0.5 * CW) - (10 * B)) / 11)

vertical padding = N(((0.5 * H) - (0.5 * CH) - (10 * B)) / 11)

What I tried already:
I tried using jQuery so it is easier to work with. I only tried with one div to make sure it works:

var totalWidth = $(window).width(),
 totalHeight = $(window).height();

var hOne = ((0.5 * totalHeight) - (0.5 * $('#title-text').height()) - (10 * 
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
var wOne = ((0.5 * totalWidth) - (0.5 * $('#title-text').width()) - (10 * 
document.getElementsByClassName('border-ring')[0].style.borderWidth) / 11);
hOne = hOne.toString();
wOne = wOne.toString();

document.getElementById('one').style.padding = `$hOnepx $wOnepx 
$hOnepx $wOnepx`;

I would like to know how to do this properly and how to make the code work as right now the padding are bigger than the view port of the website.