I am trying to get information from an API to then edit html style width to show a progress bar, i cant seem to get the variable from the API to edit the width, **but i know the function for editing the width iS right** since when i just add numbers(px) instead it changes it. it must be how i'm using the variable

im assuimg i have todo something the the variable before i can use it for this

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Default page</title>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="Default page" name="description">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <style>
        body {
            background-color: powderblue;
            margin: 0;
            box-sizing: border-box;
            padding: 0;
        }
        .Name,.Rankedkd,.Rankedmmr,.Rankedbar{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .Name{
            top:45%;
        }
        .Rankedkd{
            top:50%%;
        }
        .Rankedmmr{
            top:55%;
        }
        .Rankedbar{
            top:60%;
            width:500px;
            height:15px;
            background-color:white;
            border: 30px solid #1C6EA4;
            border-radius: 40px;
        }
        .Rankedbarin{
            background-color: #1C6EA4;
            height:100%;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="Name">i dont know</div>
    <div class="Rankedkd">i dont know</div>
    <div class="Rankedmmr">i dont know</div>
    <div class="Rankedbar">
        <div class="Rankedbarin"></div>
    </div>
    <script>
    let name = document.querySelector('.Name');
    let rankedkd = document.querySelector('.Rankedkd');
    let rankedmmr = document.querySelector('.Rankedmmr');
        fetch(' https://r6.apitab.com/search/uplay/Sir.Charles.')
          .then((response) => {
            return response.json();
          })
          .then((data) => {
            console.log(data);
            const {kd,mmr} = data.players["179704b6-f18c-48c0-b789-56c38a9e2e8e"].ranked;
            name.textContent = data.requested;
            rankedkd.textContent = kd;
            rankedmmr.textContent = mmr;
            const WidthOfMmr = mmr / 10;
            document.querySelector('.Rankedbarin').style.width = "'%spx',WidthOfMmr";
            console.log('%spx',WidthOfMmr);
          });
    </script>
</body>

</html>

```