<!DOCTYPE html>
<html>

<head>
  <title>Classroom Attendance</title>
</head>

<body>
  <h1>Classroom Attendance</h1>
  <table align="center">
    <tr>
      <th><u>Student:</u></th>
      <th><u>Present:</u></th>
      <th><u>Absent:</u></th>
    </tr>
    <tr>
      <td>Student 1</td>
      <td>
      <label class="container">
        <input type="checkbox" id="present1" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not1" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
    <tr>
      <td>Student 2</td>
            <td>
      <label class="container">
        <input type="checkbox" id="present2" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not2" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
    <tr>
      <td>Student 3</td>
            <td>
      <label class="container">
        <input type="checkbox" id="present3" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not3" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
    <tr>
      <td>Student 4</td>
            <td>
      <label class="container">
        <input type="checkbox" id="present4" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not4" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
    <tr>
      <td>Student 5</td>
            <td>
      <label class="container">
        <input type="checkbox" id="present5" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not5" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
    <tr>
      <td>Student 6</td>
            <td>
      <label class="container">
        <input type="checkbox" id="present6" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
      <td>
      <label class="container">
        <input type="checkbox" id="not6" onclick="check(this.id)">
        <span class="checkmark"></span>
      </label>
      </td>
    </tr>
  </table>
  <button id="button">Submit</button>
  <h2 id="result"></h2>
</body>

</html>
body{
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  background-color: green;
  color: white;
}
table{
  border-spacing: 20px;
  text-align: center;
}
button{
  background-color: black;
  border: none;
  color: red;
  padding: 10px 25px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}
button:hover{
  cursor: pointer;
}
function check(name) {
  var isChecked = document.getElementById(name).checked;
  document.getElementById("result").innerHTML = "";
  if (isChecked) {
    var buttonType = name.substring(0, name.length - 1);
    var row = name.substring(name.length - 1);
    if (document.getElementById(otherType(buttonType) + row).checked) {
      document.getElementById(otherType(buttonType) + row).checked = false;
    }
  }
}

function otherType(type) {
  if (type == "present") {
    return "not";
  } else {
    return "present";
  }
}

document.getElementById("button").onclick = function() {
  if (!allChecked()) {
    document.getElementById("result").innerHTML = "Attendance is not completed";
  } else {
    var totalPresent = 0;
    for(var i = 1; i <= 6; i++){
      var presentCheck = document.getElementById("present" + i).checked;
      if(presentCheck){
        totalPresent++;
      }
    }
    document.getElementById("result").innerHTML = "Attendance Submitted! "+totalPresent+" out of 6 students are present";
  }
};

function allChecked() {
  //hardcoded
  for (var i = 1; i <= 6; i++) {
    var presentCheck = document.getElementById("present" + i).checked;
    var notCheck = document.getElementById("not" + i).checked;
    if (!presentCheck && !notCheck) {
      return false;
    }
  }
  return true;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.