Javascript Convert Rank + Calculate score

 

 <article>
    <h2>점 수 계 산 기</h2>
    <ul>
     <form class="menu_btn">
        <li>  <input type="button" value="총점" onclick="totalRank()"></li>
        <li> <input type="button" value="평균" onclick="avgRank()"></li>
        <li> <input type="button" value="최소" onclick="minRank()"></li>
        <li> <input type="button" value="최대" onclick="maxRank()"></li>
        <li><input type="button" value="낙제" onclick="failRank()"></li>
        <li><input type="button" value="만점" onclick="perfectRank()"></li>
        <li><button type="button" name="button" onclick="convertRank()">변환</button></li>
      </form>
    </ul>

    <form name="someTestForm" action="index.html" method="POST">
      <p><label>수학 점수 : <input type="number"  class= "score" name="m" value="70"></label></p>
      <p><label>영어 점수 : <input type="number"  class= "score" name="e" value="90"></label></p>
      <p><label>화학 점수 : <input type="number"  class= "score" name="c" value="100"></label></p>
      <p><label>국사 점수 : <input type="number"  class= "score"  name="h" value="30"></label></p>
      <p><label>국어 점수 : <input type="number"  class= "score"  name="k" value="70"></label></p>
      <p><label>총 점수 : <input type="number" name="total" value="0"></label></p>
      <p><label>평균 점수 : <input type="number" name="avg" value="0"></label></p>
      <p><label>최소 점수 : <input type="number" name="min" value="0"></label></p>
      <p><label>최대 점수 : <input type="number" name="max" value="0"></label></p>
      <p><label>낙제 유무 : <input type="number" name="is_f" value="0"></label><br><sub>(낙제 : 50점 미만 과목)</sub></p>
      <p><label>만점 유무 : <input type="number" name="is_ten" value="0"></label></p>
      <p><input type="reset"></p>
    </form>
    <script>
      const form = document.forms["someTestForm"];
      // console.log(form[0]) <input type="number" name="m" value="70">
      // console.log(form[0].value)
      const rank = document.querySelectorAll('[type="number"].score');
      const rankList = Array.from(rank);
      // console.log(rankList);
      // domList를 새로운 배열로 바꾸는 방법
      // Array.from()
      const total = document.querySelector("[name='total']");
      const avg = document.querySelector("[name='avg']");
      const min = document.querySelector("[name='min']");
      const max = document.querySelector("[name='max']");
      const is_f = document.querySelector("[name='is_f']");
      const is_ten = document.querySelector("[name='is_ten']");

      // console.log(rank[0]); <input type="number" name="m" value="70">

      function totalRank() {
        let sum = 0;
        rank.forEach((val) => {
         sum += Number(val.value);
        })
        total.value = sum;
      }

      function avgRank() {
        let sum = 0;
        let avgScore  = 0;
        rank.forEach((val) => {
         sum += Number(val.value);
        })
        avgScore = sum / rank.length;
        avg.value = avgScore;
      }

      function minRank() {
        let tempMin = Infinity;
        rank.forEach((val) => {
          // console.log(Number(val.value))
          if(tempMin > Number(val.value)) {
            tempMin =  Number(val.value)
          }
         })
         min.value = tempMin;
        }

      function maxRank() {
        let tempMax = -Infinity;
        rank.forEach((val) => {
          // console.log(Number(val.value))
          if(tempMax < Number(val.value)) {
            tempMax =  Number(val.value)
          }
         })
         max.value = tempMax;
        }

      function failRank() {
        // 낙제 과목 개수 표시 코드
        // let count = 0
        // rank.forEach((val) => {
        //   if(Number(val.value) < 50) {
        //     count +=1;
        //   }
        // })
        // is_f.value = count;

        let failResult = true;
        rankList.every((val) => {
          if(Number(val.value) < 50) {
            failResult = false;
          }
        })
        is_f.value = Number(failResult);
        }

        function perfectRank() {
        // 만점 과목 개수 표시 코드
        // let count = 0
        // rank.forEach((val) => {
        //   if(Number(val.value) === 100) {
        //     count +=1;
        //   }
        // })
        // is_ten.value = count;

        let perfectRank = false;
         rankList.some((val) => {
          if(Number(val.value) === 100) {
            perfectRank = true;
          }
          is_ten.value = Number(perfectRank);
        })
        }

        function convertRank() {
        let convertScore = [];
        rank.forEach((val, i) => {
          convertScore[i] = (Number(val.value) * 0.045).toFixed(2)
          // Number.toFixed(x) : 숫자를 고정 소수점 표기법으로 표기해서 반환
        })

        convertScore.forEach((val, i ) => {
          form[i].value = convertScore[i] ;
        })
        }






    
    </script>
  </article>