0

please can someone help me out here.

I am having a website where I use the ipsw.me API to display the latest iOS firmware IPSW files. I use the Javascript below to call the information from the API Json and display them as HTML.

My issue is the filesize is in the ' Bytes' and I will like to display it in GB.

I am not very good with JS and couldn't figure out how to do it. Please, can someone help me out here?

Below is the script I am using.

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");
}
function fetchData() {
fetch('https://api.ipsw.me/v2.1/iPhone9,4/latest/info.json')
  .then((response) => {
    return response.json();
  })
  .then(data => {
    console.log(data);
    const html = data
     .map(info => {
        return `
        <div class="ipsw-info">
        <table id='ipsw-tb'>
        <tbody>
        <tr>
          <td><span  class="ios-data">iDevice:</span></td> 
          <td>${info.device}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">Firmware Version:</span></td> 
          <td>${info.version}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">Firmware Identifier:</span></td> 
          <td>${info.identifier}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">Build ID:</span> </td>
          <td>${info.buildid}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">Released Date:</span></td>
          <td> ${info.releasedate}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">File MD5sum:</span> </td>
          <td><code>${info.md5sum}</code></td>
          </tr>
          <tr>
          <td><span  class="ios-data">File SHA1sum:</span> </td>
          <td><code>${info.sha1sum}</code></td>
          </tr>
          <tr>
          <td><span  class="ios-data">It's Signed IPSW:</span></td>
          <td> ${info.signed}</td>
          </tr>
          <tr>
          <td><span  class="ios-data">Size:</span></td>
          <td> ${info.size} Bytes</td>
       </tbody>
        </table>
        <center>
<div class='download-info'>
  <span class='file-icon'>IPSW</span>
  <span class='file-text'> ${info.filename}</span>
  <a class='button file-link' href='${info.url}' target='_blank'><i class='m-icon download'></i>Download</a>
</div>
</center>
<h3 style='color:blue; text-align:center'> Can't Download? Copy link from below, paste in a new tab to download</h3>
<input type="text" value="${info.url}" id="myInput">
<button class='button file-link' onclick="myFunction()" onmouseout="outFunc()"><span><svg width="24" height="24" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg></span>&nbsp;
  Copy URL
  </button>
 </di>
        `;  
     })
    .join();
    console.log(html);
    document.querySelector('#ipsw-info').insertAdjacentHTML('afterbegin', html);
  });
}
fetchData()
<!DOCTYPE html>
<head>
 <style>
  .ios-data{
      font-weight: bolder;
      font-size: 18px;
  }
  code {
    color: #e83e8c;
    word-break: break-word;
}
#myInput {
 width: 98%;
}
#ipsw-tb {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    border:1 px solod blue;
    width: 100%;
    background-color: #ffffff;
    color: black;
}
  </style> 
</head>
<bbody>
<div id="ipsw-info">

</div>
</bbody>
<script src="ispw.js"></script>
</html>
Mobiprox Man
  • 34
  • 4

0 Answers0