#1 로또 번호 추첨기

※소소한 개인 프로젝트 기록입니다. 

 

1) 과정

이제는 진짜 여름... 하늘이 파랗다

날이 좋아서 산책을 했다.

요즘 자바스크립트 실전 연습을 하고 싶었지만,

도통 아이디어가 안 떠올랐는데 

문득 어렸을적부터 로또 1등, 2등이 많이 나왔던 동네 슈퍼를 지나가게 되었다.

여기에서 아이디어를 얻어 소소하지만 '로또 번호 추첨기'를 만들어보기로 결심했다!

 

 일단, 나는 로또에 대해 아무것도 모르기 때문에 로또에 대해서 먼저 알아보았다.

 

1부터 45까지의 숫자 중 6개를 맞히면 된다. 거기에 추가로 아래와 같이 숫자 5개를 맞힌 상황에서 보너스 볼까지 맞히면 2등이 되는 2등 보너스볼도 나온다. -출처: https://namu.wiki/w/%EB%A1%9C%EB%98%90%206/45

 

아하, 그러면 기본 6개 공 + 보너스 공 번호까지 추첨하는 추첨기를 만들면 되겠구나.

그래서 일단 html 과 간단한 css 로 뼈대부터 잡았다.

 

초기 뼈대. 23은 임시로 넣은 숫자

숫자를 공 가운데로 정렬하기 위해서 임시로 23을 넣어 정렬해두었다.

이제 버튼을 누르면 1부터 45까지의 숫자를 랜덤하게 추첨해주면 된다.

 

 

querySelector를 이용해 버튼 요소와 각 div(추첨 공 모양. div가 여러개이므로, 여러개의 div를 조작하기 위해 querySelectorAll) 요소를 가져온 뒤1부터 45까지의 수를 배열에 집어넣고, 랜덤으로 추첨을 해보았다.

 

랜덤으로 추첨하기 위해서 자바스크립트 Math.random() 메서드를 이용했다.

(참고한 자료는 아래에 첨부해놓겠다)

그런데, 위 실행과정을 보다보면 큰 오류가 있다.

로또 당첨 번호는 중복될 수가 없는데, 잘 보면 숫자가 중복되어서 나온다.

그래서 나는 해당 번호가 나오면, 그 번호를 splice해서 배열에서 제거해주었다.

 

그렇게 중복번호가 나오지 않는 랜덤 추첨기를 완성했지만, 뭔가 너무 칙칙해서...

번호에 따라 배경 색깔을 바꿔보기로 했다.

 

로또 추첨 공은 번호 순서에 따라 노란색(1~10번), 파란색(11~20번), 빨간색(21~30번), 회색(31~40번), 초록색(41~45번) 등 총 5가지 색으로 구분돼 있다. 출처: https://www.edaily.co.kr/news/read?newsId=01666246612781104&mediaCodeNo=257

 

if, else if 문을 사용해서 배열에서 해당 인덱스의 숫자를 확인 후 각 범위의 색깔을 background-color로 입혀주었다.

버튼에 이모지를 넣고, 보기 좋게 margin과 padding 설정까지 다 끝낸 후의 모습이다

**나중에 다 만들고 나서 보니까, 분명 중복을 없앴는데도 자꾸 중복이 일어나는 상황이 발생해서

확인해보니, 번호를 집어넣는 array를 전역변수로 선언해놓고, 

1~45까지 집어넣는 반복문은 버튼을 누를 때 업데이트 해주는 함수 안에다 집어넣어서

전역변수로 선언된 array에 매번 1~45 가 들어가서 번호를 제거해주는 데도 자꾸 중복이 나왔다.

다음부터는 변수 선언도 잘 생각하고 하자!!

(아래는 해당 오류를 수정한 프로그램)

2) 결과

 

****sort 적용 전입니다. 수정하겠습니다!

3) 참고자료

 - JavaScript 난수 추첨

https://velog.io/@eunjin/Javascript-Random-Numbers-%EC%9B%90%ED%95%98%EB%8A%94-%EB%B2%94%EC%9C%84%EC%9D%98-%EB%9E%9C%EB%8D%A4-%EC%88%AB%EC%9E%90-%EC%B6%9C%EB%A0%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-%EB%B0%B0%EC%97%B4-%EC%86%8D-%EB%9E%9C%EB%8D%A4%ED%95%9C-%EC%9B%90%EC%86%8C-%EC%B6%9C%EB%A0%A5%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 - 로또 관련 정보

https://namu.wiki/w/%EB%A1%9C%EB%98%90%206/45

https://www.edaily.co.kr/news/read?newsId=01666246612781104&mediaCodeNo=257

- splice

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice</p