I am having problems with a javascript code, as there is an innerHTML and it is giving me a different width than the one I have in my css and bootstrap rules.
This is my javascript code:
let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')
// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();
// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
// let cotacaoDolar = JSON.parse(request.response);
// let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// codigo acima funciona, entender Promise e then para criar let real
let dolar = {
Spotify: 0.00437,
Deezer: 0.0064,
Amazon: 0.00402,
Apple: 0.00783,
Ytmusic: 0.008,
Tidal: 0.01284,
Yt: 0.00087,
};
let divisaoReais = 5.37;
let real = { // fonte: geniusbrasil na pasta
Spotify: dolar.Spotify*divisaoReais,
Deezer: dolar.Deezer*divisaoReais,
Amazon: dolar.Amazon*divisaoReais,
Apple: dolar.Apple*divisaoReais,
Ytmusic: dolar.Ytmusic*divisaoReais,
Tidal: dolar.Tidal*divisaoReais,
Yt: dolar.Yt*divisaoReais,
};
// let real = {
// Spotify: 0.00193,
// Deezer: 0.00195,
// Amazon: 0.00754,
// Apple: 0.00546,
// Ytmusic: 0.006, // falta verificar esse valor
// Tidal: 0.00604,
// Yt: 0.00045,
// };
function calc() {
if (numeroStreams.value > 0) {
res.innerHTML = `<div class="row no-gutters" id="stores-container">
<div class="col">
<div class="row voffset-md">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-spotify voffset-clear-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/spotify_logo.png" class="img-fluid img-protected logo-cal-style mg-sm float-sm-none" alt="spotify_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Spotify
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Spotify).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-deezer voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/deezer-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="deezer_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Deezer
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platform-amazon voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="amazon_music_logo">
</div>
</div>
<div class="align-self-center stores-cal-info col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Amazon Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-apple voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Apple Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-ytmusic voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-6">
<h2 class="mg-clear cal-store-style">
Youtube Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tidal voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tidal_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tidal_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Tidal
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-soundcloud voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="soundcloud_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
SoundCloud
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Soundcloud).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tiktok voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tiktok_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
TikTok
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.TikTok).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-youtube voffset-sm">
<div class="col-lg-6 align-self-center col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_logo">
</div>
</div>
<div class="col-lg-6 align-self-center col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Youtube
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
</div>
</div>
</div>
</div>
</div>
</div>`
} else {
window.alert('Estimated streams number cannot be blank.')
}
}
And the end result should look like this:
But instead this is what is happening
I am leaving you the page where I have implemented this application,
https://fwdmusic.com/royalties-calculator/
I would be very grateful for your help.
Thanks a lot in advance.
>Solution :
It’s not about your JS generated HTML. It’s about your class you set above .form-group.
Change yellow marked HTML class from col-lg-4 offset-lg-4 col-md-4 offset-md-4 to col-md-12.
Update: Found a better solution. I saw you’re using class row no-gutter 2 times in a row. Delete the first one class row no-gutter as shown in image and you will be good. Also, don’t implement my previous solution as this breaks your form width to full-width.
