기록

*60일차 실습 본문

학원/실습

*60일차 실습

pringspring 2022. 4. 21. 13:53

주어진 데이터를 사용해 메뉴테이블을 작성하세요
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@실습문제 - 상속 - 메뉴</title>
  <style>
  table {border:1px solid black; border-collapse:collapse; margin: 10px 0;}
  th, td {border:1px solid black; text-align:center; padding: 5px;}
  th:nth-of-type(2) {width: 200px;}
  </style>
</head>
<body onload="init();">
  <h1>@실습문제 - 상속 - 메뉴</h1>
  <h2>메뉴</h2>
  <table id="menu-food">
    <caption><h3>식사메뉴</h3></caption>
    <thead>
      <tr>
          <th>번호</th>
          <th>메뉴명</th>
          <th>가격</th>
          <th>타입</th>
      </tr>
  </thead>
  <tbody></tbody>
  </table>
  
  <table id="menu-drink">
    <caption><h3>음료메뉴</h3></caption>
    <thead>
      <tr>
          <th>번호</th>
          <th>메뉴명</th>
          <th>가격</th>
          <th>성인인증</th><!-- input:checkbox로 처리할 것-->
      </tr>
  </thead>
  <tbody></tbody>
  </table>
  <script>
 
  /**
   * 다음 데이터를 처리하기 위한 class를 작성하세요
   * (Food와 Drink의 부모클래스 Menu 설계할 것)
   * 
   * Food - id:string, name:string, price:number, type:string
   * Drink - id:string, name:string, price:number, adultOnly:boolean
   */
  const menuData = {
    foodMenu : [
      new Food('food101','잡채밥', 8000, '밥'),
      new Food('food102','김치찌게', 7500, '밥'),
      new Food('food103','로제파스타', 9000, '면'),
      new Food('food104','돌솥비빔밥', 8000, '밥'),
      new Food('food105','짬뽕', 9000, '면'),
    ],
    drinkMenu : [
      new Drink('drink201','생수', 1000, false),
      new Drink('drink202','오렌지쥬스', 2500, false),
      new Drink('drink203','사이다', 2000, false),
      new Drink('drink204','생맥주 500cc', 4000, true),
      new Drink('drink205','소주', 4000, true),
    ]
  };
  const init = () => {

  };
  </script>

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@실습문제 - 상속 - 메뉴</title>
  <style>
  table {border:1px solid black; border-collapse:collapse; margin: 10px 0;}
  th, td {border:1px solid black; text-align:center; padding: 5px;}
  th:nth-of-type(2) {width: 200px;}
  </style>
</head>
<body onload="init();"> <!-- 페이지 로딩이 끝나면 load이벤트발생 - init함수 호출 -->
  <h1>@실습문제 - 상속 - 메뉴</h1>
  <h2>메뉴</h2>
  <table id="menu-food">
    <caption><h3>식사메뉴</h3></caption>
    <thead>
      <tr>
          <th>번호</th>
          <th>메뉴명</th>
          <th>가격</th>
          <th>타입</th>
      </tr>
  </thead>
  <tbody></tbody>
  </table>
  
  <table id="menu-drink">
    <caption><h3>음료메뉴</h3></caption>
    <thead>
      <tr>
          <th>번호</th>
          <th>메뉴명</th>
          <th>가격</th>
          <th>성인인증</th><!-- input:checkbox로 처리할 것-->
      </tr>
  </thead>
  <tbody></tbody>
  </table>
  <script>
  const init = () => {
    console.log('init : 페이지로딩 완료!');

    // 렌더
    foodMenuRender(menuData);
    drinkMenuRender(menuData);
  };

  const foodMenuRender = ({foodMenu}) => {
    const tbody = document.querySelector("table#menu-food tbody");
    tbody.innerHTML = foodMenu.reduce((html, food, index) => {
      const {id, name, price, type} = food;
      console.log(food);
      return html + `<tr>
        <td>${index + 1}</td>
        <td>${name}</td>
        <td>${price}</td>
        <td>${type}</td>
      </tr>`;
    }, "");
  };
  const drinkMenuRender = ({drinkMenu}) => {
    const tbody = document.querySelector("table#menu-drink tbody");
    tbody.innerHTML = drinkMenu.reduce((html, drink, index) => {
      const {id, name, price, adultOnly} = drink;
      console.log(drink);
      return html + `<tr>
        <td>${index + 1}</td>
        <td>${name}</td>
        <td>${price}</td>
        <td><input type='checkbox' onclick='return false;' ${adultOnly ? 'checked' : ''}/></td>
      </tr>`;
    }, "");
  };


  class Menu {
    constructor(id, name, price){
      this.id = id;
      this.name = name;
      this.price = price;
    }
    toString(){
      return `id = ${this.id}, name = ${this.name}, price = ${this.price}`;
    }
  }

  class Food extends Menu {
    constructor(id, name, price, type){
      super(id, name, price);
      this.type = type;
    }
    toString(){
      return `${super.toString()}, type = ${this.type}`;
    }
  }

  class Drink extends Menu {
    constructor(id, name, price, adultOnly){
      super(id, name, price);
      this.adultOnly = adultOnly;
    }
    toString(){
      return `${super.toString()}, adultOnly = ${this.adultOnly}`;
    }
  }

 
  /**
   * 다음 데이터를 처리하기 위한 class를 작성하세요
   * (Food와 Drink의 부모클래스 Menu 설계할 것)
   * 
   * Food - id:string, name:string, price:number, type:string
   * Drink - id:string, name:string, price:number, adultOnly:boolean
   */
  const menuData = {
    foodMenu : [
      new Food('food101','잡채밥', 8000, '밥'),
      new Food('food102','김치찌게', 7500, '밥'),
      new Food('food103','로제파스타', 9000, '면'),
      new Food('food104','돌솥비빔밥', 8000, '밥'),
      new Food('food105','짬뽕', 9000, '면'),
    ],
    drinkMenu : [
      new Drink('drink201','생수', 1000, false),
      new Drink('drink202','오렌지쥬스', 2500, false),
      new Drink('drink203','사이다', 2000, false),
      new Drink('drink204','생맥주 500cc', 4000, true),
      new Drink('drink205','소주', 4000, true),
    ]
  };
  
  </script>



</body>
</html>

'학원 > 실습' 카테고리의 다른 글

*64일차 실습  (0) 2022.04.27
*63일차 실습  (0) 2022.04.26
*59일차 실습  (0) 2022.04.20
*58일차 실습  (0) 2022.04.19
*57일차 실습  (0) 2022.04.18
'학원/실습' Related Articles more