// ------------display Data set Common Funciton--------------
function displayData(serial, cardName, calculate) {

  const container = document.getElementById("table-container");
  const tr = document.createElement("tr");
  tr.innerHTML = `
      <td>${serial}</td>
      <td>${cardName}</td>
      <td>${calculate} cm<sup>2</sup></td>
      <td>
      <button class="Calculate_btn_tow hover:bg-sky-700">Convert to m<sup>2</sup></button>
      </td>
      
    `;
  container.appendChild(tr);
}

// ------------get random color and Set random Color----------
function getRandomColor() {

  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  const hex = '#' + r.toString(16) + g.toString(16) + b.toString(16);
  return hex;
}

const allGeometry = document.getElementsByClassName('hover_color');

for (const item of allGeometry) {
  item.addEventListener('mouseenter', function () {
    item.style.backgroundColor = getRandomColor();
    item.style.transition = 'all ease 1s';
  });
}

function getDataDetails(id1, id2, id3) {
  const cardName = document.getElementById(id1).innerText;
  const cardInputB = document.getElementById(id2).value;
  const cardInputH = document.getElementById(id3).value;

  const cd = {
    cardName: cardName,
    cardInputB: cardInputB,
    cardInputH: cardInputH
  }
  return cd;
}