📄

항목 (안혜수, 이상훈)

데이터 형태


const lists = [
	{
		key: 1
		value: '쉬운 난이도',
		checked: true,
		ratio: 12
	},
	{
		key: 2
		value: '중간 난이도',
		checked: false,
		ratio: 3
	},
	{
		key: 3
		value: '어려운 난이도',
		checked: false,
		ratio: 2
	},
]

let nextId = 4;

위와 같이 객체를 담은 배열 형태로 항목 목록을 관리함.

로컬 스토리지에 키 값은 list 로 저장.

비율에 관해서

룰렛의 전체 100%중 얼마나의 영역을 차지할지 계산하는 수식은 ((해당 항목의 비율 / (전체 비율의 합)) * 100

ex) 위 데이터 형태에서는

1번째 항목의 비율 = (12 / (12 + 3 + 2)) * 100 = 70.59% 2번째 항목의 비율 = (3 / (12 + 3 + 2)) * 100 = 17.65% 3번째 항목의 비율 = (2 / (12 + 3 + 2)) * 100 = 11.76%

항목 추가

항목 추가 버튼을 클릭하면 nextId 값이 증가하고, 해당 nextId 값을 key 로 가지는 새로운 데이터가 들어감.

또한 새로운 DOM 요소가 생성되고 data-key 속성으로 데이터의 key 값을 사용함.

항목, 비율 내용 수정

항목이나 비율의 input에서 포커싱이 해제되는 focus out 이벤트가 발생하면

lists 배열 데이터에서 해당 DOM 요소 항목의 data-key 속성을 key로 가진 객체의 value나 ratio 값을 변경함.

항목 삭제

X 아이콘이 클릭된 DOM 요소 항목의 data-key 속성을 가지고 lists 배열 데이터를 업데이트함.

체크박스

체크박스를 클릭하면 lists 배열 데이터에서 해당 DOM 요소 항목의 data-key 속성을 key로 가진 객체의 checked 값을 변경함.

역할 분담

이상훈: 항목 추가하면 DOM 객체 생성하는 부분 + 스크롤 CSS 부분 작성

안혜수: 체크박스 클릭, 인풋 focus out, 삭제버튼 클릭 등 실제 배열 데이터 값 업데이트 인풋 focus out할 때 실제 배열 데이터 값 업데이트하는 로직 작성

6월 15일 목요일에 개발한 기능 공유하기!