TIL

(React_9기)사전캠프 4주차 - 토

ImJaeOne 2024. 12. 14. 18:22

오늘은 팀프로젝트 전에 🎲로또 번호 생성기 과제를 한 번 해봤습니다...!

 

1. 로또 번호 생성 함수

function generateLottoNumbers() {
    let arr = [];
    for (i = 0; i < 6; i++) {
        let num = Math.floor(Math.random() * 45 + 1); // 1~45 사이의 랜덤값 생성
        while (arr.includes(num)) { // 중복 체크
            num = Math.floor(Math.random() * 45 + 1);
        }
        arr.push(num); // 배열에 추가
    }
    arr = arr.sort((a, b) => a - b); // 오름차순 정렬
    return arr;
}
  • Math.random()으로 난수를 생성해 Math.floor()로 정수화합니다.
  • while문으로 중복된 숫자를 걸러내며 배열에 추가합니다.

 

2. 번호 색상 지정 함수

function ballColor(num) {
    let number = Number(num);
    if (number >= 1 && number <= 10) {
        return `<div class='yellow ball'>${num}</div>`;
    } else if (number > 10 && number <= 20) {
        return `<div class='blue ball'>${num}</div>`;
    } else if (number > 20 && number <= 30) {
        return `<div class='red ball'>${num}</div>`;
    } else if (number > 30 && number <= 40) {
        return `<div class='black ball'>${num}</div>`;
    } else if (number > 40 && number <= 45) {
        return `<div class='green ball'>${num}</div>`;
    }
}
  • 번호 구간별로 HTML 태그에 클래스와 색상을 지정합니다.

 

기록에 날짜를 추가하고 기록 업데이트 하는 부분은 저번과 같이 구현했습니다.

 

(React_9기)사전캠프 4주차 - 월

오늘은 제이쿼리를 사용해 숫자 기억 게임를 만들어 보고 배포해봤습니다. 숫자 기억 게임 시작을 클릭해주세요. 시작 제출 정답소요 시간날짜   1. 날짜와 시간 불러오기날짜와 시간을 YYYY-MM-D

dlawi0108.tistory.com