HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생/
😃
이재호팀/
🎯
룰렛 만들기 토이프로젝트 /환경설정 회의/
🌀
원판 (김다은, 이현준)
🌀

원판 (김다은, 이현준)

  • CSS가 많이 들어가는 부분 (애니메이션 등)
  • 값받아와서 비율정하기
  • 스타트버튼 눌렀을때 돌아가는 모션 넣기
  • 색깔넣기
  • 결과 내역
어떻게 분담하면 좋을지 아이디어
이현준 HTML , CSS 완성 후
  1. 색깔 자동적으로 나뉘는것 (인덱스 색깔 정하기)
  1. 룰렛 돌아가는 애니메이션
  1. 결과 추출
 
김다은
자바스크립트 :
  1. 값받아와서 비율설정해서 화면에 띄우는 정도
  1. start 버튼 누르면 랜덤메서드를 통해서 결과 나오고 ⇒ 애니메이션 돌리기
  1. 원판 색깔 채우기
 
 
 
최종적으로
 
역할 1 (이현준)
  1. 데이터 비율 나누기
  1. 체크박스 룰렛 숨겨지기
  1. 결과 추출
 
역할2 (김다은) ⇒ 수요일까지
HTML , CSS 틀 완성한 후
  1. 색깔 자동적으로 나뉘는것 (인덱스 색깔 정하기)
  1. 룰렛 돌아가는 애니메이션 (start 버튼 누르면 랜덤메서드를 통해서 결과 나오고)
  1. svg파일 컴포넌트화 시키기이ㅣ
[JS] 룰렛 구현하기
JavaScript와 캔버스(Canvas)를 사용하여 룰렛을 구현해보았습니다. 코드 See the Pen Canvas Roulette by hyukson (@hyukson) on CodePen. 코드 풀이 const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); // 룰렛에 들어갈 항목 const product = [ "떡볶이", '돈가스', "초밥", "피자", "냉면", "치킨", '족발', "피자", "삼겹살", ]; // 각 항목에 해당하는 색상 const colors = [ "#dc0936", "#e6471d", "#f7a416", "#efe61f ", "#60b236", "#209b6c", "#169ed8", "..
[JS] 룰렛 구현하기
https://gurtn.tistory.com/180
[JS] 룰렛 구현하기
 

룰렛 결과 값

result =[’쉬운 난이도’ , ‘중간 난이도’]와 같이 배열 형태로 넘겨드리기!