[JS] 코드캠프-훈훈한 Javascript 섹션 5: loop 풀이

이 빈 화면에서 아래와 같은 loop가 출력될 수 있도록 하는 것이 섹션 5의 퀴즈이다. 

 

학생 정보는 data.js 에 담겨져있다.

const students = [
  {
    name: "김세준",
    korean: 88,
    math: 94,
    english: 78,
    science: 79,
  },
  {
    name: "최다슬",
    korean: 88,
    math: 92,
    english: 54,
    science: 65,
  },
  ...
];

export default students;

 

stage1.js에서는 korean, math, english, science의 점수를 평균내 새로운 속성 score로 넣어주는 것이다. 

export const calculateAverage = function (students) {
  const scoreAverage = [];

  for (let i = 0; i < students.length; i++) {
    const name = students[i].name;
    const score =
      students[i].korean +
      students[i].math +
      students[i].english +
      students[i].science;
    scoreAverage.push({ name: name, score: score / 4 });
  }

  return scoreAverage;
};

다음과 같이 4개의 항목을 더해주었고 그것을 /4 하여 평균을 내었다. 

 

stage2.js에서는 score를 등급기준에 맞춰 grade로 넣어주는 것이다.

export const designateGrade = function (students) {
  const score = calculateAverage(students);
  const scoreList = [];

  for (let i = 0; i < score.length; i++) {
    const name = score[i].name;

    const studentAvg = score[i].score;
    let grade = "";
    if (studentAvg >= 100 && studentAvg < 90) {
      grade = "A";
    } else if (studentAvg < 80) {
      grade = "B";
    } else if (studentAvg < 70) {
      grade = "C";
    } else if (studentAvg < 60) {
      grade = "D";
    } else {
      grade = "F";
    }

    scoreList.push({ name: name, grade: grade });
  }

  return scoreList;
};

이제 render.js에서 앞선 작업2번을 거친뒤 더해주면 다음과 같은 형태가 완성된다.

let divTemp = "";
  for (let i = 0; i < scoreList.length; i++) {
    divTemp += `
    <div class="student-container">
      <div class="name-container">
        <span class="student-name">이름 :</span>
        <span>${scoreList[i].name}</span>
      </div>
      <div class="grade-container">
        <span class="student-grade">등급 :</span>
        <span>${scoreList[i].grade}</span>
      </div>
    </div>`;
  }

  container.innerHTML += divTemp;

 

처음에 보면 막막할 수 있지만 적힌 설명을 토대로 차근차근 진행하였더니 완성되었다. 

더 자세한 코드는 github에 올려놓았다.

https://github.com/heehminh/JS-Web-Study/tree/main/Loop

GitHub - heehminh/JS-Web-Study