Question 238354 in Html Question posted in
Some basic documentation can be found here.

Html – I need to modify this code to make it responsive to smartphones screens

I have an issue; I’m using a code for a calculator on a website, this code consists of two tables, the upper one for users to insert values and calculate, the lower one just to show a detailed scoresheet for the calculation.

This code is working perfectly without any problems while viewed from PCs, but in smartphones; the upper table that contains fields for users to insert values is not responsive to screen size, I find myself have to scroll it horizontally to be able to access all fields of the table. The lower table is just fine without problems on smartphones screens.

I think the problem is within the fields for values to be entered by users in the upper table, it is so wide unnessessarly and I think it is not responsive to smaller screens.

I need help modifying this code to be fully responsive to smartphones screens.

Thanks

The Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GPA Calculator</title>
<style>
  .calculator-container {
    border: 2px solid #333;
    padding: 20px;
    border-radius: 10px;
    max-width: 768px; /* Limit width on larger screens */
    margin: 0 auto; /* Center horizontally */
  }
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }

  @media (max-width: 768px) {
    .calculator-container {
      padding: 10px;
      max-width: 90%; /* Adjust width to fit smaller screens */
    }

    table {
      width: 100%;
    }

    th, td {
      text-align: center;
      padding: 6px;
      font-size: 12px; /* Adjust font size */
    }

    th {
      background-color: #f2f2f2;
    }

    td {
      border: 1px solid black;
    }

    td:before {
      display: none; /* Hide labels on small screens */
    }
  }
</style>
</head>
<body>
<div class="calculator-container">
  <h1>GPA Calculator</h1>
  <table>
    <thead>
      <tr>
        <th>Course Name</th>
        <th>Credit Hours</th>
        <th>Grade</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="courseTable">
      <tr>
        <td><input type="text" required></td>
        <td><input type="number" value="1" min="1" required></td>
        <td>
          <select>
            <option value="4.0">A</option>
            <option value="3.7">A-</option>
            <option value="3.3">B+</option>
            <option value="3.0">B</option>
            <option value="2.7">B-</option>
            <option value="2.3">C+</option>
            <option value="2.0">C</option>
            <option value="1.7">C-</option>
            <option value="1.0">D</option>
            <option value="0.0">F</option>
          </select>
        </td>
        <td></td>
      </tr>
    </tbody>
  </table>

  <button id="addCourseButton">Add Course</button>
  <button id="calculateButton">Calculate GPA</button>

  <h2 id="gpaContainer" style="display: none;">GPA: <span id="gpa">0.00</span></h2>

  <h2>Score Sheet</h2>
  <table id="scoreSheet">
    <thead>
      <tr>
        <th>Course Name</th>
        <th>Credit Hours</th>
        <th>Grade</th>
        <th>Course Points</th>
      </tr>
    </thead>
    <tbody id="scoreSheetBody">
    </tbody>
  </table>
</div>

<script>
  const courseTable = document.getElementById("courseTable");
  const addCourseButton = document.getElementById("addCourseButton");
  const calculateButton = document.getElementById("calculateButton");
  const gpaContainer = document.getElementById("gpaContainer");
  const gpaElement = document.getElementById("gpa");
  const scoreSheetBody = document.getElementById("scoreSheetBody");

  function updateGPA() {
    const rows = courseTable.getElementsByTagName("tr");
    let totalGradePoints = 0;
    let totalCredits = 0;

    scoreSheetBody.innerHTML = ''; // Clear existing score sheet

    for (let i = 0; i < rows.length; i++) {
      const row = rows[i];
      const courseName = row.cells[0].getElementsByTagName("input")[0].value;
      const creditHours = parseInt(row.cells[1].getElementsByTagName("input")[0].value);
      const grade = parseFloat(row.cells[2].getElementsByTagName("select")[0].value);
      const gradePoints = grade * creditHours;
      totalGradePoints += gradePoints;
      totalCredits += creditHours;

      // Add row to score sheet
      const scoreSheetRow = document.createElement("tr");
      scoreSheetRow.innerHTML = `
        <td>${courseName}</td>
        <td>${creditHours}</td>
        <td>${grade}</td>
        <td>${gradePoints.toFixed(2)}</td>
      `;
      scoreSheetBody.appendChild(scoreSheetRow);
    }

    const gpa = totalCredits !== 0 ? totalGradePoints / totalCredits : 0;
    gpaElement.textContent = gpa.toFixed(2);
    gpaContainer.style.display = "block"; // Show GPA container
  }

  function addCourse() {
    const newRow = document.createElement("tr");
    newRow.innerHTML = `
      <td><input type="text" required></td>
      <td><input type="number" value="1" min="1" required></td>
      <td>
        <select>
          <option value="4.0">A</option>
          <option value="3.7">A-</option>
          <option value="3.3">B+</option>
          <option value="3.0">B</option>
          <option value="2.7">B-</option>
          <option value="2.3">C+</option>
          <option value="2.0">C</option>
          <option value="1.7">C-</option>
          <option value="1.0">D</option>
          <option value="0.0">F</option>
        </select>
      </td>
      <td><button type="button" onclick="removeCourse(this.parentNode.parentNode)">Remove</button></td>
    `;

    courseTable.appendChild(newRow);
  }

  function removeCourse(row) {
    courseTable.removeChild(row);
    updateGPA();
  }

  addCourseButton.addEventListener("click", addCourse);
  calculateButton.addEventListener("click", updateGPA);
</script>
</body>
</html>

All details are written above.

Tags:

2

Answers


  1. 0

    The problem you’re facing is because of the inputs inside of the upper field
    Since you haven’t set their width, it doesn’t change when you change the size of your screen

    If you set their width in percentage, it will be perfectly responsive, you can do this like this:

    First, in html I will add a class to the inputs:

     <td><input type="text" class="input" required></td>
 <td><input type="number" value="1" min="1" class="input" required></td>

    And then I set the width in CSS:

    .input {
  width: 80%;
}

    Note that the width can be your desired value but it should be in percentage so that it changes based on its parent’s width

    Let me if there is any problem implementing this

    Login or Signup to reply.
  2. 0

    Add this code to your styles:

    input {
    display: block;
    width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search