로또 번호 추첨 만들기

오늘은 어제 배운 내용을 바탕으로 로또 번호 추첨 게임을 만들어 보았다. 🎱

 

선택 과제라 최대한 할 수 있는 곳까지 만들자! 라는 마인드로 우다다다  만들었다.

학습 내용이 로또 번호 추첨 프로젝트를 따라해보는 거였어서

만들 때 기본적으로 들어가야 하는 부분은 학습 내용을 참고해서 만들었다.

 

 

 

---

바아로 결과물부터 ㄱㄱ

로또 번호 추첨

오늘은 js 기능 구현에 더 집중하느라 css는 빠포

 

 

 

---

자바스크립트 코드

const generateWinningNumbers = document.getElementById(
  'generateWinningNumbers'
);
const generateLottoNumbers = document.getElementById('generateLottoNumbers');
const winningNumContainer = document.getElementById('winningNumbers');
const lottoNumContainer = document.getElementById('lottoNumbers');
const colors = ['lightsalmon', 'skyblue', 'plum', 'lightpink', 'lightgreen'];

function generateNumbers(wn) {
  while (wn.length < 6) {
    let numbers = Math.floor(Math.random() * 45) + 1;
    if (wn.indexOf(numbers) === -1) {
      wn.push(numbers);
    }
  }
  // 오름차순 정렬
  wn.sort(function (a, b) {
    return a - b;
  });

  // gpt가 도와줌
  wn.forEach(function (numbers) {
    displayNumbers(numbers, wn);
  });

  return wn;
}

function displayNumbers(numbers, wn = []) {
  const eachNum = document.createElement('span');
  eachNum.classList.add('eachNum');
  let colorIdex = Math.floor(numbers / 10);
  eachNum.style.backgroundColor = colors[colorIdex];
  if (colorIdex === 0) {
    eachNum.style.padding = '8px 12px';
  }
  eachNum.textContent = numbers;

  switch (wn) {
    case winningNumbers:
      winningNumContainer.append(eachNum);
      break;
    case lottoNumbers:
      lottoNumContainer.append(eachNum);
      for (let i = 1; i < 46; i += 1) {
        if (winningNumbers.indexOf(numbers) === lottoNumbers.indexOf(i)) {
          if (lottoNumbers.indexOf(i) > -1) {
            eachNum.style.backgroundColor = 'red';
            lottoNumContainer.append(eachNum);
          }
        }
      }
      break;
  }
}

let winningNumbers = [];

generateWinningNumbers.addEventListener('click', () => {
  winningNumbers.splice(0, 6);
  winningNumContainer.innerHTML = '';
  lottoNumbers.splice(0, 6);
  lottoNumContainer.innerHTML = '';
  generateNumbers(winningNumbers);
});

let lottoNumbers = [];

generateLottoNumbers.addEventListener('click', () => {
  lottoNumbers.splice(0, 6);
  lottoNumContainer.innerHTML = '';

  if (winningNumbers == '') {
    alert('이번 주 당첨 번호를 확인하세요!');
  } else {
    generateNumbers(lottoNumbers);
    lottoNumbers = [];
    generateNumbers(lottoNumbers);
    lottoNumbers = [];
    generateNumbers(lottoNumbers);
    lottoNumbers = [];
    generateNumbers(lottoNumbers);
    lottoNumbers = [];
    generateNumbers(lottoNumbers);
  }
});

 

 

 

---

코드를 구현하는데 제일 오래 걸렸던 부분은 당첨 번호와 자동 생성기에 나온 번호가 일치하는 숫자는 빨간색으로 표시하는 거였다.

 

시도하다가 완전 막혔을 때

 

이때 당시에 결과물이 정확하게 기억은 안나는데 아마도 일치하는 숫자는 빨간색으로 표시가 되긴했다.

생각보다 쉽게 구현이 돼서 신이 났었는데 자세히 보니까 문제가 있었다.

문제는 당첨 번호 6개가 모두 적용이 되는게 아니었다.

 

계속해서 랜덤을 돌리면 어떤 숫자는 빨간색으로 나오는데

어떤 숫자는 당첨 번호에 포함되어있지만 빨간색으로 바뀌지 않은 것을 보고 쵸큼 당황,,,

.

.

.

무한 코드 수정 끝에 완성되었다!!! 🐣🐥🐥

 

⭐️완성 코드⭐️

 

아직 코드 해석을 완벽하게 이해하지 못했지만 일단 구현 되었다는 것에 햅히~~

그리고 gpt 도움 없이 만들어서 뿌듯했다 bb

.

.

.

내일을 위해서 오늘 블로그는 여기까지!

 

 

 

 

 

---

랜덤 추첨을 계속 누르다가 나는 과연 최대 몇개를 맞출 수 있을까 궁금해서 돌려보기!

 

 

 

그 결과는~~~~

그냥 자랑하려고 ㅎㅎ

 

무려 5개나 맞췄다! 완전 럭키비키다 이 말이다~~