우아한테크코스 3기 프리코스 최종 미션(8) - View-ResultView.js

class ResultView

InputView에서 입력 받은 데이터를 MainController에서 원하는 형태로 데이터를 바꾸어 ResultView에 전달한다.

//MainController.js
  onSubmit(input_info) {
   /* 
     ...
   */

    this.ResultView.render({
      result: result.join(" ▶︎ "),
      option: option === "distance" ? "최단거리" : "최소시간",
      ...this.getTotalDistanceAndTime([...result]),
    });
  }

 

테이블 표 구현

import View from "./View.js";

export default class ResultView extends View {
  constructor() {
    super();
    this.tag = "[ResultView]";
  }

  setup(el) {
    this.init(el);
    return this;
  }

  render(result_info) {
    console.log(this.tag, "render()", result_info);
    this.el.append(this.resultRender(result_info));
  }

  resultRender(result_info) {
    const resultDiv = document.createElement("div");
    resultDiv.setAttribute("id", "result__div");
    resultDiv.innerHTML = this.resultHTML(result_info);
    return resultDiv;
  }

  resultHTML(result_info) {
    return `
        <h2>📃 결과 </h2>
        <h3>${result_info.option}</h3>
        ${this.tableHTML(result_info)}
    `;
  }

  tableHTML(result_info) {
    return `
    <table>
        <thead>
            <th>총 거리</th>
            <th>총 소요 시간</th>
        </thead>
        <tbody>
            <tr>
                <td>${result_info.totalDistance}km</td>
                <td>${result_info.totalTime}분</td>
            </tr>
            <tr>
                <td colspan="2">${result_info.result}</td>
            </tr>
        </tbody>
    </table>
      `;
  }
}

화면 스타일 CSS src/styles/global.css

테이블의 테두리 설정

화면의 div 태그 간격 설정

form div {
  margin-bottom: 10px;
}

table,
td,
th,
tr {
  border: 1px solid #444444;
  text-align: center;
}

 

결과 화면 초기화

결과화면이 반복적으로 겹쳐서 출력되는 것을 막기 위해 전에 있던 결과 화면을 지우고 다시 초기화 시키기

  render(result_info) {
    console.log(this.tag, "render()", result_info);
    this.resultReset();
    this.el.append(this.resultRender(result_info));
  }

  resultReset() {
    const removeElement = document.querySelector("#result__div");

    if (removeElement !== null) {
      removeElement.remove();
    }
  }

github.com/intae92/woowacourse-precourse/commit/f935a524da2a2425d3dddac167351a0bfef8b9bd

feat: result 화면 초기화 · intae92/woowacourse-precourse@f935a52