[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기

* 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다.

---

20년도 지방기능경기대회에서 javascript를 연습하기 좋은 기회라는 정보를 알게 되어 한번 풀어보았다.

https://meister.hrdkorea.or.kr/sub/3/6/4/informationSquare/enforceData.do

시행자료 및 공개과제

 

간략하게 요약하자면 스토어 페이지를 만드는것으로 사용자가 리스트를 검색하고 장바구니에 담기 또는 드래그하여 상품을 추가하고 합산한 금액을 보여주고 정보를 입력하면 영수증을 띄우는 간단한 페이지를 만드는 것이다.

 

 

 

▲ 화면은 간단하게 상단의 검색기능, 중앙에는 상품리스트와 장바구니 하단에는 가격과 구매버튼을 배치하였다.

 

보다 나은 디자인을 위해 bootstrap을 사용하였고, javascript를 편하게 다루기 위해 jquery를 사용하였다.

 

 

<nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
       <a class="navbar-brand" href="#">경호's SHOP</a>
     </div>
</nav>
<input type="text" class="input" placeholder="검색어입력" />
    
 <!-- 상품 리스트 박스 -->
 <div class="row"></div>

 <div class="drag-form">
   <h5>장바구니 (이곳에 상품을 넣어주세요.)</h5>
   <div
     class="drag-point"
     id="div1"
     ondrop="drop(event)" 
     ondragover="allowDrop(event)"
   >
   </div>
 </div>
 <div class="result-form">
   <h5>최종가격</h5>
   <p>합계 <span class="result_form_price">0</span></p>
   <button id="buy_btn" class="btn btn-primary">구매하기</button>
 </div>

▲ html을 사용하여 화면을 간략하게 작성하였다. 

 

// 드래그 받는곳
      function allowDrop(ev) {
        ev.preventDefault();
      }

▲ 이벤트가 작동하지 못하도록 막아준다.

 

<div class="black-bg">
   <div class="white-bg">
       <div class="my-3">
         <h3>성함</h3>
         <input type="text" class="form-control" id="email" />
       </div>
       <div class="my-3">
         <h3>주소</h3>
         <input type="text" class="form-control" id="adress" />
       </div>
       <button type="button" class="btn btn-primary" id="submit-btn">
         입력완료
       </button>
       <button type="button" class="btn btn-danger" id="close">닫기</button>
   </div>
 </div>

▲구매하기 버튼을 눌렀을 때의 모달창에 관한 html

 

<div class="canvas-bg">
   <div class="canvas-in-bg">
     <canvas id="canvas" width="800" height="350"></canvas>
   </div>
 </div>

▲영수증을 표시하기 위한 canvas html

 

 

html을 간략하게 보여주었고 기능에 관한 얘기를 이어서 하려고한다.

 

 

 

 

2에서 계속...