자바스크립트에서 JSON 데이터를 이용하여 투표 기능 생성하기

15 Sep 2023

javascript

투표 기능은 웹 애플리케이션에서 사용자들에게 선택의 기회를 제공하는 중요한 기능입니다. 이번 포스트에서는 자바스크립트와 JSON 데이터를 이용하여 간단한 투표 기능을 생성하는 방법을 알아보겠습니다.

1. JSON 데이터 준비하기

투표 기능을 구현하기 위해서는 투표 항목과 해당 항목의 투표 수를 저장하는 JSON 데이터가 필요합니다. 아래는 예시로 사용될 투표 데이터입니다.

{
  "프로그래밍 언어": [
    {"이름": "자바", "투표수": 0},
    {"이름": "파이썬", "투표수": 0},
    {"이름": "자바스크립트", "투표수": 0}
  ],
  "웹 프레임워크": [
    {"이름": "React", "투표수": 0},
    {"이름": "Angular", "투표수": 0},
    {"이름": "Vue", "투표수": 0}
  ]
}

위 데이터는 “프로그래밍 언어”와 “웹 프레임워크”라는 카테고리로 나뉘어진 투표 항목들을 포함하고 있습니다.

2. HTML 구조 생성하기

투표 기능을 보여주기 위해 HTML 구조를 생성해야 합니다. 아래는 각 카테고리와 항목들을 보여주는 간단한 HTML 구조입니다.

<div id="voting-app">
  <div class="category">
    <h3>프로그래밍 언어</h3>
    <ul id="programming-languages">
      <!-- 동적으로 생성될 투표 항목들 -->
    </ul>
  </div>
  <div class="category">
    <h3>웹 프레임워크</h3>
    <ul id="web-frameworks">
      <!-- 동적으로 생성될 투표 항목들 -->
    </ul>
  </div>
</div>

3. 자바스크립트로 투표 기능 구현하기

이제 자바스크립트를 사용하여 투표 기능을 구현해보겠습니다. 아래는 간단하게 작성한 예시 코드입니다.

// JSON 데이터 가져오기
const votingData = fetch('voting-data.json')
  .then(response => response.json())
  .then(data => {
    // 데이터를 기반으로 투표 항목 동적 생성하기
    const programmingLanguagesContainer = document.getElementById('programming-languages');
    const webFrameworksContainer = document.getElementById('web-frameworks');

    data['프로그래밍 언어'].forEach(item => {
      const li = document.createElement('li');
      const voteButton = document.createElement('button');
      voteButton.textContent = '투표하기';

      voteButton.addEventListener('click', () => {
        // 선택된 항목의 투표 수 증가
        item['투표수']++;
        // 투표 수 갱신
        li.textContent = `${item['이름']}: ${item['투표수']}표`;
      });

      li.appendChild(voteButton);
      programmingLanguagesContainer.appendChild(li);
    });

    data['웹 프레임워크'].forEach(item => {
      const li = document.createElement('li');
      const voteButton = document.createElement('button');
      voteButton.textContent = '투표하기';

      voteButton.addEventListener('click', () => {
        // 선택된 항목의 투표 수 증가
        item['투표수']++;
        // 투표 수 갱신
        li.textContent = `${item['이름']}: ${item['투표수']}표`;
      });

      li.appendChild(voteButton);
      webFrameworksContainer.appendChild(li);
    });
  });

위 코드는 먼저 JSON 데이터를 가져온 후, forEach 메소드를 활용하여 투표 항목들을 동적으로 생성합니다. 각 항목에는 “투표하기” 버튼이 있으며, 버튼 클릭 시 해당 항목의 투표 수가 증가하고 표시됩니다.

마무리

이번 포스트에서는 자바스크립트와 JSON 데이터를 이용하여 투표 기능을 생성하는 방법을 알아보았습니다. JSON 데이터를 활용하면 더 많은 항목의 투표 기능을 유연하게 구현할 수 있습니다. 코드를 적절하게 수정하고 스타일링을 추가하여 웹 애플리케이션에서 완전한 투표 기능을 구현해보세요.

#javascript #JSON #투표