단 20줄로 만들어보는 로또번호 생성기! 소스 코드

로또 번호 생성 프로그램~ 광고 등을 통해 많이 보셨죠?

오늘은 로또 번호 생성 코드를 만들어보려고 합니다.

저는 javascript / html/ css를 사용해서 만들었어요

 

우선 HTML 코드입니다

 

<div class="container">
  <div class="number"></div>
  <div class="number"></div>
  <div class="number"></div>
  <div class="number"></div>
  <div class="number"></div>
  <div class="number"></div>
  <div class="number"></div>
  <button id="button" class="button">
  	번호 받기
  </button>
</div>

number클래스로 지정된 div들이 7개의 로또 구슬이 될 거구요,

버튼을 클릭하면 이 구슬들에 랜덤으로 번호가 나타납니다.

 

Javascript코드는 이렇게 될거에요~ 

button의 onclick이벤트 함수 안에서 구슬 엘리먼트 (number)들 안에 숫자를 표시해 주는 로직입니다.

let element = document.getElementById("button");
element.onclick = () => {
  let result = [];
  while(1) {
 	var num = parseInt(Math.random() * 45) + 1
    if (result.indexOf(num) < 0) {
      result.push(num);
    }
    if (result.length == 7) break;
  }
  result.sort((a, b) => {
    if(a > b) return 1;
    if(a < b) return -1;
    return 0;
  });  
  let numberEl = document.getElementsByClassName("number");
  for (let i = 0; i < 7; i++) {
  	numberEl[i].innerHTML = result[i];
  }
}

 

마지막으로 CSS - 취향에 따라 작성하시면 돼요 ^^

 

.container {
  display: flex;
}

.number {
  background: pink;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
  line-height: 50px;
  font-weight: bold;
  color: white;
  text-align: center;
}

button {
  width: 200px;
  margin-left: 10px;
  border: 1px solid pink;
  background: none;
  border-radius: 20px;
  color: pink;
  cursor: pointer;
  height: 50px;
  font-weight: bold;
}

button:hover {
  background: pink;
  color: white;
}

자세한 설명은 아래 강의를 참고해 주세요