투표 애플리케이션 구축 - 인터랙티브 웹 개발 튜토리얼

소개

이 프로젝트에서는 사용자가 투표 옵션을 생성하고 관리하며, 필요에 따라 옵션을 삭제할 수 있는 투표 애플리케이션을 구축하는 방법을 배우게 됩니다. 또한, 이 애플리케이션은 다중 선택 지원 및 공개 투표 결과 기능을 포함합니다.

👀 미리보기

Voting app demo gif

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

투표 애플리케이션의 HTML 구조를 초기화하는 방법
새로운 투표 옵션을 추가하는 기능을 구현하는 방법
투표 옵션을 삭제하는 기능을 구현하는 방법
기능이 예상대로 작동하는지 확인하기 위해 애플리케이션을 테스트하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

투표 애플리케이션의 기본 HTML 구조 설정
JavaScript 를 사용하여 애플리케이션에서 투표 옵션을 동적으로 추가하고 제거
"옵션 추가" 버튼 및 삭제 아이콘 클릭과 같은 사용자 상호 작용 처리
요구 사항을 충족하는지 확인하기 위해 애플리케이션 테스트
HTML, CSS 및 JavaScript 를 사용하여 대화형 웹 애플리케이션 구축

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요:

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── css
|   ├── style.css
|   └── bootstrap.min.css
├── images
|   ├── x.svg
|   └── plus-square.svg
├── js
│   └── jquery.min.js
└── index.html

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 수동으로 새로 고쳐 페이지를 확인합니다.

unfinished project structure

옵션 추가 기능 구현

이 단계에서는 애플리케이션에 새로운 투표 옵션을 추가하는 기능을 구현합니다.

index.html 파일에서 파일 하단의 <script> 섹션을 찾습니다.
<script> 섹션 내에서 먼저 itemNumber와 renderList를 추가해야 하며, 추가된 코드는 다음과 같습니다:

let itemNumber = 2; // Default 2 data
let initRender = (txt) => {
  return `<div class="mb-3 row">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
         </div>
      </div>`;
};
// Render HTML with x (delete button) for data greater
let renderList = (txt) => {
  return `<div class="mb-3 row item">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
          </div>
          <div class="col-sm-1">
              <img class="del-icon" src="./images/x.svg" alt="">
          </div>
      </div> `;
};

이 함수들은 투표 옵션에 대한 HTML 구조를 생성하는 데 사용됩니다.

<script> 섹션에서 다음 코드 블록을 찾습니다:

$(
  (function () {
    // When initialising, the following two data appear without the delete symbol
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Click the plus sign
    $(".add").click(function () {
      // TODO: Complete the code here
    });
  })()
);

$(".add").click(function () { ... }) 블록 내에 다음 코드를 추가합니다:

$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
  let list = renderList(`Option${index + 1}`);
  $(".list").append(list);
}

이 코드는 기존 옵션을 지우고, itemNumber 변수를 증가시킨 다음, renderList 함수를 사용하여 새로운 옵션을 렌더링합니다.

이 코드가 있으면 사용자가 "옵션 추가" 버튼을 클릭할 때 새로운 투표 옵션이 목록에 추가됩니다.

삭제 기능 구현

이 단계에서는 애플리케이션에서 투표 옵션을 삭제하는 기능을 구현합니다.

index.html 파일의 <script> 섹션에서 다음 코드 블록을 찾습니다:

// Click the x Delete button, the delete icon will not be displayed if the list is less than 2 items
$(document).on("click", ".del-icon", function () {
  // TODO: Complete the code here
});

이 코드 블록 내에 다음 코드를 추가합니다:

$(".list").html("");
itemNumber--;
if (itemNumber <= 2) {
  for (let index = 0; index < itemNumber; index++) {
    let list = initRender(`Option${index + 1}`);
    $(".list").append(list);
  }
} else {
  for (let index = 0; index < itemNumber; index++) {
    let list = renderList(`Option${index + 1}`);
    $(".list").append(list);
  }
}

이 코드는 기존 옵션을 지우고, itemNumber 변수를 감소시킨 다음, 옵션 수에 따라 적절한 함수 (initRender 또는 renderList) 를 사용하여 나머지 옵션을 렌더링합니다.

이 코드가 있으면 사용자가 투표 옵션 옆의 "x" 아이콘을 클릭할 때 해당 옵션이 목록에서 제거됩니다.

애플리케이션 테스트

index.html 파일을 저장하고 브라우저에서 index.html 페이지를 새로 고칩니다.
초기 두 개의 투표 옵션이 삭제 아이콘 없이 표시되는지 확인합니다.
"옵션 추가" 버튼을 클릭하고 삭제 아이콘과 함께 새로운 투표 옵션이 목록에 추가되는지 확인합니다.
투표 옵션 중 하나 옆에 있는 삭제 아이콘을 클릭하고 해당 옵션이 목록에서 제거되는지 확인합니다.
투표 옵션을 추가하고 삭제하여 기능이 예상대로 작동하는지 확인하면서 애플리케이션을 계속 테스트합니다.

완성된 결과는 다음과 같습니다:

Voting app final result

축하합니다! 투표 애플리케이션의 구현을 완료했습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.