과제-성적계산 홈페이지 만들기

성적계산 홈페이지 만들기

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./scit45_오전_김다희.js"></script>
    <link rel="Stylesheet" href="./scit45_오전_김다희.css" />
  </head>
  <body>
    <div id="frame">
      <header>
        <h1>[ 종합 평가 점수]</h1>
      </header>
      <main>
        <table>
          <tr>
            <td>1.</td>
            <td id="td">Java Fundamental:</td>
            <td>
              <input type="text" id="inpu1" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>2.</td>
            <td>Oracle Database:</td>
            <td>
              <input type="text" id="inpu2" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>3.</td>
            <td>HTML,CSS:</td>
            <td>
              <input type="text" id="inpu3" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>4.</td>
            <td>JavaScript:</td>
            <td>
              <input type="text" id="inpu4" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>5.</td>
            <td>basic Test:</td>
            <td>
              <input type="text" id="inpu5" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>6.</td>
            <td>Team Project:</td>
            <td>
              <input type="text" id="inpu6" class="input" placeholder="0" />
            </td>
            <td>점</td>
          </tr>
          <tr>
            <td>7.</td>
            <td>출석률:</td>
            <td>
              <input type="text" id="inpu7" class="input" placeholder="0" />
            </td>
            <td>%</td>
          </tr>
        </table>
        <input type="button" value="최종결과 확인" id="btn" onclick="final()" />
        <h4>
          ※ 각 과목은 10%, 기초 평가 및 팀프로젝트는 각 20%, 출석률 20%로 총
          100%로 점수 환산함
        </h4>

        <footer class="footer">
          <h2># 최종결과:</h2>
          <div id="test"></div>
        </footer>
      </main>
    </div>
  </body>
</html>

css

body {
  background: linear-gradient(rgb(232, 225, 225), rgb(38, 38, 92));
}
#frame {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  padding: 5px;
}
h1 {
  margin: 0px;
  height: 50px;
  text-align: center;
  background-color: rgb(66, 66, 162);
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
main {
  width: 100%;
  height: 800px;
  padding-top: 10px;
}
table {
  margin: 0 auto;
}
td {
  width: 100px;
}
#td {
  width: 200px;
}
h4 {
  text-align: center;
}
#btn {
  border: 0px blue;
  display: flex;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
}
h2 {
  text-align: center;
}
.footer {
  display: none;
}
#test {
  text-align: center;
}
input {
  text-align: right;
}

window.onload = function () {
  let arrs = document.querySelectorAll(".input");

  arrs.forEach((arr, index) => {
    arr.addEventListener("keyup", function () {
      if (100 < arr.value || arr.value < 0 || isNaN(arr.value)) {
        alert("숫자만 입력하세요");
        arr.value = null;
        return;
      }
    });
  });
};
function final() {
  let final = document.querySelector(".footer");
  final.classList.remove("footer");
  let test = document.querySelector("#test");
  let arrs = document.querySelectorAll(".input");

  let sum = 0;
  let nums = [];
  for (var i = 0; i < 7; i++) {
    if (i <= 3) {
      nums.push(arrs[i].value * 0.1);
    } else if (i > 3) {
      nums.push(arrs[i].value * 0.2);
    }
  }
  nums.forEach((num, index) => {
    sum += num;
  });

  // let num1 = arrs[0].value * 0.1;
  // let num2 = arrs[1].value * 0.1;
  // let num3 = arrs[2].value * 0.1;
  // let num4 = arrs[3].value * 0.1;
  // let num5 = arrs[4].value * 0.2;
  // let num6 = arrs[5].value * 0.2;
  // let num7 = arrs[6].value * 0.2;
  // let num = num1 + num2 + num3 + num4 + num5 + num6 + num7;

  arrs.forEach((arrs, index) => {
    if (arrs.value == "" || arrs.value == null) {
      sum = 0;
    }
  });
  test.innerHTML = "종합평가 점수: " + sum;
}